Amy+Luong

I geared towards using Omega as a base theme for the final assignment because its flexibility makes it very easy to control design aspects without needing to dive into hardcore coding. So after a little research, I realize the best practice is to create a sub-theme instead of editing the base.
 * Omega Theme**

**Creating an Omega Subtheme**
(Using Omega Tools)

You will see even from the description that it should not be used directly, but should be used to create a subtheme based from the starterkit.
 * 1.** Start by installing the Omega Base Theme. (@http://drupal.org/project/omega)




 * 2.** Download, install and enable the Omega Tools Module along with the required Ctools Module (however, you should already have Ctools installed, but I noted it just in case).




 * 3.** If you navigate back to the Appearance page, you will find a new option entitled "Create new Omega Subtheme" beside the "Install New Theme" link.




 * 4.** Once you click "Create new Omega subtheme", you will be redirected to a (Step 1) Theme Information page. Name this new theme of yours. Unselect "Install Automatically" because I ended up with an error message on the Sheridan server when I did this. So I just chose to avoid it. The Base Theme from the dropdown menu will be "Omega". The starterkit that should be selected is "Omega HTML5 Starterkit".



Step 2: Finalize. Here you can add a brief description to your subtheme (or not). The version of your subtheme is set to default " 1.x". Then click 'Finish'.




 * 5. "Your Subtheme is Ready for Download".** Click the download button on the page, save it onto your local hard disk. When it's on your computer, unzip the folder. You will now have a folder with all the necessary files for the subtheme.


 * 6.** Log into your site through FTP and upload the folder that was previously downloaded. Navigate to your **//sites/all/themes//** folder and upload your subtheme folder (which was entitled cct460 for me). Head back **Appearance** and scroll down to disabled themes. At this point, you should see your Omega Subtheme named cct460 1.x. Enable and set to default.




 * 7.** With that, you should see it live when you visit your home page. You now have an Omega subtheme that's ready for some content and 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. [|omega-basic.css]

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.