How (And Why) to Create Nested Sub-Themes in Drupal

One of the best features of the Drupal theme system is the concept of sub-themes, which allow you to inherit a parent theme's style and selectively override design properties. In fact, the top two most popular themes on drupal.org are base themes specifically intended for this purpose. Perhaps the most powerful aspect of this feature is the limitless number of sub-themes you can chain together, all building on (or modifying) their inherited parents.

For my current project, we are distributing a common Drupal-based application to many individual clients, each of which require customized themes. Depending on the specific client, the customizations can be as simple as matching their corporate colors, while for others an almost totally new look-and-feel will be implemented. This application employs advanced client-side features that rely heavily on both semantic HTML and CSS selectors; i.e. we use a lot of jQuery. The challenge is to create a theme structure that maintains important core elements but is flexible enough to support our diverse installations.

To accomplish this, we've implemented a three-theme approach:

Zen > Common > Client

Zen Theme

We start with Zen theme and follow its instructions for setting creating our inherited theme "Common". In general, Zen doesn't require much for configuration - you essentially just drop it into your Drupal installation. The real work lies in the subtheme.

Common Theme

The Common theme is designated, by the .info file, to be a sub-theme to Zen. This theme contains all of the "core" theming choices that we want to make across all clients.

This theme manages:

• CSS for html-reset
• General CSS properties such as font size, weight, style and decoration and display properties such as margins, padding and floats
• Global JavaScript functions such as event handlers, form validations and AJAX/service logic
• Various .tpl files
• Incidental artwork such as icons and background gradients
• Cross-browser compatibility setup, such as IE-specific CSS
• Printer CSS
• Drupal theme hooks, such as hook_theme and pre-process functions

If you were to enable this theme, it would be perfectly functional and visually adequate. Generally, any assigned colors are shades of grayscale, so it's a bit drab, but this theme isn't really intended to be used in production.

Client Theme

This theme designates itself, via the .info file, as a sub-theme to "Common". Here, we apply any customizations that are specific to the client. The trick at this stage is to understand the architectural difference between replacing entire files versus overriding specific elements.

For example, if the Client theme contains a file "page.tpl.php" then Drupal will use this file, in it's entirety, instead of the one in the Common theme. Similarly, any included CSS or JavaScript files will also be overwritten, as long as the file name is exactly the same as the parent theme.

Conversely, you may want to override select items rather than whole files. To accomplish this, you create a file whose name is unique to the sub-theme and code in overrides as desired. For example, each of our Client themes has a file "client_color.css". This file only contains selectors for elements that we wish to override the colors for, and the properties are limited only to colors such as "color", "background-color" and "border-color".

By using this technique, we are able to maintain the Common theme in a universal way (which greatly assists with maintenance and enhancements) while providing a customized experience for each of our clients.