Easy Page Layouts with Omega Theme

Posted: February 17, 2013 under Drupal

Although there are many cool things about the Omega base theme, having the ability to create unique page layouts in the browser is certainly one of the coolest, particularly if you're not a theme developer.

In this tutorial we'll walk through the steps of creating a unique front page layout for a test website. After we're done, you'll be able to use the concepts we cover to create pretty much any page layouts you can think of. You'll then be able to apply your layouts to single pages, content types, user roles and more.

Getting Started

We're going to begin with a basic install of Friendly Machine's Atlas One theme. The screenshot below shows us what we're starting off with.

Omega theme page layouts

What we're going to do with this layout is change the content area from a two column layout to one that uses three. The first step will be to create a new Delta template.

Delta is a companion module for Omega theme and it allows you to create different versions of your theme settings. With a little help from the Context module, you can then apply your Delta templates to a page, content type or some other condition, giving you the ability to customize pages on your site. 

Assuming you have everything installed, you can find the Delta settings at: 

http://yoursite.com/admin/appearance/delta. 

If you don't have Omega installed and want a quick way to get everything set up, use our Omega installation profile (download is at the bottom).

You'll notice in the screenshot below that there aren't any templates yet defined. This means that all pages are currently using the default theme settings for Atlas One. Let's change this by clicking the add template link.

New delta template

You'll next see the form below that will prompt you for some information about the new template. The fields are pretty straightforward but you'll notice that I've checked "Override all values" under Operation mode at the bottom. I've found that using "Only override different values" can be glitchy at times, so I avoid using it. 

new delta template form

After you save the form you'll be directed back to the the main Delta page where you should see your new template. Click the "Configure" link to the right of the template name to move on to the next step.

Zone and Region Configuration

Once you have the configuration page opened up, click on the "Zone and region configuration" tab on the left to expose the settings we want to change. If you're not using a Friendly Machine theme, what you're going to see on this page will be slightly different.

For example, the zone at the very top of the page will say "User Zone" in a default Omega sub-theme. That didn't seem very intuitive to me so I changed that to "Top Zone" in Atlas One, but the slight naming differences shouldn't throw you off too much. All of the concepts that follow are the same, regardless of the zone names. So let's take a look at a screenshot to see what we have.

Zone and region configuration

Omega Theme Terminology

Now would be a good time to cover some of the terminology used in Omega theme. You'll notice the page above has areas labeled Sections and Zones. We'll see in a moment that the Zones also contain what are called Regions.

This naming convention sometimes confuses those who are new to Omega theme, but a good way to understand the terms is simply names for boxes of different sizes. The bigger boxes contain the smaller boxes. Sections contain zones which in turn contain regions.

Configuring Regions

The first thing we're going to do is work with the regions inside the content zone. Click on the "Content Zone" tab, then expand all the sub-tabs and you will see something similar to the image below.

Omega theme content region settings

At the top you'll see the configuration settings for the zone. For this tutorial we're only going to discuss the bottom select lists. Let's start with the first one, "Section". You'll note that it is set to "Content", but you could easily change that. For example, you could move the entire Content zone into the Footer section if you wanted to.

This a key concept with Omega theme. All of the zones and the regions they contain can be moved to other parts of the page or even removed from the display entirely. This makes the naming of the regions and zones very arbitrary.

For example, does it make sense to have the Content zone in the Footer section? Maybe not in the sense that we usually think of those labels, but you may have a really good reason for creating a layout that does exactly that.

My point here is to not get too hung up on the zone and region names. Once you start moving them around it may start to sound weird, but the trade off is tremendous flexibility in creating your page layouts.

The last Content zone setting I'll mention is "Column count". By default this is set to 12 in Omega theme, but you'll note that in Atlas One I've changed this to 24. I'll keep this simple by saying the more columns you have, the more options you have regarding the width of your regions and the spaces between them. We'll see a good example of this below.

Adding or Removing a Region

If you'll take another look at the screenshot above, you'll notice that there are two regions in the Content zone - the main Content region and Sidebar Second. By default, Omega will also have Sidebar First included, but in Atlas One it's been removed.

In this tutorial we're putting it back, but if you are using a default implementation of Omega, just reverse the steps to remove it from your layout. Take a look at the image below.

Adding sidebar first to omega template

In the "Unassigned Regions", find the Sidebar First region and expand it. Next, we'll set the zone to "Content" and the weight to 0 so that it will show up on the left hand side of the page (the other regions have higher weight values). We'll also set the width to 7 columns and set the suffix to 1 column. The prefix and suffix settings simply add space either before or after the region, providing more control over the layout.

But we're not quite done yet. If we were to try to save it right now we would get an error because the Content zone is 24 columns across and all the regions added together - including prefixes and suffixes - can't exceed 24 columns. We'll have to go up and adjust our other two content regions to get the total columns equal to 24.

Adjusting content zone widths

You see in the screenshot above that I've adjusted the widths of the other two regions so that everything will fit. We will have two sidebars that will be 7 columns wide and a main content area that is 8 columns in width along with a one column suffix on each of the first two regions (Sidebar First and Content) to provide a little breathing room. That's 7+7+8+1+1 = 24 columns.

We should be set, let's save the configuration.

Setting the Template Context

We have one final step to complete before we will see our template applied to our front page. We need to add the context. If you're using a Friendly Machine theme or our Omega starter, the Context module will already be installed. If you're using another set up, grab the module and install it for the next step.

Before we actually set our context, let's talk briefly about the term "context" because it sometimes confuses people. It's one of those nerdy Drupal words like "node" that often leaves people who are new to Drupal lost in the dark. It's actually really simple, though. A context is just a way of saying to Drupal, "When you come across this condition, please perform this action". You'll see more of what I'm talking about in the example below.

To set our context, we'll go to Structure > Context and click the link on that page to add a new context.

Setting the context

In the screenshot above I've filled out the form so that the when the path is the front page, the Delta template we created will be applied. If you're following along, you can see there are quite a few conditions on that select list. We could have applied our template not only to a certain path, but to various node types or even for users of a certain role - like admins, for example. Lots of options here and it's a good opportunity to get creative.

You can also see that despite some weird terminology like "Reactions", all we are doing is saying, "Drupal, when you display the front page, please use the Delta template called front."

Now let's save this thing and see what we've got.

Atlas One with left sidebar

Looks like we have our new sidebar! Not too shabby.

By default, Atlas One will place the user login form into the Sidebar First region and this is only visible when you aren't logged in. You can either logout or put a test block into the region so it will be visible.

That's an important point to keep in mind about regions. They can be enabled and available to use, but if there isn't any content in it, you won't see anything unless you have checked the "Force this region to be rendered" option.

One Last Thing...

Whew! That was kind of a long tutorial, wasn't it? Hopefully you see how powerful the combination of Omega, Delta and Context can be. It's some really great stuff.

If you're new to Drupal or Omega theme, I encourage you to check out the installation profile I mentioned earlier in the tutorial. Better yet, try one of our packaged themes as they are all built on a mighty Omega base and are a great way to get a responsive Drupal site up in running in a hurry.

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.