Working with Drupal Themes Pt. 1

UPDATE: I’ve published 5 articles on theming with Drupal. This one is the first (thus the pt.1). Here’s the links to the others:

• Working with Drupal Themes Pt.2
• Working with Drupal Themes Pt.3
• Working with Drupal Themes Pt.4
• Working with Drupal Themes Pt. 5

Continuing my learning experience with Drupal, the next thing up is themes and how to create custom ones. In general I’m not a huge fan of any of the themes I see on drupal. org. They all look pretty similar and boring – similar complaints are true of most of these systems like Joomla, Plone, and Drupal.

As with these other systems, Drupal has a pretty standardized system of themes. Its a bit more confusing since Drupal’s theme concepts have changed more, but they do have some decent documentation. I’m going to focus only on the “newer” PHPTemplate stuff since I’m using the latest and greatest Drupal stuff.

Now that I got you to click into the post, let me be clear. This is not a theming tutorial. Other people do fantastic job at this…so google it and go to them. If you need help with that try this one. What I’m doing is posting my perspective on how to get a theme to work. Perhaps this will help you, perhaps it won’t, but I find getting multiple perspectives really helpful when I’m stuck or looking for new ideas.

The basic layout of a Drupal site is determined by configuration information stored in the “.engines” file. This file by default is stored in the engines directory you are using – in this case PHPTemplate. If you look in this file you can see some info on the sections and options in the theme. After you’re done taking a look at this get out…and don’t save anything.

Your best bet at this point is to start reading this guide. From this point on I’m going to just assume you’re doing this. The first thing I did was go out, troll around, pull down a few themes, and installed. Just download a few from drupal.org, exstract them and drop them in the themes folder. Right off there is a lot of inconsistency around these themes. Weird stuff happens that really shouldn’t. For example some themes don’t work with FCK; some do. Some themes won’t display certain modules like links modules no matter what you try – I suspect that this is because some file in the theme is overriding the settings in the engine, but I have not yet gotten that far…

Finally I stumbled on the “zen” theme. This seems to be a “recommended” theme to use as a starter theme. I grabbed that one renamed it and then installed it in my site as a good starter for my own first skin.

Before I go on – you should get Firefox and Firebug. These are incredibly helpful tools for building themes with heavy CSS and includes.

Check out the screen capture below double click it for fullsize:

As I hover over the “what the heck” title with Firebug open, the section of HTML will be displayed along with the CSS tags that are impacting formatting and placement. This allows me to easily see how to make changes to CSS. This is really helpful for quickly getting a handle on how the styles work and then how to fix issues and make adjustments. You can even change the styles in firebug’s window and see the changes dynamically in the browser window. They won’t save, but you can’t have it all baby! 🙂

The first thing I tried to do was replace the logo. There’s a file called “logo.png” in the zen theme directory…try replacing it and hit reload. You should see you new image. Not bad! Now using Firebug inspect it. You’ll see that the CSS for the logo is defined in zen.css and if you change the CSS you should see the changes when you hit reload. Nice!

The next thing I wanted to do was add some footer text. I created a file called footer.tpl.php in m theme directory, but it would not display anywhere. I looked at the previously mentioned guide and it said I would need to hit the “refresh” button. I couldn’t find that button! What I learned (other than there’s no such button!) is that the footer is not handled this way. You either change this under admin/settings or you edit the “page.tpl.php” directly to change the footer. I think another alternative is to create a new block type and define this in your engine file or in a new engine file in your theme directory. I’ll go with the admin/settings page.

Time for a break – if this is interesting to you stay tuned…I’ll write some more later and then come back and re-vamp the series into a cohesive whole. Let me know if you’re a drupal god and I’m an idiot on some point…