Tutorial : How I converted an HTML template into a Drupal 6 theme

In my recent Boston Drupaltherapy workshop I got stuck on an in-class example of how to convert a well-formed HTML template into a Drupal 6 theme. I was showing this off as an example for how new Drupal users could attack themeing in a lightweigh way by using an HTML template as a starting point. I picked a simple HTML template that I found with a free license on a free HTML template site.

The excercise uses Drupal's core default theme called Garland and mercilessly steals portions of theme code from it to paste into the correct places in the new HTML template. I've got screenshots below that show the windows for Garland open right beside my HTML template window so I can make direct comparisons between the files and their contents.

Here is my original default theme and some sample content:

Here is the unviolated HTML theme, Blackfairy, consisting of one HTML file and one CSS file:

Here are the directories of each theme beside each other, Garland on left, Blackfairy on right:

First things first, in order for Drupal 6 to acknowledge and detect that my new theme Blackfairy exists, I have to move the HTML template into my sites/all/themes directory. New in Drupal 6, I also need to create a .info file that will tell Drupal information about this new theme - like theme name, blurb, version number and what theme engine it depends on. I simply created a new text file in my Blackfairy directory called blackfairy.info, and inserted this stuff:

name = Blackfairy
description = A sexy little theme with a huge orange block and a large orchid, originally hacked from a free HTML template.
core = 6.x
engine = phptemplate

[Read more..]

Courtesy : Drupaltherapy.com