Drupal Redesign: Themes and Sub-themes

This post is part of a series about our implementation of Drupal during the redesign of www.museumofplay.org and the launch of the Strong. Read the first post here.

Theming is a difficult, sometimes frustrating part of Drupal. There's enough style sheets, .tpl.php files, 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.

The Strong National Museum of Play International Center for the History of Electronic Games
National Toy Hall of Fame Brian Sutton-Smith Library and Archives of Play

American Journal of Play

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):

Stay tuned for a future post about my techniques for building some of these features, like navigation tabs, gradient pattern backgrounds, and overlapping angles.

Comments

Hardy Luke's picture
marcos's picture

Thanks for sharing these drupal themes! You can customize your drupal website by applying these themes. Before downloading these themes, want to know whether these drupal themes and subthemes are compatible with Druapl 6?
http://www.windows8installation.com

Add new comment