Omega Theme 3.x Help Documentation

You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

This documentation is now deprecated in favor the Official Omega Project Handbook - please use the handbook.


The Official Omega Documentation Initiative will be conducting its next documentation sprint January 10th, 2012 @ 2pm EST (1400). The event sign-up page is here. We will focus on completing the Delta section, beginning the Context section and possibly creating a FAQ section.


The Official Omega Documentation Initiative is entering its next phase. This 3rd sprint seeks to focus on drafting "intermediate" level documentation and depending on how things go possibly transfer the final drafts to The Handbook


The Second official Omega Doc sprint event has been created: See here for event details


The official Omega documentation sprint is being organized now and will be held October 3rd, 2011 9pm (CST) in #drupal-omega on IRC.

Official Omega Documentation

The 3.x branch of Omega is the recommended version for all use cases. There have been significant changes to the theme settings UI in 3.x. 2.x docs should not be relied upon for specific configuration instruction.
This Wiki will serve as the main index for all 3.x documentation until further notice. Please contribute to the documentation and help us establish and maintain accuracy.
  1. Discover Omega - A Responsive HTML5/960 grid Base Theme
  2. Omega 3.x is a collection of the latest and greatest in today's web design technologies and standards in a user friendly management interface. Start here to find out what technologies are included in the Omega framework. Learn about the framework and the various respective resources before diving in.

  3. Migrating from Omega 2.x to Omega 3.x - What's New in Omega 3.x?
  4. Getting Started With Omega - Alpha or Omega? XHTML or HTML5? - What's right for me?
  5. Learn about the starter kits available in Omega 3.x. Learn how to decide if you should go with the stripped down version of Alpha or the full blown version of Omega. Find out how to determine if you should use HTML5 or the more traditional XHTML for your project.

  6. Creating a Subtheme - How to create your subtheme.
  7. There are two methods of creating omega subthemes. Either via Drush (a module that takes advantage of the command line) or by copying an Omega starterkit and making a few minor edits.

  8. Omega's Admin Settings UI & Folder Structure - The Big Picture
  9. Understanding the Responsive Grid - Using media queries to react to screen size changes.
  10. Whether your site is browsed by a desktop user with a widescreen or an iPhone your Omega theme will recognize the screen size and load the appropriate css using media queries.

  11. CSS Weights, Default Loading Order and Overrides - Learn how all your CSS files stack up.
  12. Responsive Images? - How to make your site images responsive to accommodate your responsive grids.
  13. This Module integrates the Responsive Images library created by Filament Group. the purpose of this library is to load images in different sizes based upon the resolution of the browser loading the page. This allows for mobile-optimized images. This module provides integration with the library and a "Responsive Images" image field formatter where you can select both a small (mobile-optimized) image style as well as a large (for normal screens) image style. The image style configuration options are provided by Drupal core.

  14. Creating and Setting up a Custom Grid for Omega 3.x - Learn How to Change Omega's Default Grid and Create your Own.
  15. Creating custom Panels layouts for Omega 3.x Learn how to add you own custom grid based panels layouts to your Omega subtheme.
  16. Adding nested regions in Omega 3.x Learn how to add nested regions to your Omega subtheme.

Useful Omega Resources:

  • Official Omega

Official Project Page
Microsite w/Omega 2.x Info
Official Omega 2.x Docs

  • Video

Things you should know before getting started with Omega
Excellent Omega 3.x Video Demo by Nathan Lisgo (nlisgo)
Creating a subtheme in Omega 3.x Demo
Omega 3.x Responsive Grid Demo
Jesse Beach briefly discusses Responsive Theming using Omega @ MIT
960 Grid System Screencast by Ted Forbes
Responsive Web Design Nettuts Demo
DrupalCon London Session: Responsive Content: Re-architecting the Basic Page, Render API, etc.
DrupalCon London Session: The Path to a Mobile Drupal: Techniques, Tools and Failure
DrupalCon London Session: Web Typography & Drupal: Putting Arial Out To Pasture (Discussions around Font Embedding in Responsive/Adaptive Theming

  • Audio

Lullabot Drupal Voices 201: Jake Strawn on the Omega Theme

  • Other

Understanding Omega theme (blog w/screenshots)
Omega makes the Digett list of the best HTML5 base themes
Visual representation of CSS in Omega

Useful Responsive Web Design Resources:

Smashing Magazine's Responsive Web Design Techniques, Tools and Design Strategies


Migrating from Omega 2.x to Omega 3.x

zabelc's picture

Is there a supported upgrade path from 2.x to 3.x?

I just allowed my site to upgrade, and now none of my content shows up.

I've invested quite a bit of time in my 2.x sub-theme, and if I have to completely re-do it, then it really makes sense to look at other theme options that are more stable, or at least support transitions between versions.

Hi Zabelc, Did you make a

samwillc's picture

Hi Zabelc,

Did you make a backup of your site and database before upgrading? You could then switch back to Omega 2.x easily, no need to re-do or switch themes. I've never used v2 of Omega so not sure why this would make the content disappear.


Need instructions to upgrade sub-themes

zabelc's picture

I'm sure the content disappeared because my sub-theme was dependent on Omega 2.x, and I had 3.x installed, thus the files were wrong. That's why there needs to be some instructions on what changes one should make to a 2.x sub-theme to upgrade it to 3.x

I rolled my VM back so 2.x is running fine again, but because 2.x is no longer supported, my options are to either upgrade or switch.

The differences between 2.x &

banghouse's picture

The differences between 2.x & 3.x are significant in terms of Omega's essential make-up. The leap in what Omega is capable of in 3.x makes choosing 3.x over 2.x an easy choice. However, the effort it may take to port an existing 2.x theme to 3.x is a decision one will have to make based on reward versus available time/effort.

There is an active and helpful community of Omega users that are available to help in #drupal-omega on IRC. And of course the documentation team would be very pleased to have docs explaining the upgrade process. At the moment none exist. If you are adventurous we could work with you to solve your issue and document the process for others. Feel free to join us in #drupal-omega on IRC.

Please see the official 3.x documentation handbook here:

"Do or do not, there is no try" -- yoda

Need Help with Omega Drupal Header

mqdrupal's picture

I am a rookie Drupaler. All I want either to change the header with a image or just leave it blank.

As soon as I put some contents (Blocks) the header changes to rather ugly dark color. Any hint would be most apreciated.

Onega and Drupal Version in last post

mqdrupal's picture

I am rookie in Drupal/Omega but I have been around in this field for few decades. I realize version number is important which is
Omega 7.x - 3.1.

I have used Mayo theme in several jobs and I have been getting around editing tpl, info, CSS files. I love Omega for its developer or designer control of Grids, responsive but I guess I don't know the structure of the Omega, which I am just getting in.

Please help me to get over this front page header problem. Thanks in advance.