Understanding Omega Theme

Posted: April 30, 2013 under Drupal

When it comes to Drupal, Omega theme is hard to beat for building a responsive, mobile-friendly website. It has powerful GUI configuration tools that make it very appealing to those who don't want to mess about with code. Omega theme has taken care of the messy bits and all that's left for you is to tinker with the settings. In this post we'll go over some of the most important of these configuration settings.

I should also note that in this series of lessons we're not going to discuss creating an Omega sub-theme from scratch. For that I'll refer you to this nice little tutorial on Drupal.org. Instead, we'll do a walk-through of the settings and then finish up by talking about Omega's companion modules, which can help take your responsive site building to the next level.

If you're completely new to the topic of responsive design, you may want to read this post before continuing. It's a couple years old, but the information is still relevant and will help explain the basic ideas behind responsive design and what Omega theme is doing behind the scenes.

Update:
This article discusses Omega 3. The latest version - Omega 4 - has recently been deemed production ready and I've written a new post that will bring you up to speed on all the big changes.

Omega Theme Grid Settings

Let's begin with the grid settings, one of the most useful tools that Omega theme provides. Take a look at the screenshot below to view the settings for our example site.

Omega theme grid settings.

As you may recall, this tutorial series is using our Omega sub-theme, Foundation, so the settings above are the grid configuration for that and differ somewhat from Omega defaults. I've uploaded an image of the default grid settings as a reference, but we'll walk through these one at a time and explain what's happening so you can modify your site as you see fit. 

You'll notice the first setting is Enable the responsive grid. This setting is checked by default, which makes sense considering Omega is a responsive theme, but why would this setting be included at all?

One situation where this may come in handy is if you begin with a responsive site and later decide you'd instead prefer to serve your mobile users a separate site, which can be a good choice if you have the resources to pull it off. So by unchecking this box, you disable Omega's responsive features which instantly turns your theme into an old-fashioned fixed width website.

 

The next setting, Allow customizing viewport meta properties on iOS and Android devices, toggles the Viewport settings that you see immediately below that checkbox. By default, all of these settings are set to 1.0 and are not scalable by the user. These aren't good defaults, in my opinion, because they take away too much control from the person viewing your site. 

For example, by not checking Scalable by user, people browsing your site on a mobile won't be able to pinch to zoom. Pretty frustrating if they can't easily read your text or want to get a closer look at an image! Furthermore, the default for Maximum scale is 1.0, which provides the same end result - no pinch to zoom. My advice is to instead use something like the settings above so that your users will have a better experience on your site.

Default Layout Settings

These settings are a bit technical. Basically they set the maximum width of your grid and determine your breakpoints (at what width your sidebar moves under the main content, for example) and how your grid will flow when it's scaled up or down.

You'll notice that Foundation uses two of these settings and has the other two disabled. We'll start with the first setting, Fluid Layout. This activates Omega's fluid layout, which makes the site truly responsive instead of providing Omega's default adaptive layout (here's a nice post that explains the difference between the two).

Also in this setting you'll find the following media query:

all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)

This bit tells Omega at what width it should change the layout. Essentially this is about reordering the regions on the page so that they look better at different screen widths. I've chosen this particular setting so that the sidebar slides under the main content on tablets. By default, Omega doesn't do this (at least not for an iPad), which often leaves the sidebar content looking cramped.

The next setting I'm using is for the Wide Layout. Notice the media query I'm using:

all and (min-width: 1240px)

This sets the maximum width of my page. You could increase this, but in the case of Foundation it probably wouldn't be a good idea because the content area would get so wide that the text would become more difficult to read (here's why).

My advice regarding these settings is to just play around a bit and see what they do. Don't be surprised if you get some weird results! That said, being able to modify these settings in the browser is a really awesome feature of Omega.

Zone and Region Configuration

The next group of settings we're going to look at are for the Zone and region configuration. Take a look at the screenshot below to see what we've got.

Zone and region configuration settings.

You'll notice that we have the settings for the Content zone expanded. What these settings allow you to do is control the width of the various regions on the page, change the number of columns used by the grid and determine where on the page a region will be placed.

I've written another post that discusses how you can use these settings to create custom page layouts, but suffice it to say, things can get really weird here. For example, you could move one of the header regions into the footer. You can even make regions disappear entirely!

These settings are really cool and really powerful, but you can also do some things that may later turn out to be confusing as hell. My advice here is to keep it simple and adhere to conventions as much as possible.

The Omega Theme Stack

As most of the remaining settings involve toggling various styles and page elements, I'm going to leave you to explore those at your leisure and move on to discuss some modules that can be of help when working with Omega theme. These modules are authored by the same team (led by Jake Strawn) that is behind Omega.

We'll start with two that work together to help you create unique page templates for any page on your site.

Delta and Context

These two modules work together to help you create unique templates for single pages, entire content types and a wide variety of other scenarios. The tutorial I pointed to earlier demostrates how to do this, and although these modules aren't essential, I do consider them extremely useful, particularly if you're not comfortable coding your own templates. Even if you're an A+ coder, these two are potentially going to be a time saver for you.

Delta Blocks

This module is actually a sub-module within Delta (Go to your modules and look under 'Theme tools' to see them all). It can also help with your page layouts, but instead of creating page templates, it converts page elements into blocks, allowing you to move them around your site. You can do things like move your logo or breadcrumbs into a new region, which is very cool, but also has the potential to get crazy if you're not careful.

Omega Tools

So you've made some changes to your theme settings, but at this point they're all stored in the database. What if you want to move your theme to another site? This is where Omega Tools comes in. It can take your custom theme settings and write them to the .INFO file, allowing you to move your theme without potentially losing hours worh of work.

This module also has the ability to revert your theme settings if you've made a big mess of things and just want to start over. 

The Wrap

So, there's a lot going on with Omega theme, huh? Don't feel overwhelmed. One of the reasons we're using the Foundation theme/installation profile is so that you can digest things in bite-sized chunks and learn from examples.

Play around a bit with the settings and see what sort of interesting changes you can come up with. In our next lesson we'll finally get our hands dirty and start customizing one of our content types - very useful and lots of fun!

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.