Beginning Drupal 7 Theming with Omega

Tags: Drupal Theming Omega Drupal Themes Drupal Planet

Getting Started with the Omega Theme Framework for Drupal 7

Please note, these instructions apply to the 2.x version of Omega. I will be updating them soon to reflect the new changes to the 3.x branch

Introduction

The Omega theme framework for Drupal 7 provides a very powerful and flexible starting point to begin creating your own custom theme. With the release of the 3.x branch, Omega now incorporates responsive elements that allows your site’s display to be specifically tailored to the user’s screen display. Without subdomains or redirects, your site can now be optimized for larger desktop displays, small smart-phones, tablet devices and almost everything in between. This is known as Responsive Design, pioneered by Ethan Marcotte.

Omega is based upon the 960 Grid System. Ted Forbes has an excellent Screencast that explains the concepts behind the 960 Grid.

Jake Strawn is the creator of the Omega Base Theme and deserves accolades for this project. You can also find a lot of information about Omega on his Omega Site at developmentgeeks.com There are some really great sites that were themed based on Omega.

There also is an Omega Documentation site maintained by Jake as well that is constantly being updated.

Since we're talking Drupal here, there of course is also an Omega Group, and the community is growing.

This article will get you started making confectionary goodness with Drupal and Omega. The Omega Wiki is also an excellent resource for further information about using Omega.

You will learn about:

The Omega base theme
How to create your own base theme from Omega
How to map and override the CSS styling to make it your own
How to save your theme settings to make your theme portable.
Courtesy Rob n Amy C Via Flickr

Theming a drupal site is like making a cake. Theming with Omega is like making a cake that you can easily change the frosting, and remove nuts and add chocolate chips if you want.

Making your Omega cake though is a little different from making a real cake, since you can add the frosting later and add or subtract layers at will. You can also have a base cake for weddings and birthdays and you can easily change the name! You can make one today, and save it for next week without any refrigeration required.

Omega will give you a base cake to start with, that you can easily adapt for a large wedding, or small birthday, and everything in between.

You will find it beneficial if you have some knowledge of CSS. or Cascading Style Sheets and how they relate to web documents. There are some excellent guides available, including:
You will also need to download the Omega project.

Add this theme to your sites/all/themes directory as you would any other theme.

When you are working with themes you will find it indispensable to use some type of Firebug variant in your browser to examine the CSS being used. We’ll talk about firebug a little bit later and how to use it to identify the different CSS classes to override in your sub-theme.

Tools You Will Need
- A Drupal Installation
- The Omega Theme
- A Text-editor
- A Firebug equivalent for your specific browser.
When you are working on theme development, having a local Drupal installation will allow you to quickly view your changes without the hassle of uploading files back and forth to a server.

You can set up a development environment on your local computer using WAMP if you are running windows, or MAMP if you are on the MAC. Linux folks, you most likely already have everything you need. Just make sure you are running PHP5.

Check out these getting started guides to help you get WAMP or MAMP if you don't already have one of them for your respective operating system:

MAMP: http://www.mamp.info/en/documentation/index.html
WAMP: http://www.wampserver.com/en/

Text-editors are available for every operating system, and each person has their own personal favorite. A lot are free. Your operating system probably also includes one. Try one of these if you don’t have a personal preference yet:

TextWrangler is my personal favorite for the mac, but you really need to try different ones to decide which one you really like.

Windows users can use Notepad++. Some offer syntax and code completion as well as a lot of other nifty features.

Step 1: Create Your Own Subtheme

You don't want to hack on the original Omega or Alpha themes included with the download. Instead, you'll need to create your own sub-theme will reference parts of the original and you can override things to your own taste within your sub-theme.

The Non-Drush Method

After you have downloaded the Omega theme, open the Omega folder. In it 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. Don’t use any spaces or dashes (-) in your name, or it won’t be recognized. 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.

The Drush Method

Using Drush, the Drupal Shell, makes it very simple to create sub-theme. You will need to download and install the Omega Tools module first and then from a shell console simply type drush omega-subtheme yourcustomtheme where yourcustomtheme is the name of your custom theme. Don’t use any dashes or spaces though.

One short command to create an entire sub-theme!

Image Courtesay catbeurnier via Flickr

Our cake sure is going to be awesome!

You should install the Omega Tools regardless of whether you are using Drush or not, since it also enables some additional functionality within the Drupal interface to allow you to export your theme settings easily.

Step 2: Edit your .info file

Regardless of whether you use the Drush method or you manually create your own subtheme by copying and renaming the starterkit directory, you will 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.

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.

