Omega_Styling

Styling Omega Subtheme
You can tell just by looking at the default Omega subtheme that it needs some major styling. The structure of the pages and blocks are very thoroughly outlined. It already has pre-established areas, so all you really need to do is place content and blocks in place. Styling can be done in two ways here, through Drupal core or through CSS.

The Omega theme (by default) is set to a 960 grid. Blocks are laid out on this grid but can be easily changed through configuration (done through Drupal Core). The **grid** and **block view** can be switched on and off at the side of the page.
 * Overview**



To change the structure of your Omega layout, navigate to your Themes and click on the settings (//Administration > Appearance > Setting//). On the left hand side, click "**zone and region configuration**". Here, you can change the width and position of any block area that are displayed through Omega.
 * Layout Configuration**

So for example, the Header is separated into two halves. On this "**zone and region configuration**" page, you can expand the width of Header 1 to take up 12 columns while disabling Header 2 (by not including it in any zone).



So once everything is structurally sound, you can make it look pretty with CSS. To target each area, you need the specific naming conventions for all the //div id and classes//. The CSS file you will be editing can be accessed through FTP, in sites/all/themes/**yourtheme**/css, called **global.css**. The file you find in there is empty.
 * CSS Styling**

Personally, when I got to this step, I downloaded a pre-populated css file. I have since heavily edited and organized it, but I have provided the basic CSS structure here.

A helpful site I referred to at this step was @http://www.radarearth.com/content/beginning-drupal-7-theming-omega. It had good visuals demonstrating the layout of wrappers and regions.

Example: If you wanted to format the colouring of the Footer, you can change it in the CSS. The only real challenge is finding which tag belongs to which element. Note: The block will not appear if there is no content to fill it.