Being in the job market of late forced me to take a hard look at my personal Web presence – LinkedIn profile updated? Yep. Facebook info cleaned up? Done. Twitter all polished? Of course.

What remained was my own blog – 1000+ posts and several years in the making, I’ve been so busy of late that I haven’t focused on updating it with any regularity. So instead of presenting a nice, fresh, clean and informative home page for future clients/employers Googling me, it looked rather unfocused and stale.

While I was, and remain, a happy user of the Thesis theme, I set out to scour the Wordpress theming community for professional, clean, and modern themes focused on presenting an online resume of sorts. What I found was lacking. If you are a Web designer, artist, or photographer, you are set with dozens of high quality portfolio themes. Beyond that, not much was available.

So I turned back to the trusty Thesis to see if I could bend it to my will. Armed with the Thesis Openhook plugin (simple a MUST have to get past the myriad hook options in the theme framework), I set about on a two day redesign with a few goals and limitations in mind:

  • It had to be clean, uncluttered, and easy to find information for prospective employers and clients.
  • It did not have to function as a “sell” site for any particular consulting services.
  • It did have to reflect my online activity around sharing, Tweeting, and so on.
  • It did not need to include 1000+1 widgets, even those focused on traffic building and navigation (similar posts, most popular posts, etc) – building traffic is not my goal on this blog (elsewhere, different story).
  • It did need to reflect a bit of personality.
  • It did not need to include heavy graphic design as while I’m not incompetent when it comes to PhotoShop, let’s just say I’m no artist.

Version 1 is what you’re looking at now, if you’ve clicked through from your favorite feed reader. Version 2 will include a few enhancements, such as use of the Feature Box to summarize my bio + skills for anyone hitting the home or individual post pages, and a few sidebar tweaks.

newhomepage.jpg

If you’ve ever attempted to heavily customize Thesis, you are intimately familiar with the Custom CSS file. You’re also probably familiar with the challenges of jumping back and forth between the core style.css and the custom CSS file to understand what styles, elements, and attributes exist and can be modified. Here’s how I approach customizing Thesis CSS:

  • Open the custom.css file in Coda from Panic, my Web development tool of choice for OSX.
  • Open the core style.css file in CSSEdit, to quickly find and understand the default styles.
  • When I want to edit something, I copy/paste the original style into custom.css, *always* labeling it (e.g. with /* navbar */) so I can quickly reference changes I’ve made later on.
  • Open up two browser windows or tabs, one logged into the Thesis admin screens – as you likely will end up tweaking something, not least being column widths – and one on the public view of your site (either a locally hosted version, or a live version).
  • Side note, if you are doing a locally hosted version for development, on a Mac take a look at MAMP to run your own Apache, MySQL, and PHP instances on your laptop. Makes things incredibly easy.

I have yet to figure out how to make CSSEdit’s live preview functionality work with the custom.css idea Thesis uses, so if anyone has a suggestion for making that simpler, I’m all ears.

Some other random tips and tricks I used:

  • You can make use of “border-top” to create some nice non-graphic dividers. Just edit the #sidebars (and #sidebars_1 and #sidebars_2) and #content boxes, or wherever else you’d like them.
  • Edit your nav bars – one thing I don’t like about the proliferation of Thesis is everyone seems to use the default nav bars. 9/10 times you can ID if a site uses Thesis by looking at the navigation styling – that and the siebar default fonts, which are very distinct.
  • To create a nice “sharing” live list in your sidebar, try out the Lifestream plugin from iBegin. Easy as pie, this one. You can see all my active plugins here.
  • To find great color schemes, look up Adobe’s Kuler community. I love this, and am generally bad with colors, so it’s a life saver.
  • Try out negative margins to break out of the box, so to speak. I used a negative 50 px setting on margin-top, inserted as part of a custom style in the “Before Sidebars” Openhook section to “float” my social network buttons into the header. I’m sure this is a bad idea for some technical reason, but it’s fun to play with.

Anyway, I hope you like the new look. My goal is to refine this further to present on any entry page a clear sense of who I am, given the purpose of this blog. For now, on to other Web projects.

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Tumblr
  • Twitter