No sooner do I finish my quick series on customizing a Wordpress theme for Graffiti (I, II, III, IV) than I throw it all away for a — gasp — hand-written one. Yes, I got bored with the browns and went with the grays.

There were two reasons for this: first, I wanted to use the entire wide-screen browser window and avoid the dead space on either side, yet still have a non-cluttered look, and, second, I wanted to use the visual ideas present in Adobe Lightroom in doing so.

Adobe Lightroom is an application that is geared to the photographer's workflow where the image is king. Everything on the screen is deferential to that idea. So the entire display is built of shades of (dark) grays so that the image you're working on stands out. And even with those grays, it has been designed so that only the important textual information is in light grays or white, the rest blends in with the background so that it doesn't distract from the job in hand: manipulating your photos.

So I wanted that kind of behavior. For the blog, it's the content that is king, the blog posts. And so it's those that should stand out in the display, not the widgets on the side, not even when the metadata about the posts. That stuff can be there, sure, but it shouldn't distract from the real meat of the blog.

Going along with all that, I wanted to make the theme image-free. No little gradient PNGs here, no fancy-schmancy rounded corner GIFs there. Images that are displayed as part of the theme (like my photo of the Castlerigg stone circle) had to blend into the background: they're there for decoration, but should not distract.

After that, it was a case of finding the right layout for the blog. I spent an hour or so, trawling the Wordpress themes, but there was nothing there that (a) were plain enough, or (b) that were wide-screen enough.

In my travels, I came across Eric Meyer's blog. and it had the kind of layout I was looking for where, sure, there is a sidebar, but the content column filled the remaining space.

That was my layout inspiration, and with my palette of grays from Lightroom, I spent the last three evenings building and tweaking the CSS file and view files.

The hardest part was the damn tag list for each post. $post.TagList is a comma-separated string of tag names. $macros.TagList takes that string and creates a comma-separated lists of URLs to the various tag queries. I wanted a vertical list of tag URLs created as a bunch of <li> elements, but it seemed that the only way I could do this was write my own plug-in. Since I've not done this before yet, I put that idea on the back shelf. I had another idea that I fleshed out in my mind: write a javascript function that parses the taglist and creates the required list of URLs, but that was discarded in favor of a bit of CSS jiggery-pokery that styles the <a> elements in the <li> to be float:left and clear:left. As a workaround, it works very nicely as you can see, with only one small bug left, which, because of my underlying vision for the theme, is all but hidden.

Last night, just before midnight I "flipped the switch" and it went live.

There are still a few bugs, but I'll be fixing those this evening.

Share it: