Review: Omega Base Theme for Drupal 7

Review: Omega Base Theme for Drupal 7

Chris Loos's picture

I’m always on the hunt for a better base theme. I stuck with Zen for many a Drupal 6 project, and then switched to Fusion once I learned the ways of the grid. For a recent Drupal 7 project however, I decided to go a new direction and give the Omega base theme a try. I had heard some buzz about the theme at Drupalcon, and the theme’s feature set caught my attention. Amongst the selling points for me:


  • Flexible theme with tons of layout choices
  • Fully HTML5
  • Uses an “Adaptive” Grid
  • Mobile-ready
  • Contextual Layouts (w/ the companion Delta module)
  • Import/export of theme settings (w/ with the Omega Tools module)

So without further ado, on to the review!

Flexibility is a Virtue

Omega uses a three-tiered hierarchy of containers which can be built up to create a variety of layouts. Regions live in zones, and zones live in sections. There are a whopping 23 sections (e.g. header first, content second, sidebar first, etc.), which can be placed in any of 8 zones (e.g. header zone, menu zone, preface zone, etc.), which can placed in any of 3 sections (header, content, footer), in any order.

Its not the simplest system, but its powerful. Add in some options like “Force this region to be rendered” and “Provide full width wrapper around this zone”, and you have the flexibility to create any layout you can dream up. I found myself doing much less mucking around in tpl.php files than I would with another base them.

Welcome to the Grid

Omega uses the now standard 960 grid system, giving you the choice of 12 column, 16 column, and 24 flavors. Like Fusion, it gives you a “grid overlay” debug mode, which displays the grid on top of your theme. It has questionable utility, but it looks cool. I suppose you could use it demonstrate that your sub-theme adheres to the grid, after completion. If you haven’t used a grid before to streamline your development and improve your designs, Omega is a great place to start.

Adapt and Overcome

There are plenty of grid-based base themes, but Omega is the first one to offer what the module author has dubbed an “adaptive grid”. It works like this: You define different display settings. By default Omega comes with settings for “wide”, “normal”, “narrow”, and “mobile”. You specify the window sizes that which these settings to apply to. For example, you could set “normal” to apply to a browser window that’s between 480 and 1024 pixels. You could set “wide” to apply to anything greater than this range, and set “mobile” to anything less than this range.

When viewing the theme, Omega will use a different grid width depending on the current browser window width. Using the example above, a browser window 1000 pixels wide would invoke the normal grid, 960 pixels wide. Stretch your browser window out to 1600 pixels wide, and the wide grid will automatically be invoked, widening the page to 1200 pixels. Shrink your browser window down to 400 pixels wide, and the mobile setting will be invoked, removing the grid entirely and making each block full fluid width, stacked on top of one another for easy mobile scrolling and good visibility.


The same Omega subtheme at 2 different browser widths: normal (left) and mobile (right).

To see it in action is pretty cool. It’s like having the flexibility of a fluid width theme with the certainty of a fixed-width theme.

All the magic happens through css3 media queries. You could achieve the same effect outside of Omega by writing your own media queries, but letting Omega do it for you is much easier.

Its All About Context

There’s a companion module to Omega called Delta, which piggybacks on top of the Context module, and lets you specify different theme settings for different contexts. For example, you could have a left and right sidebar as a default, but then put both sidebars on the right just for the home page. Truth be told, I didn’t have a need for this on the project I used Omega for, but it seems like a great idea. On a project with multiple layouts, I could see this module saving some time I’d otherwise have to spend editing tpl.php files.

I’m an Importer-Exporter.*

Omega has another companion module known as Omega Tools, that has a handy theme settings importer/exporter. This was incredibly useful for my project, as I was able to tweak theme settings, then copy and paste them back into my subtheme’s .info file, essentially making them new defaults. For anyone building a contrib theme based on Omega or using Omega in a distribution, you want this feature…trust me!

Verdict: Great

