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:

#page

--#section-header
    #zone-user-wrapper
      #zone-user
        #region-user-first
        #region-user-second

    #zone-branding-wrapper
      #zone-branding
        #region-branding

    #zone-menu-wrapper
      #zone-menu
        #region-menu

    #zone-header-wrapper
      #zone-header
        #region-header-first
        #region-header-second

--#section-content
    #zone-preface-wrapper
      #zone-preface
        #region-preface-first
        #region-preface-second
        #region-preface-third

    #zone-content-wrapper
      #zone-content
        #breadcrumb
        #messages
        #region-content
        #region-sidebar-first
        #region-sidebar-second

    #zone-postscript-wrapper
      #zone-postscript
        #region-postscript-first
        #region-postscript-second
        #region-postscript-third
        #region-postscript-fourth

--#section-footer
    #zone-footer-wrapper
      #zone-footer
        #region-footer-first
        #region-footer-second

You can download the global.css and use it as a visual guide when creating your own theme.

Here are visual representations of the theme structure:

1. The Sections:
   
2. 
3. 
4. 
5.