Code-Free Layout Tools for Theming Drupal

For as long as I've been working with Drupal, there's been a wonderful tension on how to make Drupal not look like Drupal. People have taken great pride in being able to recognize a Drupal site both from the rendered page in a browser, and by looking at the code. How frustrating for graphic designers who want to create an experience, not just decorate Drupal! With a greater understanding of the contributed module space, it becomes infinitely easier to make Drupal look like your solution, instead of making your solution look like Drupal.

Each major revision of Drupal has seen a new point-and-click tool introduced into the contrib space. In Drupal 5 we got Panels. In Drupal 6 we got Display Suite and in Drupal 7 we got Omega. It's been fascinating to watch the evolution of our layout tool kit…and frustrating for new-to-Drupalers to know which one to pick. If we oversimplify what these UI-based layout tools do, we can divide the tools out as follows:

1. Breaking down and altering the node.tpl.php file (e.g. Display Suite).
2. Breaking down and altering the page.tpl.php file (e.g. Omega and Context ).
3. Building up new layouts by pulling in specified Drupal components at the page or region level (e.g. Panels).

As you can see, the approaches are somewhat complementary, except when they're not. This can make it difficult to know which suite of modules (and themes) you should choose for your particular project. I'm an early adopter of Panels. I know it. I love it. (I helped write the D6 book on it.) And I'm delighted to see some of the concepts developed in Panels going into Drupal 8. BUT! I also know it's not the right tool for every site builder and themer. So where do you start?

Display Suite

First up: Display Suite. This is a beautiful little module. It fits politely into Drupal's existing administrative interface for managing content type fields. The very first time I installed Display Suite I used it to break my Blog display into the classic two column WordPress display: one side for the content, and one side with the date. It was a little bit revolutionary for me that I could just click a few things and never have to open a text editor to make a two-col layout. Yum!

I also feel in love with Drupal's built-in View Modes after playing with Display Suite. Instead of perverting Views I was able to get fine grained control of my nodes through Display Suite. (Don't pretend like you haven't used Views to "fix" the Default layout of your content type. We've all done it at least once.) If it sounds like the breath of fresh air you've been looking for, check out our free video series on using Display Suite.

Panels

Next up: Panels. I won't lie, there's a learning curve associated with this very powerful module. If you just want to shuffle some fields around in your content type display, this is not the module for you. You should use Panels, however, when you need to: display a block in multiple locations for different contexts; alter the layout of core Drupal pages, such as the taxonomy page; or provide different layouts under different conditions, such as the homepage for an authenticated or anonymous visitor. Yes, bits and pieces of these elements can also be found in other modules, such as Context (we'll get to that in a minute), but in most other cases you are spread across multiple configuration screens, instead of having a single control interface. Before rushing out to install Panels, take a look at our free video series on using Panels by the TWIG initiative lead, Jen Lampton. I hope that you end up loving Panels as much as I do, but we can still be friends if you decide it's overkill for your needs.

Omega

Finally we come to my nemesis, the base theme Omega. Ages ago I recorded a little video of myself unpacking Omega for the first time. Back then it was hard to use, undocumented, and very frustrating for anyone who was used to doing things "The Drupal Way". The video (shouldn't) exist any more because Omega has grown up a lot. It's become easier to use, and very well loved by a lot of Drupalers.

The 3.x branch of Omega was essentially its own theming system. Where most themes encourage you to take a series of Regions and sub-divide them using Blocks, Omega goes the other way, allowing you to collect Regions into Zones and Sections. Omega, as far as I know, was the first theme to integrate with CTools, allowing you to export your point-and-clicked theme settings to code. We cover both of these features in our video series Introduction to Omega 3.x. Watching the videos is a great way to explore Omega without the commitment. (And if someone else has already committed you to Omega, the videos are a great way to get up to speed.)

Be careful though! The Omega 4.x series takes OUT the pointy-clicky tools and puts them back in code, so make sure you're grabbing the right version when you download the theme. Or, if you want to move forward the the latest-and-greatest version of Omega, consider combining it with Panels for your layout. The base theme offers good integration with my favorite layout module.

So there you have it: three different approaches to altering the layout of your Drupal site. With these three powerhouse tools there's no reason for your Drupal sites to ever look Drupally again.