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:
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.cssshould be simple overrides of what you've already defined. - The subtheme's
style.cssneeds to@importthe master'sstyle.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'stemplate.phpto include subtheme PHP files that change$varsand other elements. Not too difficult. - While subthemes do support
.tpl.phpoverrides, 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/logosdirectory with more than one file automatically enables the feature). - Stick your theme in
sites/all/themesso that it's available for all configurations.
| Attachment | Size |
|---|---|
| network_wireframe.png | 78.53 KB |
- 7186 reads

Interesting! Too bad you didn't base your work on Zen... you and jjeff would have been working on the same problem at the same time: http://drupal.org/cvs?commit=53488
I like the blurred background better... much easier to read =)
Yeah, I wasn't really told about Zen until after the day I finished my Garland conversion, and I didn't like the fact that Zen seemed to have a lot of reported issues with various IEs (save for alpha PNG transparencies, disobey's theme works just fine in FF/IE6/IE7/Safari/Konq without the use of browser-specific stylesheets, something I abhor). I did steal some things from Zen though - specifically the body, node, and comment classes (as well as adding a few of my own). As for the @import fix in Zen, I'd like to make a patch to fix both Garland and Chameleon, as well as fixing my own theme.
And yeah, I specifically blurred the background for you. Good news to hear it works.
Post new comment