Subthemes in Drupal 5.x

As you'll notice, I've finished converting my original Drupal 4.7 theme to 5.x. This is normally trivial but I also took the time to restructure the CSS with a basis on Garland, the new default theme in core. In addition, I also finished something I started long ago: the "network-ization" of the Disobey theme.

What I call "network sites" are many sites that fall under one tent but comprise many different domains or subtopics. These are not portals or collections of services like Yahoo! and Google, but rather content-based; GameSpy's planets are a good example. Disobey has always been, since its beginning in 1997, one of these sites, but I always did an entirely new design for each topic. This scaled badly: as I moved to new technologies or ran out of time, sites languished unconverted or unloved. Nowadays, I'd much rather do something else besides design.

The first iteration of the Disobey theme for Drupal 4.7 shared many characteristics of other network sites: a top navigation item that covered "about us" and other sites within the network, a short header that loudly proclaimed what this was, a highlight area for the most important shoutouts, and a standard two column layout with the sidebar repeating the related sites mentioned in the top navigation. Until now, I never finished making it generic enough for use elsewhere.

This is my base network_wireframe theme:

A wireframe theme for network sites.

I made it blue to mimick the "blue pencil" of desktop publishing: they were used much like the "red ink" of a teacher: for corrections, edits, or revisions of your document. Blue pencils (and pens) didn't photograph and were invisible in the finished item: take the same "you don't see it" as a green (once blue) screen in movies and apply it to paper. The goal of this wireframe is simply to be functional while still representing the structure and model of the finished product.

This is where Drupal's subthemes come in: the Disobey look and feel is the exact same document object model as the wireframe only with a different style.css (which, in turn, references different images and color). For me to make a new theme, it comes down solely to product identity: all the walls are up, but what color paint?

Drupal subthemes are nothing new: Chameleon had Marvin in Drupal 4.7 and 5.x has Garland with Minnelli. Subthemes are born when a theme directory has a subdirectory that contains, at least, a style.css file. There are, however, a number of more general design issues you'll want to keep in mind when creating a subtheme:

  • The master theme should be completed first and have most of the CSS. The subtheme style.css should be simple overrides of what you've already defined.
  • The subtheme's style.css needs to @import the master's style.css. Note, however, that you can't use Drupal 5.x's CSS preprocessor without running into an inheritance bug.
  • The subtheme does NOT get its own template.php. If you need to add code to your subtheme (my use cases are subthemes for taxonomy terms where I'd want to change the site name displayed in the header, or random logos), you'll need to rig the master's template.php to include subtheme PHP files that change $vars and other elements. Not too difficult.
  • While subthemes do support .tpl.php overrides, it is ill-advised. The master theme should really be the master theme: if you start one-shotting subtheme tweaks, you'll just make the master less and less powerful and all your themes more difficult to maintain. Enforce a generic and workable design in the master. If you're working with nodes, use Contemplate to do your specific style changes in the database, not in the filesystem.
  • Put new features in the master and make them optional. If a subtheme needs random logos, make the master theme support it first then add the extra images to your subtheme. Now, all your subthemes support random logos and it's merely a matter of turning it on or off (in my implementation, a master/subtheme/logos directory with more than one file automatically enables the feature).
  • Stick your theme in sites/all/themes so that it's available for all configurations.


network_wireframe.png78.53 KB