Last updated 20 June 2012. Created on 20 June 2012.
Edited by eubielicious. Log in to edit this page.

When you approach the task of theming a new Omega subtheme, it's worth bearing in mind the variety of classes and IDs that are built in to the Omega structure.

Taking the content section which in this case contains a content region which takes up 8 columns of grid width, and a sidebar region which takes up the remaining 4 columns, you can see a nested structure:

  • section with id of "section-content" and classes of "section" and "section-content"
    • div with id of "zone-content-wrapper" and classes of "zone-wrapper", "zone-content-wrapper" and "clearfix" (this div only exists if the zone is configured to have a full width wrapper)
      • div with id of "zone-content" and classes of "zone", "zone-content", "clearfix" and "container-12"
        • div with id of "region-content" and classes of "grid-8", "region" and "region-content"
          • div with classes of "region-inner" and "region-content-inner"
        • div with id of "region-sidebar" and classes of "grid-4", "region" and "region-sidebar"
          • div with classes of "region-inner" and "region-sidebar-inner"

Here is an image showing this structure:

Structure of blocks in content section

There is a general pattern that can be used:

Sections contain zones contain regions contain blocks, and as you'll see in this image, the pattern is visible:

General Omega class and ID structure

In this <st> stands for the section title, <zt> stands for the zone title, <rt> stands for the region title and <bn> is the block name - all of these are machine names as in the theme's .info file. Also where you see grid-<x> this is where the width of a region is specified.

Note that the zone wrapper will only appear if you have specified that the zone is to have a full width wrapper. This can be useful if you want to use a background colour or repeating background image which is intended to fill the complete width of the screen.

Knowing this structure is very helpful when you are looking to target specific styles towards particular sections of your page.

AttachmentSize
general-structure.png33.04 KB
omega-content.png27.02 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Jean-Eric’s picture

Since elements with IDs are supposed to be unique - and actually are for sections/zones/regions.
So, getting rid of the homonymous classes would help making the markup lighter...

vinoth.3v’s picture

Create it for Omega 4

Vinoth - வினோத்

HiveMadeThis’s picture

How does one change the font color? For example, if I wanted to change the color of the Main Menu links to #333, what bit of code would I use to go about targeting that and implementing the change?

togbonna’s picture

Look for the current CSS color property for the <a> tag of the link you want to change (using Firebug perhaps), copy the CSS code for that into your subtheme and change the color property value to the color you desire.

Such as:

ul.menu li a {
  color: #333; // Change the value as desired. eg #ff000
}