Thesis Theme HQ Site Revamp: Graffiti Skin

If you’re a regular here, you might have noticed the revamped site design. Thesis Theme 1.7 has some fantastic options that allow you to play with your site’s look and change it back just as easily. So, I thought, “It’s been six months since my last change, time for a new look”.

In November 2009, I brought back the chameleon from an earlier look.

He’s always made me happy working on the site – a familiar face so to speak. Prior to the chameleon, the site sported a cool, blue skin for about six months.

As Thesis Theme HQ is all about Bold, Bright and Beautiful Thesis Sites, I thought it essential that my new background and other design elements fit in with my tagline and the blog’s reason for being. No time for being shy so here is the  new in your face look.

Like it or love it I think it shows off some nifty ideas even a beginner can do.

Thesis 1.7 @ Thesis Theme HQ

After upgrading to Thesis 1.7 I realised how easy it would be to undo any changes. All you have to do is download your settings and upload them again or return to Thesis Theme defaults via the Thesis Options Manager (screenshot below).

This is great for those of us who would like to easily apply changes or use other Thesis Skins without spending hours going through screens/pages of instructions that come with skins and to make sure the settings are the same as the demo.

You can easily tinker and just reset defaults without having to reinstall the theme files or restore backup files. This is after you have upgraded to 1.7 of course. As with many recent upgrades, you cannot rewind to Thesis 1.6 versions if you want to for some reason.

I highly recommend Philip Barron’s Getting there: Upgrading to Thesis 1.7 guide - also recommended by the Thesis Theme Forum.

It seems to have a higher success rate for many Thesis users who took the time to complain of their problems (or lack thereof) when upgrading. It only took me 5 minutes to upgrade following his instructions.

Philip Barron has a great article on First-time Thesis installation.

What’s New?

Beginner’s Guide – The Ultimate Tour

Click to check it out

Background image

• Courtesy of ‘D Sharon Pruitt‘ @ Flickr. I highly recommend her site Pink Sherbet and of course this amazingly inspirational photo of a graffiti covered wall… Check out her other free to use (as long as you credit her) images here.

Nav Menu Vs Nav Buttons

• I ditched the nav menu that usually appears above/under the header in favour of some colourful image buttons and a vertical nav menu down the left-hand side of the site.
• I used a portion of the graffiti wall and did my own artwork in Photoshop.

New Header

• My favourite way to create a no-sweat header is to cut out a portion of the background image, overlay a translucent dark box over the top and follow it with a strong white blog title. Then it’s just a matter of resizing the header and/or columns.
• The header blends in nicely with the background this way and even the busiest headers can still let the blog title ‘pop’.

Two columns

• I tried 3 columns with a left and right sidebar but it was too busy with the colourful graffiti background.
• Two columns makes being disciplined about what to include in the sidebars easy.
• Nav menu in the left sidebar to encourage reading in the common  ‘F Pattern’ hotspot areas.

Simple Colour Scheme (Text!)

• Three text colours, dark purple, teal green and deep red for the headlines and links. Teal green is also used in the footer.
• Light green for post-author comment background to pick up the green in the background for a playful contrast.
• I’m trying out a simple underline for <H3> headings to help break up large spans of white, code blocks, etc.

Thumbnail and Post Images

• I was previously using the Thumbnails for Excerpts plugin for a small 100×100 thumbnail based on the first image that appeared in each post. The images were never quite aligned properly.
• I’m now using a larger thumbnail size of 300×150 pixels for the teaser excerpts and a main post image size (below the headline, right-aligned) of 260×320 pixels.  Now the images are beautifully aligned.

Further Changes

• Apart from those few design tweaks I will be creating directory pages (also known as ‘sneeze pages’) for each navigation button. At the moment they just link to category listings and a few odd pages.
• The new directory pages will deep link to all of the best (and often hard to find) posts and pages.

Your Thoughts?

I am still making tweaks and am open to any suggestions and especially any constructive criticism.

Please feel free to let me know what you think in the comments below.