Over the weekend, I put the finishing touches on another custom WordPress theme by The BlogFixers. Jeff and I were commissioned by Matt from YepYep to do a complete overhaul of his existing site and create a new theme from the ground up. We worked with Matt throughout the entire process from the brainstorming phase (how many columns, column widths, etc), through the design phase with Photoshop comps and finally the finished product which went live yesterday. The cool thing about this project is this was my first attempt at developing a three column WordPress theme. While I worked on the design with Matt, Jeff worked on getting his server configurations tweaked and dealt with some issues that Matt was having with the WP Super-Cache plugin.

Upgrades and Improvements

As I already stated the new theme is three columns now, as opposed to the previous theme which had only two columns. When designing the new header section I wanted to give the logo a little more flare, so I decided to place it at a bit of an angle and added in some gradient effects. The background behind the logo got a bit of a treatment as well with the addition of a few carefully placed graphic elements. Moving down we created a navigation bar with buttons for the many featured categories of the site. Previously, Matt didn’t have any navigation…this was a big improvement.

I decided to carry of the new look of the logo into other elements like the date badge and the RSS icon. Matt had specifically requested a graphic solution to the date badges after seeing the ones that I created for Cuzoogle’s new theme. The major difference with this version is that we have included the year below the date. Matt had a great idea for displaying the categories as a ‘tag cloud’, so we used the Category Cloud Widget from Lee Kelleher.

Looking Back at the Project

Although, the project took a little longer than anticipate to complete (thank you Holiday Season); Matt was extremely patient and easy to work with through the entire process. We have already received numerous feedback emails regarding the design, and we really appreciate the comments. This was a fun project to work on and I can’t wait to get rolling on the next one.

I really hate to admit it, but I need to buy a cheap PC for testing. No matter how great everything looks in Firefox or Safari…it always needs tweaking in Internet Explorer. We had some CSS issues with the footer not staying put on the YepYep theme in Internet Explorer, but after an hour of messing around I got it fixed.

Thank you Matt for trusting Jeff and I with the redesign of YepYep…we had a blast!

~ GrandmasterB

If you’re getting tired of that free WordPress theme you’ve been sporting, or want to migrate from Blogger to Wordpress; check out the Design Services page to see my portfolio.

The header of the new design can only be described as a very colorful combination of shapes and patterns that has been distressed to give it a rough feeling. It reminds me of wallpaper that you might find in your grandmother’s guest room, but much more tasteful. The distressed look is carried over into the different icons and buttons throughout the site. My most favorite example of this look is in the mouseover state for the navigation bar…a simple pencil scribbled circle around the text.

Of course being the inquisitive type that I am I had to dive further into the new design and how it was built. The entire theme is straight up coding mastery! The entire theme is built from only 23 images; which are all built into the style sheets. Using the web developer plugin for Firefox, I turned off the style sheets and the only images it shows are the ones displayed in the posts…it’s 100% XHTML/CSS no embedded images pretty impressive.

Matt has changed up and added some new features to the site as well. The photos in his image gallery are much larger now, some are around 840 pixels or larger. Matt classifies them as “Imagine it like going HD, you’ll definitely enjoy it more on broadband”. This is amazingly the first version of his site that is all Wordpress and WP2.5 to boot. Gravatars are more prominent in the comments section now and allow for the different iterations of gravatars: wavatars, monsterid and identicon.

There are many more features…too many for me to list here, but if you’re a website design junkie like myself I suggest you check out the new design for yourself.

~ GrandmasterB