Studiograsshopper gets a makeover

I’ve been promising myself this for some time. Not that I was unhappy with the previous theme – Derek Punsalan’s excellently clean and simple Grid Focus – rather I felt a need, like many of us at this time of year, for a spring clean and spruce-up now that the sun is starting to shine and the weather is getting warmer. So here it is! Based on Shades of Blue by Studiopress, it’s a clean two-column blog-style theme although I am, of course, tweaking it and refining it for my needs. In the meantime, don’t be surprised if the odd link breaks, the layout is a little screwy in places, or the colours change slightly during the next day or two…

So why did I choose Shades of Blue?

Firstly, it’s Studiopress – so I know it’s been well coded and nicely done.

Secondly, I wanted to move from a 3-column layout to 2-column, mainly because I post a lot of code in my articles, and the greater page width of a 2-column layout makes this sort of content easier to read.

Thirdly, I don’t need either a full-on “magazine” style or “blog” style theme. A lot of the content here is Page based, rather than Posts, the latter being used mainly for news items, tutorials, code snippets etc.

Finally, I specifically did not want a theme with built-in Theme Options. Why? Well, Theme Options are great for people who don’t know the difference between CSS and PHP, are not interested in this sort of thing and /or don’t have the time for it. That’s fine and cool. However, when a designer codes Theme Options, he/she is inevitably making some decisions about how the theme should be used. The user may think differently, and customising an “optioned” theme is always more work, in my opinion, than coding some functionality from scratch. Obviously, the fact that I know WordPress helps here!

So, although Shades of Blue is more blog than magazine, I knew that I would have a nice, solid blank canvas to work with. Which is exactly the case. Thanks, Brian, for a lovely theme!

Under the hood

For those who might be interested in the tweaks I’ve made to the standard version of the theme, here’s a list of the main changes:

• Colour scheme. I already had a colour scheme with the previous theme – mostly white with a light green/blue and orange accent. I didn’t want to stray too far from this although, inspired by Brian Gardner’s original design, I have kept quite close to the original Shades of Blue colours. I tend to prefer minimalism – especially with colour schemes – so what I’ve ended up with is quite bold – for me! Another good thing that came out of this exercise was stumbling across a rather excellent online colour palette chooser/creator at Color Scheme Designer. I found it excellent and actually much better to use than the popular Adobe Kuler site. I now have a warm inner glow that the colours chosen are technically “correct” in terms of being contrasting/complimentary etc. Whether they are aesthetically pleasing is another matter altogether!
• Created a home.php for the homepage. This incorporates a mix of static and dynamic content. The three posts at the top of the home page are called using query_posts to modify the standard Loop.
• The WordPress Plugins page is a Page Template and contains a custom loop for a hidden category of posts. These posts only appear on this page, the aim being to create a “portal” for all content related to my plugins.
• Naturally, I’ve used my own Serial Posts plugin to create the “Plugin Resources” post/page listings on the WordPress Plugins page. This is the first time I’ve really used this plugin in a real-life situation, and this experience has given me plenty of ideas for how this plugin can be further developed. Watch this space!
• In the footer, I reduced the 4 pre-coded widget areas to 3. I don’t need 4, and as I like plenty of “whitespace” on a page, 3 widget columns is perfect for me.
• The sidebar, which is widgetised as standard, has been modified to keep some of the hardcoded elements. Although I started out using some widgets, I ended up keeping all the original hardcoded content and just modified/deleted some of this to suit my needs.
• The Recent Articles box in the sidebar contains some Conditional tag code to exclude the 3 homepage posts when viewing the homepage. This is a really easy thing to do, and I think more people should use this technique to tailor the sidebar content to the page being viewed. There’s more to do here and I haven’t finished yet.
• Added content “banners” to the category archive pages so that it is clearer which archive is being viewed. Shades of Blue uses one main menu bar for all content, so there aren’t as many opportunities to use dynamic menu highlighting to signal to the user where he is on the page. I may implement a breadcrumb navigation system.
• Changes to the CSS were limited to the colour scheme, adding the page “banners” and WordPress Plugins page sections, plus a few tweaks to the odd padding or margin, here and there, to suit. All the main dimensions/div sizes have been kept as standard. Another plus for using a Studiopress theme – the CSS is well done, clearly laid out and easy to work with.

Any grumbles?

Well, as this article is turning into a bit if a theme review, I suppose I should mention a couple of things. Bear in mind that no theme is ever perfect – there are always user-needs that a designer cannot possibly account for. If this wasn’t the case we would all be using the same theme! Putting that aside, I just have two areas to mention:

• Sidebar width is a little narrow to comfortably accommodate 250px wide banner ads. I don’t use that many myself, but I do use a few. Sure, this theme is aimed more at the social blogger than the hard-headed affiliate marketeer (no offence to either), but I think an extra 20px width would be better. As it is, I decided to leave the dimensions as standard as I think the aesthetic balance is better with a wide content area and narrow sidebar. It is, of course, an easy enough thing to modify if needed.
• Rounded corners. I love’em, you love’em, everybody loves’em… except Internet Explorer and Safari/Chrome. In my opinion the great overall look of this theme is precisely because of the rounded corners, but CSS-generated rounded corners don’t work in IE7 (don’t even think about IE6), and can be problematic in Safari/Chrome. If this wasn’t a free theme I would be rather miffed that the corners haven’t been generated with background images (for best cross-browser compatibility). As it is, I can live with it, but will probably create suitable background images (only a few are required) to ensure that the site looks as good in IE as it does in FF.

Apart from those comments, I have no other grumbles.

Finishing touches

A web site is never finished – especially those belonging to people who work in web development – and Studiograsshopper is no exception. Things to fix/sort out:

• Rounded corner images for IE.
• Image layout fix needed for banner ads in IE
• Need to test in IE6.
• Sort out the home page “WordPress Plugins” content. This isn’t finished yet.
• Finalise the layout of the WordPress plugins page, by making two faux columns for the download, compatibility and resources content.
• Finish off the dynamic menu highlighting using Conditional Tags mentioned earlier.
• Think about adding a breadcrumb navigation.
• Further develop the sidebar dynamic content, eg Recent Articles lists, Popular Articles etc. I normally prefer to code these myself rather than use plugins.
• Change the syntax highlighter plugin that I use for displaying code. The colour scheme is horrible and I’ve seen some alternative plugins which look rather nice.
• Re-style the Forum CSS to better match the new look of the site.

I’m sure there are lots of other little tweaks either needed, or wanted, but the above are my main priorities. Sometimes, once you’ve got a site 90% finished, it’s a good idea to sit back for a few days and see what reaction you get from users. Otherwise you can spend a lot of time over something which is not important to your readership. Which is my excuse, in advance, for never finishing this site!

And finally…

If I have time, I shall update this post periodically to track the various changes and tweaks that will be made in the coming weeks.

And finally, if you’re looking for top quality WordPress themes, check out Studiopress. I don’t think you’ll be disappointed.