First download a copy of the final Goband Theme files. That way you’ll have it to refer to as you work through this tutorial.
Next you want to download the most recent version of Drupal 5. Go to Drupal.org and look for the link on the right of the screen. Then make sure you get Drupal installed. Lullabot has a good video on Installing Drupal 5. You will need either a local test environment setup or a host that is Drupal compatible. I’m on a Mac and I use MAMP for local testing. Lullabot has a good video for setting up a Local Mamp Test Server on your Mac. You could certainly develop with Drupal and have a different setup. Lullabot has more resources for setting up a local test site on other computer types. Check out their Videos section. I keep mentioning Lullabot. They are well known in the Drupal community for producing really good websites for big companies, offering seminars, and running a Drupal podcast. They have some great Drupal resources.
Once you have Drupal installed rename your Drupal install folder to your project name. In this case its named goband. The image below has invisible files shown, as there are important files like the .htaccess file to be aware of. For the rest of this tutorial I’ll have invisible files turned off though.
Create Your Theme Directory
There are a multitude of template languages that Drupal can work with. The most common is PHPTemplate that uses Drupal’s own theme engine. There are two places to put your Drupal theme. The most obvious is in the themes folder. That works fine and will make your theme accessible to your website. Now if you want to have this theme power multiple sites then you can put it in sites > all > themes. You may need to create the themes folder inside the all directory. I’ve grown accustomed to using the second multi-site option.
So take your folder from last week that has your XHTML, CSS, and image files and copy it over to sites > all > themes. Pick a name for this theme folder. I chose goband.
Next move the files folder into the root Drupal install directory. When you install Drupal it will prompt you to create this folder. If you did that then just replace it.
At this beginning stage our theme folder should look like the image below. The only change so far is we have moved out the files folder
Set Up Our Basic Theme Files
Rename our index.html file to page.tpl.php. Then create a new file called template.php. Just leave it blank for now. There are more theme files we could create to customize Drupal, but we’ll keep it relatively simple. I will show you an example of how to do more advanced theming though with the Search area later in this tutorial.
Next we have a couple of images. In the backend of Drupal there is a page where you choose your site’s theme. A visual example of the site is needed there. I used a selection from a screenshot of the site. Its width is 150px and its height is 100px. The image needs to be named screenshot.png for Drupal to recognize it. Its shown below bottom left. Then I made a favicon thats taken from ico_sexy_angel.jpg. I use Dynamic Drive’s FavIcon Generator. You can see the favicon in use bottom right. Drop the favicon right into your theme folder and name it favicon.ico.
Our basic theme files are now in place. Your theme folder should now look like the image below.
Some Resources for Theming
Now that we have our files setup we can work with some code on our main theme page page.tpl.php. We will transform our html code into a working Drupal php file. Its not as scary as it sounds.The easiest way to do this is to copy and paste code from existing themes. I tend to reuse code from other projects I’ve worked on. You can also take a look at any of the Drupal.org freely available Themes. Being able to look at other’s source code is the beauty of Open Source projects. There is also a good theming overview on Drupal: Theme Developer’s Guide. A truly awesome resource is a freely available chapter from the Pro Drupal Development book: Chapter 8 – The Theme System
A good theme to take a look at when your getting started is called Zen. It was built for the purpose of learning how to create Drupal themes. Go ahead and download the Zen Theme. We’ll be opening it up and looking at its source code.
Drupalizing Our Head Section
Currently our head section is plain HTML and looks like the image below.
Some Resources for Theming
Now that we have our files setup we can work with some code on our main theme page page.tpl.php. We will transform our html code into a working Drupal php file. Its not as scary as it sounds.
The easiest way to do this is to copy and paste code from existing themes. I tend to reuse code from other projects I’ve worked on. You can also take a look at any of the Drupal.org freely available Themes. Being able to look at other’s source code is the beauty of Open Source projects. There is also a good theming overview on Drupal: Theme Developer’s Guide. A truly awesome resource is a freely available chapter from the Pro Drupal Development book: Chapter 8 – The Theme System
A good theme to take a look at when your getting started is called Zen. It was built for the purpose of learning how to create Drupal themes. Go ahead and download the Zen Theme. We’ll be opening it up and looking at its source code.
Drupalizing Our Head Section
Currently our head section is plain HTML and looks like the image below.
Now copy and paste from Zen. Where our theme differs just copy what I have below. Our head section looks almost identical to the Zen theme. All we are doing here is replacing some links with Drupal variables and some minor php. This way drupal can create everything dynamically. Each page title can be made on the fly for example. Here is a link to the variables available for page.tpl.php: Available Variables.
The cool thing is that for most sites this section will look identical. Zen differs a little here as it has some additional features with sub themes that makes its head section a little special. Modify the code until you get the results shown below.
Keep in mind that we are linking to our existing stylesheets in our Head section. When we turn on this theme in our next tutorial it will read our existing stylesheets. Drupal does have some default styles that can effect your stylesheets. So, you might have to make a few changes when you go into Drupal from the CSS of our previous tutorial. But overall the path from XHML/CSS to a Drupal theme is smooth.
Theming Our Body Section
First of all you can erase all the content from your file. We have a copy of our HTML file saved. We’ll use that in our next tutorial when we set up Drupal. So, we are only concerned with the structure of the HTML. We don’t need any of the paragraph content for example.Let’s Start with Our Page and Content Wrappers
Any dynamic Drupal theme will have some way of detecting how many columns are present and a way to target them through the CSS. Zen uses a more complicated way of doing this. It does give it the benefit of being highly configurable. But we are going to keep things simple in this tutorial. I found some simple php code that can be used for this from another theme. Below is our current HTML for our page wrappers.
Here is what the opening of our Content Wrappers looks like. They are located inside of the Page Wrappers.
With this code in place we can target items on the page separately based on wether one or two columns are present. So we can serve up a different background to our Content Wrappers. Below is the related CSS. When targeting the two column view we get the class next to the Page id from the code we inserted above.
Theming Our Top Section
For the Top section of our HTML file we used some default outputted Drupal code for the Search area. We are going to replace that. So, the code will shrink significantly here when replacing our HTML with PHP and Drupal Variables. Below is our HTML.
Lets review the code we are replacing it with. The Top Nav gets replaced with a php if statement. This kind of statement is commonly used for regions. It checks to see if that region is being used and if so it will display that region. We’ll review declaring regions when we discuss our template.php file a little later in this tutorial. The Search HTML is being replaced with a Drupal Variable. When Search is turned on in Drupal it will automatically show up there.
