Last updated 25 September 2012. Created on 4 October 2011.
Edited by Mark_L6n, Kendall Totten, james311, brylie. Log in to edit this page.

First things first:

It is very important to understand that you should place your content in Blocks, Blocks in Regions, Regions in Zones & Zones in Sections. The theme settings User Interface (UI) makes positioning blocks, regions, zones & sections very simple. Unless your theme requires specialized coding, you should expect that most of your page structure/layout can be done using the UI. Because so much can be done using the UI there is typically very little need to modify your subtheme using custom code in .tpl files.

Default Theme Settings

The existing sections, zones and regions are sufficient for most use cases. In general, one will do more disabling of regions and zones than adding of new ones. New regions, zones & sections can be added in the .info file. You will need to flush cache and move them from the "unassigned" area in your theme settings. It is more common to create new regions than zones or sections.

Page Structure

A page contains the following elements:
SECTIONS (Zone groups)
ZONES (Containers for Regions)
REGIONS (Grid elements, where Blocks display)
Blocks (Containers for content)

Omega & 960 grid terminology

Containers and Grids in the 960 grid system are what ZONES and REGIONS are in Omega. The container is the outer wrapper element (div/section/aside/etc) that contains other elements (div/section/aside/etc) with the grid properties.

Zone & Region Configuration Settings Breakdown

ZONE configuration

For each zone, the following settings are available.

  • Provide full width wrapper around this zone

  • Enabling this feature will give a

    wrapper around the zone itself, allowing you to theme in elements that appear outside the 960 pixel container zone.
  • Force this zone to be rendered

  • Enabling this will always render this zone, even if it is empty.

  • Customize the region positioning

  • This allows you to manipulate the placing of the regions in this zone.

  • Section

  • Defines which section a zone will be in. To move a zone to a different section, choose the desired section name.

  • Weight

  • Defines where the zone will be placed within the section. To move a zone, choose a new weight. Zones are ordered from lowest number to highest.

  • Column count

  • Choose the desired number of columns for the zone. Default options are 12, 16, and 24. Each zone defines its own column count, which means you can use a different number of columns for each zone on the page.

  • Primary region

  • Defines which region within the zone should appear first in the source code and expand to fill empty space if other regions in that zone are empty.

  • Additional zone classes

  • Enter any CSS classes to be added to the zone for theming.

  • Additional wrapper classes

  • Enter any CSS classes to be added to the zone wrapper for theming. This will only be used if the option to provide a full width wrapper around the zone is enabled.

    REGION configuration

    For each region, the following settings are available.

    • Force this region to be rendered

    • Enabling this will always render this region, even if it is empty.

    • Zone

    • Defines which zone a region will be in. To move a region to a different zone, choose the desired zone name.

    • Prefix

    • Choose the number of empty columns that should appear before this region.

    • Width

    • Choose the number of columns this region should take up within the zone. The total number of columns for regions in a zone (plus any prefix or suffix columns) should equal the column count chosen for the zone.

    • Suffix

    • Choose the number of empty columns that should appear after this region.

    • Weight

    • Defines where the region will be placed within the zone. To move a region, choose a new weight. Regions are ordered from lowest number to highest. Weight comes into play when you view your site in a mobile device (or your browser window is set to a smaller width) and the regions begin stacking vertically. When the regions begin to stack vertically, the region with the least weight will float to the top, while the region with the most weight will sink to the bottom. I.E.: If the "Sidebar First Region" has a weight of -5, and the "Content Region" has a weight of 10, when the window is collapsed to the mobile size the "Sidebar First Region" will be at the top of that zone, and the "Content Region" will be at the bottom.

    • Position

    • This allows you to manipulate the placing of the regions in this zone. To adjust the region position, go to the Configuration settings for the Zone, and check the box next to "Customize the region positioning".
      Positioning means that if your current site displays the "Sidebar First Region" on the left and the "Content Region" on the right but you'd like to swap the two, you'll need to give the "Content Region" a lower position number. I.E., "Content Region" should have a position setting of -10, and the "Sidebar First Region" should have a position setting of 5.

    • Additional region classes

    • Enter any CSS classes to be added to the region for theming.

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

Comments

The Webmaster Centre Ltd’s picture

Choose the number of columns this region should take up within the zone. The total number of columns for regions in a zone (plus any prefix or suffix columns) should equal the column count chosen for the zone.

Would it be more accurate to say that the total number of columns for regions in a zone (plus any prefix or suffix columns) should be a multiple of the column count chosen for the zone?