About Drupal Subthemes

Situation: You found a great new theme for your Drupal-based blog or Web site. You give it a whirl and it looks awesome, but it needs a few tweaks before it really becomes your own. Since the tweaks you’ve got in mind are so minor, you open up the style.css in vim, pull up Firebug, and start hacking in your edits.

Problem: The main problem with this method comes later, when you want to upgrade to a newer version of the theme.  That’s what happened to me today. I was poking around my site and noticed that a newer version of the Nitobe theme was just released. It was a beta at the time I installed and customized it, so while nothing was broken I decided to go ahead and update it. While identifying and migrating my minor css changes over to the new style sheet wouldn’t really present much of a problem–Beyond Compare makes pretty quick work of diffs and merges for me–it did seem terribly inefficient.

Solution: If you’re fortunate enough to be on Drupal 6 or later, sub-themes solve this problem handily.

My quest for “a better way” led me to the Drupal 6 Theme Guide, where I read up on sub-themes, a new feature in Drupal 6 that makes it very easy to extend existing themes without mucking up the original code.

To create a sub-theme, you simple create a new folder in your themes directory. In the folder you create a .info file containing basic info about your sub-theme, plus information for any additional styles sheets you want to define. Here’s my subtheme.info:

name = sam.charrington.com
description = A customized Nitobe subtheme for sam.charrington.com.
screenshot = screenshot.png
base theme = nitobe
core = 6.x
stylesheets[screen][] = my_styles.css

That last bit, about the style sheets, is the key. Because Drupal adds your sub-theme’s style sheets last, you get to take advantage of the cascade and override any styles you want to tweak. Just copy the target selectors from the original .css file into a new “override” file that you put in the sub-theme directory and make your edits there.

The end result is, ideally, a clean and easy separation between your style updates and the original theme. I say ideally because in my case I needed to make one other change so that Nitobe’s rotating header images would pick up from a directory in my sub theme. Details and patch here, for the interested.