Just finished another theme to add to my collection and I must say, I am just now getting the real hang of this theme production. This time around, I went a little unorthodox. That’s not true – It is a regular two column design; it does have the standard navigation; the sidebar is in the right side; The archive, single and other template are intact; but I did throw in a lot of Javascript, bolder color schema and a combination of rounded corners, etches and fades.

Javascript / jQuery Goodness

I’m a big fan of animation in web design. Especially ones that enhance your pages functionality, accessibility and of course – quality. This is the case in the tabbed containers that you get in Pork and Beans’ top sidebar and comments form.

pork-and-beans-2

The code is from Queness, I was able to squeeze a lot of content into such constrained spaces. Content that are to be grouped logically in the first place. For instance, in the comments area, the form shows up as default, but you can also switch from a selection of subscription options, as well as a list of related posts.

Other Javascript features include the sliding captions on the images – courtesy of Buildinternet.com, and a Scroll to the top button found in the footer area.

Colors Schema, Aesthetics and Auto Resizable Images,

The original design didn’t include a wood background, nor was there a patch of grass in the footer – but I figured, it needed some identity. I know what you’re thinking: What does it have to do with “Pork and Beans”? Absolutely nothing. Who said the name had to relate anyway? Picked up the color scheme from the “Moboogie” Color template from Adobe’s Kuler website. Images are automatically resized using a custom field entry (image). For best results, use images wider than 562 pixels.

Plugins Needed

The sidebar has a Flickr Box included which will need you to download the flickrRSS plugin by Eightface. The sidebar is also fully widgetized, styled to match the rest of the page’s elements. You will also need the Similar Posts plugin by Rob Marsh – which will pull related posts to the current article. This will show right below a single article, in the last tab in the comments form.

Conclusion

Pork and Beans is ideal for the traditional blogger. Although it may work best with people who have high quality and vivid photos to include with their articles. I do not suggest customizing it to match another look – since the colors and the background images will be difficult to mess with. Well, if you really must need to tweak, then by all means. I must also mention that I started to code to satisfy IE 6 quirks – but gave up. There is also a bug that the body background shifts to the right on scroll, but goes back to the original position. I don’t know what causes it, but if any of you experience the same thing – please leave a comment.

You can see Pork and Beans live in action from this link, Download the theme from here. All I ask is to spread the word, leave a comment or follow me in Twitter.

Update – You can now download the PSD:. Note that the PSD does not look exactly like the demo (changed my mind a couple of times during coding).