Community Documentation

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

Read more

All Documentation

Adding nested regions

<< Back to documentation Home

What do we do?

In this example we will add three regions that are inside the content region. A lot of people ask "How to place region above content zone" or "how to add a content bottom zone". With this technique you can exactly do that.

Code for the .info file

You need to add the regions to your .info file. In this example I've added three regions.

regions[content_top_first] = 'Content Top First'
regions[content_top_second] = 'Content Top Second'

Read more

[to delete] Omega - Responsive HTML5 Base Sub theme. Internet explorer not rendering html5 tag

If you are using internet explorer you will come across some issues while theming omega sub theme.

The reason :
Internet explorer does not process the HTML 5 tags when it finds it.

to delete , posted in issue

Read more

Adding an Adsense Banner ad to Branding Zone

Add a new region called Ad Banner to the Branding Zone so that a Google Adsense banner can be placed to the right of the Site name/logo.

The Branding Region has a width of 4 columns, 0 prefix and suffix, and a Weight of 1.
The Ad Banner Region has a width of 4 columns, 0 prefix and suffix, and a Weight of 2.

These two regions now sit side by side across the 12 column container - no CSS required! Excellent.

Create a Block called Adsense Banner with Full HTML containing your Adsense code and assign it to the Ad Banner region of your theme.

Read more

Adding a Region

Add a zone in

zones[my_new_zone] = My New Zone

Add new regions in

regions[my_new_region_1] = My new region 1
regions[my_new_region_2] = My new region 2

Save this, empty the cache and then go to theme UI and Zones and Regions config.

You will be able to add your zone to a section and your regions to a zone and then config widths etc etc.

Read more

Creating and Setting up a Custom Grid for Omega 3.x

<< Back to documentation Home

What we will achieve (hopefully):
We will be creating an simple non-fluid width grid: (or see the attached Image)
27 Columns
1200 Pixels wide
15 Pixel Gutters
0 Pixel Margins

We will have 2 layouts for the Omega Responsive Grid: Wide (non-fluid) & Mobile.
1) We will not go into how you have to change your CSS files
2) I will not have a RTL (RightToLeft) version.


Read more

Styling Guides and Diagrams of Zones/Regions

The Omega theme itself starts in a hierarchy beginning with #page and then follows with containers, that hold zones, that then hold regions.

Each container and region is named for easy reference.

The CSS is structured like this:





Read more

Tour Omega 3.x's Admin Settings UI & Folder Structure

<< Back to documentation Home

  • Grid Settings
    • Grid System
      • 960
      • Fluid
  • Zone Configuration
    • Header Section
      • User Zone
      • Branding Zone
      • Menu Zone
      • Header Zone
    • Content Section
    Read more

    CSS Weights, Default Loading Order and Overrides

    << Back to documentation Home

    WARNING - IMPORTANT NOTICE: Information in this page is undergoing a MAJOR rewrite. Information in this page is partially incorrect and should not be used for setting up CSS styling strategy, Check back later for the most complete and correct version.

    Read more

    Creating an Omega 3.x Subtheme

    << Back to documentation Home

    This Omega 3.x Doc page is under construction!

    The Non-Drush Method

    Acquiring and Installing Omega into your Drupal Site

    Note: You can also use Omega Tools module which gives you a wizard for creating a subtheme through Drupal's UI.

    Read more

    Omega 3.x Framework Technologies and Components

    << Back to documentation Home

    NOTE: This page is still a work in progress - Markup needs fixing from Markdown syntax to traditional HTML Markup

    When working with Omega 3.x you will come across different technologies and terminologies that are a bit ahead of their time. As a very sophisticated base theme framework, Omega 3.x allows you to create any kind of layout you can think of for any use-case.

    Some examples are:



    Read more
    Subscribe with RSS Syndicate content