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.
- Discover Omega - A Responsive HTML5/960 grid Base Theme
- Migrating from Omega 2.x to Omega 3.x - What's New in Omega 3.x?
- Getting Started With Omega - Alpha or Omega? XHTML or HTML5? - What's right for me?
- Creating a Subtheme - How to create your subtheme.
- Omega's Admin Settings UI & Folder Structure - The Big Picture
- Understanding the Responsive Grid - Using media queries to react to screen size changes.
- CSS Weights, Default Loading Order and Overrides - Learn how all your CSS files stack up.
- Responsive Images? - How to make your site images responsive to accommodate your responsive grids.
- Creating and Setting up a Custom Grid for Omega 3.x - Learn How to Change Omega's Default Grid and Create your Own.
- Creating custom Panels layouts for Omega 3.x Learn how to add you own custom grid based panels layouts to your Omega subtheme.
- Adding nested regions in Omega 3.x Learn how to add nested regions to your Omega subtheme.
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.
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.
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.
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.
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.
Useful Omega Resources:
- Official Omega
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
Useful Responsive Web Design Resources:Read more
All Wiki Pages
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'
Last updated by Slim Pickens on Thu, 2011-09-29 04:37
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.
Last updated by Slim Pickens on Thu, 2011-09-29 04:30
Add a zone in your_theme.info
zones[my_new_zone] = My New Zone
Add new regions in your_theme.info
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.
What we will achieve (hopefully):
We will be creating an simple non-fluid width grid: http://goo.gl/gNBR0 (or see the attached Image)
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.
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-firstRead more
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:
- 1 of 2