Creating Page Layouts with Omega Theme

Posted: July 1, 2012 under Drupal

Today I'm going to show you something really cool. If you follow what's going on with Drupal, you've no doubt heard about Omega theme. But maybe you haven't heard about its companion module, Delta. When used in conjunction with the Context module, Delta provides a simple, yet powerful templating system.

I'm going to walk through setting up a Delta page template in this post, so if you want to follow along make sure you have an Omega sub-theme installed. The link above will explain how if you need assistance. You'll also need to have the Delta, cToolsand Context modules installed.

Once you have everything set up, select 'Appearance' on the admin menu and when the page loads you'll notice you have a new tab for Delta.

Omega theme appearance settings

Click on this tab. What you'll see next is where your Delta templates will be listed. Let's get the ball rolling by creating a new Delta template. Click '+ Add' at the upper left of this page. We'll use this new template to provide a unique layout for the Article content type.

Add delta template to Omega theme

OK, a couple quick things about the screen which you see above. You'll note that you can add a Delta template to more themes than just Omega, so if you're using another theme that has some nice layout options, you could still potentially use the Delta/Context combination. I haven't tried it, but if anyone reading this has, I'd love to hear how it worked out.

But what you want to do if you're following this walkthough, is make sure your Omega sub-theme is selected. You may be able to see in the screenshot above that Omega is selected. That isn't correct. What happens is that all the themes you have installed are listed in alphabetical order and the first one is selected by default (in my case, Omega). 

Once you have the correct theme selected, take a look under 'Operation mode'. For now we'll stick with the default setting, but if you run into any errors after saving the template, come back here and set this to 'Override all values'. A few people have reported hitting a snag when saving a Delta template, but changing the operation mode should clear things up.

Delta template list

In the above screenshot you'll see the template I created. I named it 'Article' because we're going to apply this template to all nodes of the Article content type. Next we'll click 'Configure' and make a few changes.

Delta template configuration

If you're familiar with Omega theme you'll notice that this is a copy of the Omega theme settings. That's really all that's going on here. You make a copy of the base settings and change them to your liking and then apply those settings to a certain context, hence the term, 'contextualized layouts'. Where this really comes in handy is when you change the zone and region settings, which I'll do in a moment.

But before we get too far along, make sure that your base Omega settings are complete before creating any Delta templates. This is because once a Delta template is created, additional changes to the base settings do not carry over. The settings branch off from the time you create the template.

Zone and region configuration in Omega theme

The screenshot above shows the zone and region configuration tab. I'm editing the User Zone which is the very top zone of an Omega page template. Each zone has regions and in this instance we see there are two: User Bar First and User Bar Second. Let's say that what I'd like is one large region at the top of the page where I can place a full width banner for each article. With Omega, this is a snap. All you do is adjust the width of one of the regions so that it extends across the page (12 columns by default) and then set the second region to not display at all by selecting 'None' under the 'Zone' setting for the region. 

If you now save the page and go check out one of your articles, you may be disappointed to find that nothing much has changed. That's because we have one last step to perform, adding a context. Go to Structure > Context and then click '+ Add'.

Add context to a Delta template

Give your new context a name and under 'Conditions' select 'Node type' and be sure you check the box for the Article content type. In the 'Reactions' section select 'Delta'. If you've been following along there will only be one choice available, in this case, 'Article'. Select it and save.

Now if you go take a look at an article, you'll notice you have a region that extends all the way across the page.

Hopefully I've demonstrated that the Delta/Context combo provides a very simple interface for creating all sorts of layouts that can be applied to not only content types, but also paths, specific users and much more. Now I know there are some of you reading this that don't like graphical user interfaces for this type of thing. You like to handle this in code.

I understand this point of view, but I've had clients who were fairly inexperienced with Drupal and they were able to create layouts using these tools without calling me for support. This is a good thing. It further empowers non-technical or semi-technical users to manage their sites. A practical example I can offer is having someone in the marketing department create a landing page template for an ad campaign. In a few minutes, they're placing copy instead of waiting for someone to reply to an email request for help. Empowering users, whenever possible, is the right way to go and the Omega, Delta and Context combination is a great tool set for doing just that.

One Final Note...

In the comments of my last post on Drupal base themes, Joel Moore shared some information on the future of Delta in Omega version 4.x. Basically Delta is going to be rolled into Omega theme and the dependency on Context will be eliminated. For backwards compatibility a Drush script will be available to convert all 3.x templates to the new version. If anyone has more information on the upcoming changes in Omega 4.x, or any experiences with Delta or Omega theme generally, I'd love to hear about it.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.