So, the new design1 is on the field and so far, seems to be kicking ass. I'm pretty happy with this one, it's certainly the most fully fledged WordPress theme I've made, as well as being quite attractive. It basically came about because there were lingering issues with the last design in IE. Damn IE.
I'm particularly happy with the 1000 words section (which uses a new plugin, more on that later). You can basically browse my entire Flickr account on this website now, including comments, tags, and even notes2 which is ultra cool. Some of that was possible in the last design as well, but it wasn't implemented very well.
From about here, this post will probably get a little technical and somewhat boring, depending on your level of interest in WordPress themes and plugins. So if you couldn't be bothered, you might as well bail now.
The first thing I decided about the new design was that I only wanted the latest post on the front page. I had really decided that before I even started working on it. I think the motivation behind that was to be able to get my photos and music tastes out of the sidebar and give them a little more of the spotlight (which shines so brightly on this website).
I decided not to move away from the existing header image, for two reasons. First, I like it. Second, I didn't have the time to think of something different. As for the general feel of things, I got a little bit of inspiration from Veerle. I've long admired her design and her design skills. She's always posting super cool tutorials.
The main challenge was, as always, getting the damn thing to be sufficiently cross browser compatible, and for the most part that has been achieved. For the layout, I'm using the genius of the one true layout and its adaptation of The Holy Grail. I've also implemented equal height columns to keep the sidebar and the main section of an equal height.
Equal height columns in non-table based layouts are a nightmare for web designers. This was the most problematic of the CSS problems I encountered. It turns out that the version of equal height columns I'm using3 disagrees violently with anchor links. This is a problem from a number of stand points on WordPress powered blogs (and particularly this one, because it uses Footnotes).
As a result of this violent disagreement I've had to basically disable anchor links all together. The first problem with this is that the WordPress plugin Brian's Latest Comments which I use for the sidebar can no longer get you to the relevant comment. Second, when clicking on the comment link, the comment form wasn't immediately obvious. To overcome this I went back to the Frangipani I design for the comment form (which I like better anyway) and put it in the sidebar (position fixed for non IE users).
Flickr Photo Gallery
Flickr Photo Galery by Tan Tan Noodles beats the pants of any other gallery plugin for WordPress. It's feature set is reasonably full (and improving all the time), the user community is active and it's reasonably easy to implement the basic gallery if you've got any clue about installing a WordPress plugin. What it does lack, is a good set of documentation. Actually, it has hardly any documentation at all that I could find. As an advanced user wanting to implement the album with a few tweeks, it took me a while to sort through forum questions, code and support requests to find out how to do some things (like stick my latest photos on the front page without using WP Widgets5).
I've almost bored myself to death, so I'll stop there for fear of loosing more readers than I already have.
P.S. I managed to finally persuade The Ooze to switch over from Blogger to WordPress. I'm hosting his blog on my Dreamhost6 account, just out of the kindness of my heart. Go check out his new digs at http://ooozie.net.
Comments seem to have been broken and I think they're fixed, but not very well. I'm still working on it.
- I've called in Frangipani II, original no? [↩]
- Notes are only available on this site if you're using a good browser. [↩]
- Basically apply a huge padding and an equally huge negative margin to the elements you want to be equal heights, then hide the overflow of the parent element. See the One True Layout writeup for more info, but be sure to read about its problems before implementing it. [↩]
- Some version of which I'll probably include in the next release of the footnotes plugin...which is probably still at least a couple of months off. [↩]
- I'm really not a fan of widgets. Of pretty much any variety. [↩]
- Yep, that's an affiliate link, I love free cash as much as the next person. [↩]