Drupal Redesign: Themes and Sub-themes
Theming is a difficult, sometimes frustrating part of Drupal. There's enough style sheets,
hook_preprocess functions, and inheritance and overriding going on to make your head spin. The Zen theme even has an issue addressing a IE limitation of 31 style sheets. (How many style sheets do you need??) For the Strong, this was definitely a "fun" and unique challenge that involved a lot of problem solving.
First up was building the HTML. We worked with Lichtenstein + Associates to create the site design for the Strong and its 5 Play Partners. The 17 design comps were translated into HTML templates. From there was the task of converting the HTML templates to a Drupal theme.
This was no simple task. We have a whopping 6 websites, and they have many common features.
As you can see from the screenshots, the basic page structure, the tabs styles, the left sidebar, header, and footers are all very similar. Rather than repeating my work 6 times (and having to change 6 themes if I made a revision), I explored Drupal's sub-theming system.
Sub-theming is an incredibly powerful system. You can specify one theme as a base theme, and other themes as sub-themes of the base theme. The sub-themes inherit all the functions, templates, and styles of the base theme, which can then be customized and overrided per theme.
This was a perfect fit for the Strong. The Strong is the base theme, and the other play partner sites are sub-themes of the Strong theme. I started with the fantastic Zen project. I could have made the Strong a sub-theme of Zen, but multiple inheritance made me uncomfortable. (It is possible, though.) So, I made the Strong theme a copy of Zen 6-x.2-x, and modified accordingly. It seemed cleaner that way, especially with a lot of
hook_preprocess_*() stuff going on.
thestrong/style.css was the big honkin' style sheet, which is inherited by every theme, as well as
html-elements.css and some others. This included the basic page structure. Each site has its own overrides, and they sit in its own style sheet. For example
thestrong/thestrong.css has customizations unique to the Strong. I tried to select the features that were most common, and make them the default.
So, in the end, the structure of the themes was thusly (roughly):
thestrong / style.css- all styles and defaults
thestrong / thestrong.css- The Strong customizations
nmop / nmop.css- National Museum of Play customizations
icheg / icheg.css- ICHEG customizations
nthof / nthof.css- National Toy Hall of Fame customizations
library / library.css- Library and Archives customizations
ajop / ajop.css- American Journal of Play customizations
Stay tuned for a future post about my techniques for building some of these features, like navigation tabs, gradient pattern backgrounds, and overlapping angles.