All in all I found Omega to be flexible, well-organized, and a pleasure to work with. The whole adaptive grid thing is a real innovation, and I’ll be curious where Omega maintainers himerus Jake Strawn, Development Geeks and Sebastian Siemssen take it in future versions of the theme.

One caveat I’ll make in my endorsement is that Omega isn’t the simplest base theme to start with. The extra theme settings, the hierarchy of regions, and the adaptive grid all make for a bit more work. For novice themers, I’d recommend they start with simpler like Zen, which is also a great base theme in its own right. Then give Omega a try when you're ready!

*If you got this reference, you watched too much TV in the 90s.

Comments

Thanks for the review Chris! I'd like to point out that we are planning to make Omega much simpler. Once Omega Tools and Omega itself are in the release-candidate phase I will start building a more visual UI around Omega and especially the region & zone configuration. This will include a drag&drop interface similiar to the Panels Layout builder.

Chris Loos's picture

Thanks for the info Sebastian! I look forward to seeing how the visual UI develops.

I agree with every thing you've stated in this review 100%. It's a great theme that really alleviates many headaches with regards to building around drupal.

What is your feeling about the benefits of a dedicated mobile website versus using Omega to make the website friendly for mobile devices? This is particularly relevant in light of Jakob Nielsen's September 26, 2011 findings (http://www.useit.com/alertbox/mobile-usability.html) that "A dedicated mobile site is a must, and apps get even higher usability scores."

AdaptiveTheme, http://drupal.org/project/adaptivetheme, is the easiest Drupal 7 base theme. It is mobile by responsive web design.

Many popular themes use AdaptiveTheme as a base theme, and are therefore also mobile and responsive design:

http://drupal.org/project/pixture_reloaded

http://drupal.org/project/sky

http://drupal.org/project/corolla

http://drupal.org/project/at-commerce

As I understood, Omega is responsive theme too

I will be waiting for new look of your site with new design/theme. As your said there all many free themes are available for Jrupal, wordpress, Joomla and Magento as well. But Magento is bit faster than drupal so designers look to work for it and wordpress too. But as the situation is changing so, along with other web designer I am also going to get an design experience with drupal.

which theme is the best? some people say fusion, other say adpative and other say omega. Now acquia is using omega. I am using acquia maria in my site http://vision4life.in. easy to maintain. Is responsive and html5 is a must for the future? Ofcourse these days most visitors are using mobile, hence mobile friendly theme is a must. Any of these are more seo friendly?

As a new Drupal user, I decided to go for the "easy" option and build a multilingual site with Omega, while learning CSS at the same time (plus Display Suite and Views). The result is a site which is almost ready, but which I'm not fully in control of - and will ultimately need to be rebuilt from the bottom up, or at least substantially reworked.

So, I agree that Omega definitely isn't a beginner theme. There's just too much to learn in Drupal and I think a beginner would develop a much stronger base on which to build by starting with a simpler theme. In fact, I would even recommend to any beginner to stick with the Drupal Core for your first site.

What would have been nice in Omega:
- Out of the box responsive imaging (AT has it, for example);
- A way to apply a Delta snapshot through Context to a specific window size. For example, on one node I have 3 columns (2 sidebars and the content region). This works on normal and wide but becomes less good for narrow. It would have been nice to have been able to apply a two-column layout for narrow.

Post new comment

About Urban Insight

We create elegant, mobile-friendly websites.
We solve complex problems using Drupal and open source software.
Learn More

Snippet

These svn commands are not particularly version 1.7, but works well with upgrading Drupal modules.

After replacing module folders and when ready to commit the code change to svn repository:

# Remove dropped files

$ svn st | grep '^!' | awk '{print $2}' | xargs svn rm

# Add new files

$ svn st | grep '^?' | awk '{print $2}' | xargs svn add

# To add, this works too (Make sure you are at directory level that has no ignored files; otherwise --force will add ignored files as well)

$ svn add --force .

# Commit

$ svn ci -m "Upgraded a module."

If you are using svn 1.6, overwrite folders instead of replacing to keep hidden .svn folders. Then the command above should work too. There will be no files getting dropped when overwriting.