Utilizing this base subtheme.css file allows you to only change the CSS that you want, but leaves the default settings intact. This saves you a lot of extra work.

The Omega theme itself starts in a hierarchy beginning with #page and then follows with containers that then hold wrappers, that hold regions.

Each container and region is named for easy reference.

The CSS is laid out like this:

#page {
background-color: #CCCCFF;
}

#zone-user-wrapper {
background-color: #3399FF;
}
#zone-user {
background-color: #0000FF;
}
#region-user-first {
background-color: #A3A3CC;
}
#region-user-second {
background-color: #C8C8E0;
}

#zone-branding-wrapper {
background-color: #fff;
}
#zone-branding {
background-color: #FFFF99;
}
#region-branding {
background-color: #FFFFCC;
}

#zone-menu-wrapper {
background-color: #3399FF;
}
#region-menu {
background-color: #FF6699;
}

#zone-header-wrapper {
background-color: #FFF;
}
#zone-header {
background-color: #00CC66;
}
#region-header-first {
background-color: #007A3D;
}
#region-header-second {
background-color: #00552B;
}

#zone-preface-wrapper {
background-color: #3399FF;
}
#zone-preface {
background-color: #CCCCFF;
}
#region-preface-first {
background-color: #FF66FF;
}
#region-preface-second {
background-color: #FF3399;
}

#region-preface-third {
background-color: #FF5050;
}

#zone-content {
background-color: #FFF;
}
#breadcrumb {
background-color: #3333FF;
}
#messages {
background-color: #66FF66;
}
#region-content {
background-color: #009999;
}
#region-sidebar-first {
background-color: #CC00FF;
}
#region-sidebar-second {
background-color: #7A0099;
}

#zone-postscript-wrapper {
background-color: #3399FF;
}
#zone-postscript {
background-color: #000;
}
#region-postscript-first {
background-color: #0066CC;
}
#region-postscript-second {
background-color: #0033CC;
}
#region-postscript-third {
background-color: #0000CC;
}
#region-postscript-fourth {
background-color: #336699;
}

#zone-footer-wrapper {
background-color: #FFF;
}
#zone-footer {
background-color: ##FF3300;
}
#region-footer-first {
background-color: #00CC00;
}
#region-footer-second {
background-color: #669900;
}

Here is a visual representation of the layout of the regions and wrappers:

You can also get the larger, original Google Docs for the diagrams above.
Step 4: Start Theming

Now that you have your custom theme installed with, you can visit /admin/appearance and you should see your new theme listed. Enable it and now you can begin to override the sections contained within your styles.css with you your own custom settings.

Visit the theme settings for you custom theme. Since you’re using Omega as a base theme, you will have access to all of the customization features that Omega offers.

Depending on your theme preferences, you can enable the option of using a responsive grid, this enables you to display your site in the best possible way, depending on what type of screen or device the user is viewing your site with. This article won't delve too much into responsive design.

There are some excellent resources to learn more about responsive design:
Step 5: Use Firebug

Now it is time to use firebug to identify which regions, wrappers, and zones you want to modify. Locate a section in your browser that you would like to change.

For instance, the top portion of your browser window might contain a search box. Right-click on this box and choose inspect element. Firebug will open a window at the bottom of your screen that reveals the CSS classes used in this section. Use the guide above to keep yourself oriented.

Using firebug, you can locate a section on the page that you want to change, make and preview the change in your browser, and then add the changes to your subtheme.css. Simply locate a region on your page that you want to modify and right-click on that region in your browser. Choose inspect element and firebug will show you the relevant css for that element. Now you can make changes instantly within your browser and preview the results.

After manipulating your CSS and setting your regions, it might be a good idea to export your theme settings, using the Omega interface.

This ensures that your specific settings are made permanent. Visit the settings page for you theme and then click on Export Theme Settings. Copy all of the settings and then paste them into your .info file. Now your theme is portable as well and can installed on another site. This allows your settings to be exported from your database and placed in code and will ease your configuration.

Conclusion

Using a theme framework like Omega, you can get down to customizing your site to your own needs instead of re-inventing the wheel each time you need to theme a new site. The important thing to remember is not to modify the original theme framework, but to instead create a sub-theme. This will enable easy updates to the core Omega framework and save a lot of work, since you only need to modify the portions that you want to change.

We covered:
- Creating s sub-theme
- Editing your .info file
- Adding a custom .css file
- Modifying the custom .css file
- Using firebug to identify what elements to override

Original Article:

Beginning Drupal 7 Theming with Omega