Thatcham Historical Society Refresh Series

I am presenting the first in a series of articles that will detail how the Thatcham Historical Society got a site refresh. Or more specifically find out about the redesign and how the PSD theme was converted to HTML. Then learn how it was converted to Drupal along with access to the source files.

One of the websites I run, Thatcham Historical Society, which coincidentally I am currently (2010 - 2011) the Chair of, needed a refresh. This was in terms of functionality, content and the layout. The content is no problem, I can do that myself, especially being a member of the society and local historian for 10 years or so. Functionality is also not an issue as I am a web developer (PHP, MySQL, HTML, CSS, Drupal, etc.). But when it comes to design, I have little skill.

THS Original Site Layout

For reference, the original theme, or at lease the last one used before the redesign was called Marinelli (pictured above), a free Drupal theme, albeit with minor modifications.

I therefore desided to submit the site to PSDFan for consideration for a FREE 30 minute site refresh. In September 2010, Tom from PSD Fan selected it for a redesign. I won’t go over what he did, you can read his redesign article on PSDFan. What I will say is that besides the design looking fantastic, what Tom has managed to do in 30 minutes would have taken me a good deal more. The redesign looked fantastic and Tom kindly supplied me with the PSD file.

Original websiteRedesign by PSDFanFinal theme layout with modifications

Above shows, from left to right, the original layout, the original PSDFan redesigned site and out modified PSDFan version.

The plan was (and still is), with permission from Tom, to use the new design on the Thatcham Historical Society website and release it to the world under a GPL. Due to other commitments this did take a while to get done. What I aim to do, over several posts, is to walk you through how I took the PSD and converted it to HTML/CSS and then Drupal. This tutorial series will cover:

  1. PSD to HTML/CSS
  2. HTML/CSS to Drupal (6)
  3. Drupal 6 to 7

Each may be broken down to several smaller articles and I will attempt to keep the steps easy to follow. At the end of each I will provide the source materials under GPL and will host on GitHub so the community in general can progress the theme and provide other ports, such as WordPress.

In part 2, which should be sometime at the end of August or start of September 2011, we will prepare for the conversion of PSD to HTML.