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

ram14's picture

Year 2013 has been quite eventful. SRSG also witnessed events and evolved in terms of business verticals, technologies, people and processes.
Apple product reseller in Kolkata
Audio mixers dealers
Digital Asset Management solution
ipad dealers in Mumbai

hotels and resort's picture

If you are a business class executive who cannot do without business desk facilities in their hotel can also get convenient accommodation in this area. There are some hotels offering internet and communication facilities too beside television, air-conditions, and other basic amenities. http://www.hotelsandresort.com/

hotels and resort's picture

Business communication has evolved greatly throughout centuries and continues to change at fast speeds. Relaying messages in a professional setting are vital to the production and life of an organization. Business communication plays a role in day-to-day activities at work, business trends may be observed, and message types may vary as a result from business communication trends. http://www.afterbusinesscommunity.com/

hotels and resort's picture

In general, everything diminishes with age. Both the pharmacodynamic as well as the pharmacokinetic character changes with time. With aging inherent variability in physiologic differences becomes accentuated. Pharmacodynamic responses are blunted, ability to eliminate drugs is diminished and sensitivity to the toxic effects of drugs is increased. http://www.dlshealthcareconsulting.com/

hotels and resort's picture

That is a code that really should be noted by any man or lady who is thinking about selling the a few of the light-weight plastic boards from Australia. He or she ought to set aside time to check out pertaining to the most effective and worst places to sell penny skateboards. http://www.parkpenny.com/

Add new comment