Posted on 12.16.10

Three-layer theming with Drupal

by Steve Persch

Why three themes are sometimes better than one

We here at Mightybytes always look for ways to make our process better and reuse our knowledge from project to project. Recently this has taken the form of standardizing some of our Drupal theme overrides in a parent theme.

Ok, I can feel like I lost some people there. Perhaps I should back up.

Drupal, like any major content management system, ships with the ability to switch from one theme to another, which allows the same content to take on a new visual aesthetic based on the theme enabled. To see an illustration of this, go to the Drupal 6 theme garden and try changing the theme.

When I started building websites, Drupal or otherwise, I thought of theming as a process of setting column widths, background colors and font sizes. Creating a theme in Drupal does involve these big picture decisions, but the theme system in Drupal also offers incredible fine grain control over chunks of HTML for those willing to roll up their sleeves and dive in to some code when the site being built needs something special.

So now why would you use a cocktail of three themes? Or even two for that matter?

Let’s look at the Zen theme, one of the most commonly used themes in Drupal. The Zen project, whose name is inspired by the classic CSS Zen garden is designed to be a base theme. The creators of this theme recommend using Zen as a starting point for crafting a “sub-theme” that matches whatever visual design you desire. Zen comes with tons of documentation and prewritten CSS designed to make building a column-based layout easy. For consistency at Mightybytes, we’ve started naming this theme specific to the client website, “Zen Specific.” Creative, I know.

Now let’s turn this thing up to 11. Wait, I mean three. The third layer that we often use sits in the middle between Zen and Zen Specific. We call it “Zen Mid.” We’re really good at naming themes. Zen Mid is there to shave off a few minutes in the time it takes to build each new Zen Specific for a client by providing some common tasks. Zen Specific still holds all the fun stuff: the colors, the font choices, and the crazy Views template override that a given site needs only under conditions X, Y and Zontar.

Zen Mid is the boring theme. Like Zen, it looks plain when it’s enabled on its own. Zen Mid does the repetitive theming tasks that I noticed myself doing on every site. I really like to have a bunch of classes in the BODY tag when writing CSS, so Zen Mid throws in a bunch of classes using a preprocess function. I also noticed that with a lot of sites, I would have a CCK fieldset with no values on some nodes. So Zen Mid overrides theme_fieldset to check if there’s actually anything in the fieldset. If there are no children, zen_mid_fieldset returns a blank string instead of an empty FIELDSET tag.

Sure, there may come a site for which a given theme function override or template override in Zen Mid is unwanted. If this ever happens I could just override it again in Zen Specific. Zen Specific is still where the vast majority of the theming tasks occur. However, I suspect that as I work on more and more Drupal sites with our HTML/CSS specialist, Tai, we’ll find additional overrides and simplifications to drop into Zen Mid.

I was made aware that this three layer approach was possible when listening to Lullabot podcast a year or two ago. One of the guests was a designer who wanted cleaner markup. So he took this same approach and used a middle layer to strip out unwanted markup. Ten points if anyone knows what episode of the podcast this was and the themer’s name. I couldn’t find it.

If this approach appeals to you, it’s pretty easy to do. Zen Mid is a child theme of Zen like any other sub-theme. Zen Specific is then a child of Zen Mid.

I’ve decided not to include the code I have for these themes as I think that would be irresponsible. While I advocate three-layer theming as a process, I do not feel my particular middle layer is sufficiently robust for public consumption at this point.

 
• If you’re looking for a community reviewed Zen sub-theme, d.o has your back
 
• The mechanics of sub-themes
 
• The Zen package also has a ton of documentation on sub-themes.
 
• A guide to implementing this three-layer approach: Sub-themes of sub-themes

What else do you want, a cupcake? Well good. Because we decided to bake in this concept a little deeper with a cupcake metaphor. Click below for the full-size image.