Multiple Designs, One Theme to Rule Them All

At inResonance we have built a custom theme solution that essentially takes a single theme and splits it into multiple “designs,” which lets a client choose a certain template that changes the look of their entire site. Each template has its own set of panels, views, and blocks that all automatically load when a design is chosen in the appearance settings. In addition, images such as logos and backgrounds, many various site colors, and even options such as whether a header bar displays are all editable directly in the Drupal interface.

By combining multiple theme templates into a single package instead of creating sub-themes, we have simplified our styling and backend code, and also increased our ability to re-use many of the individual pieces that go into each site. Each template pulls in a set of base SASS files that are common through every design, along with the special individual SASS files that make each design unique. With our system clients also have the ability to choose one theme design for the home page and a completely different one for the internal pages.

Extra customized SASS and template files can be written per-site to give each client their own special look beyond our base theme designs. With our solution it is also quite easy to extend and add new designs without the necessity of creating entirely new themes or sub-themes. Once a panel layout is set up with the blocks and views that are required by a design, all that needs to be added is a directory to the base theme with SASS code for the home page and internal pages.

In this session you will learn how we created our theme solution and how it benefits both themers and site-builders. You will also see how integrating multiple designs into one theme instead of creating sub-themes will simplify theme expansion and customization.

Attendees to this session should have at least an intermediate understanding of Drupal 7 theming.