April 4, 2013

The Omega Drupal 7 Base Theme is a highly configurable HTML5/960grid base theme.

The 960GridSystem is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which creates 20 pixel wide gutters between columns.
1.jpg 2.jpg
Omega has two developer overlays displayed by default. The Blocks Demonstration Overlay (below) shows you, on-the-fly what regions are activated (all of them are activated by default) and where they live.
3.jpg

Omega homepage

The pink bars are the columns created by the grid system. The boxes are the block regions. You can easily see how the regions are arranged and how many standard columns they span.

Each zone (group of regions) can be configured for content first layouts (push/pull classes), hidden at any time and each region can be disabled, resized, and placed easily any way you see fit.

You can also see how the regions behave when responding to your browser or device width.  Check out how the boxes line up at a mobile width:
4.png
Creating an Omega Subtheme

Why is Omega called a base theme? Because it never changes. You build your design on top of the base that Omega provides.

Omega remains the same whenever you use it, but you can create a sub-theme with customized block regions, column layouts and CSS. As seen in the image below, a single base theme can support multiple different variations:
5.jpg
When also using the Omega Tools module, you can quickly generate a subtheme of Omega using admin settings page.
6.jpg

7.jpg 8.jpg
Or you can create a new subtheme ‘by hand’:

Step 1: Create Your Own Subtheme

You don't want to hack on the original Omega theme included with the download. Instead, you'll need to create your own subtheme that will reference parts of the original and you'll be able to override things to your own taste within your subtheme.

After you have downloaded the Omega theme, open the Omega folder. The you will find a directory labeled starterkits and then inside this directory different start-kits that you can use for a base theme. Choose the HTML5 starter-kit and copy this directory back to your sites/all/themes directory.This will be your new custom theme.

The first thing you need to do is rename the starterkit directory to your new custom theme name. Now open this directory and locate the starterkit.info file. Rename this file to the exact name that you used for your directory. It is imperative that the name of your theme directory and your .info file match, otherwise your theme will not display.

After you have created your directory, and renamed your .info file, there is just one more step to complete before you load your theme, you need to edit your .info file to reflect your custom theme name and settings.

Step 2: Edit your .info file

You need to open your .info file and locate lines 10 and 11. This is located under the comment ;IMPORTANT: DELETE THESE TWO LINES IN YOUR SUBTHEME. Go ahead and delete the two lines that say hidden = TRUE and the next line that says starterkit = TRUE This will allow your theme to display and then be enabled in the Drupal appearance administration page.

name = Omega XHTML Starter Kit
description = Default XHTML starterkit for Omega. You should not directly edit this starterkit, but make your own copy.
core = 7.x
engine = phptemplate
screenshot = screenshot.png
base theme = omega

; IMPORTANT: DELETE THESE TWO LINES IN YOUR SUBTHEME

hidden = TRUE
starterkit = TRUE

Step 3: Add the subtheme.css File

First, download the pre-populated styles.css file. This file has colors added for the major regions, wrappers, and zone within the theme for easy identification. Add this to your sites/all/themes/yourcustomtheme/css folder, overwriting the existing styles.css file. You can rename this file and call it global.css to work with the new Omega 3.x naming conventions.

Primary Features

  • Fully Responsive Grid layouts based on 960.gs standards.
  • 12, 16, 24 Column Layouts built in.
  • Performance enhancements, making Omega the best performing base theme to date.
  • HTML5 and XHTML Starterkits
  • Content first layouts with push/pull classes.
  • Regions and zones can be quickly enabled or disabled.
  • Every region/zone size and placement configurable.
  • Apply custom CSS classes to any region/zone.
  • Enable/Disable CSS from both Omega, Drupal core and contributed modules.Create contextual layouts with the Delta module.
Was this article helpful? Click to rate: 
No votes yet

You may also like

Stylus is a quite new but a dynamically developing CSS preprocessor....
Theming is a thing no project can be done without. Though it is not...
When you create a theme which is supposed to support different...