Styling Guides and Diagrams of Zones/Regions

Events happening in the community are now at Drupal community events on www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!
Posted by cellar door on June 28, 2011 at 6:30pm
Last updated by bhosmer on Sun, 2011年09月18日 08:13

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:
    Only local images are allowed.
  2. Only local images are allowed.
  3. Only local images are allowed.
  4. Only local images are allowed.
  5. Only local images are allowed.

Comments

Very useful

Posted by iainh on July 5, 2011 at 8:57am

Thanks! It's still true that a picture is worth a thousand words. ...

I'm glad it helped.

Posted by bhosmer on July 6, 2011 at 6:41pm

I'm glad it helped.

Excellent

Posted by eubielicious on July 6, 2011 at 7:01pm

Thank you so much for this - I need to be able to see an overview and this does the job very well. A great reference for theming!

Euan

Very useful! Thanks! I've

Posted by zigmoo on September 1, 2011 at 11:12am

Very useful! Thanks!

I've seen your pics used at a nice tutorial write-up, which also has a link to a cool color-coded version of your CSS structure.

moo

Awesome! I'm glad it helped.

Posted by bhosmer on September 1, 2011 at 11:16am

Awesome! I'm glad it helped. I need to update it for 3.x

this is absolutely wonderful

Posted by justluvgod on September 7, 2011 at 2:29pm

This document is super awesome!!!!! I have progressed more in the last hour using this as I have in a week using firebug (and I like using firebug).

Thanks for making this so super easy.

Ahhh amazing! this is what I

Posted by Duarte Cancela on November 2, 2011 at 6:45pm

Ahhh amazing! this is what I was looking for

Thanks

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

AltStyle によって変換されたページ (->オリジナル) /