Introduction to Omega 3.x

Omega is a Drupal base theme that provides you with a really nice responsive framework. Omega also provides a lot of configuration options that are accessed through the UI rather than code. So, you can adjust the display settings and know that the underlying framework will be intact.

In this series, we're going to be demonstrating the Omega module by converting an existing Drupal theme into an Omega sub-theme. We'll talk about the HTML and CSS that's involved, and how they work together. We'll be working with theme functions and looking at the Omega best practices around how to break out your theme functions, where to put those, and how to use them.

Additional resources

• http://www.alistapart.com/articles/responsive-web-design

In this lesson we're going to take a look at the Omega theme, cover some basic terminology around it, and discuss the advantages and challenges of using it. Specifically this lesson will cover:

• Omega features
• Helper modules
• Where to find documentation
• Omega terminology

Additional resources

• Omega theme
• Omega Tools module
• Delta module
• Omega Handbook

Before we can really dive in to learning Omega we need to do a couple of basic setup tasks. Mostly, we need a Drupal 7 site that has some content for us to look at while we are theming. In this lesson we're going to:

• Generate some content with devel generate module
• Install the 960 Robots theme from drupal.org
• Place some blocks in to the regions provided by the 960 Robots theme and talk a bit about what it gives us so that we can begin to understand how we might convert it to an Omega sub-theme

Under the Downloads tab, there is a copy of the final database and the files directory for this Demo site.

Additional resources

• 960 Robots theme
• Devel module

In this lesson we're going to get started with Omega by getting the base theme and creating our new sub-theme. We're going to be doing the following tasks:

• Enable Omega and Omega Tools
• Use Omega Tools to create our sub-theme
• Enable the new theme
• Review the files of the new theme

Omega offers a simple, yet nice set, of debugging tools that assist you when it comes to laying your site out in a 960 grid. Grid layous consist of columns that your content can span accross and part of these debuggung tools is the ability to turn on and off a visual indication of the particular column layout you are using. Omega also gives you the ability to toggle on and off a visual indication of all the regions availabile in your theme. Inside the theme settings you also have the ability to turn these features on or off all together or by role. So in this lesson we will cover:

• Omega debugging tools
• Grid and region visual indicators
• Omega debugging settings

We will also show you how these tools can cause some frustration when it comes to testing the layout of your site espcially in areas that don't have content yet available.

Responsive design is more than a just a buzzword these days but a standard practice of good web shops when building out a site. Omega provides a responsive design out of the box and gives lots of options to layout your content in the proper places and the ability to work with the break-points all with a User Interface. In this lesson we will cover:

• Omega responsive options
• Column settings for your grid layout
• Omega responsive layout settings
• Device viewports and media queries

We end the lesson getting our new sub-theme ready to handle our 960 robots theme and the 16 column setup we designed it with.

If you prefer working with code, instead of the web UI, you may configure your theme as follows to change your column settings from 12 grid columns to 16 in your theme's .info file:

Find and replace all the instances of:
_columns] = '12'
with:
_columns] = '16'

There may still be additional regions that also need to be set which weren't the full width. You can edit other regions as needed, such as:
_region_user_first_columns] = '8'
change to:
_region_user_first_columns] = '12'

Converting an exisiting theme to Omega takes time and some planning, but Omega gives us plenty of options of moving things around the page all without touching a piece of code. When working with a grid layout we use Omega to set all of our content to span the proper columns all while moving our content from zone to zone so it is placed properly on the page. We will cover:

• Moving content from zone to zone
• Choosing proper zone column widths
• Splitting column amounts to create right and left columns

Once all of this is complete we are just a few steps away from getting into some CSS and really making our theme come together as an Omega sub-theme.

Additional notes:
If you want to touch code, you can edit the .info file as such (for the first part, moving branding zone):

settings[alpha_region_branding_zone] = 'header'
...
settings[alpha_region_branding_weight] = '3'
...
settings[alpha_region_header_first_weight] = '1'
...
settings[alpha_region_header_second_weight] = '2'

Because Omega doesn't make assumptions about your layout, it comes with lots of options and plenty of regions to work with. This is great but also has some down falls espcially if you are converting an exisiting theme that just doesn't need as many regions and zones. Along with removing regions you may need to add some as well. In this lesson we will demonstrate:

• Adding a region
• Removing regions
• Placing content into these regions
• Cleaning up the .info file

Once this is complete, we now have our converted theme setup just as it was before when it comes to the grid system and some blocks in place to make sure the layout is looking good.

NOTE: Kyle initially sets a position, but not the weight, of the footer_bottom region in this video, and then you'll see that he catches the mistake, and fixes it to have a weight of 3.

Besides working with sections, zones, regions, and responzive settings, Omega provides lots of other features that make using it a good choice for your theme. Omega also offers:

• Ability to enable/disable script libraries
• Ability to enable/disable theme style sheets
• Ability to enable/disable core/contrib stylesheets
• Typical theme settings

Getting to know these settings certianly helps set the look and fell as well as the capabilties of your theme. With the ability to do things like adding the Equal heights library and enabling it across your zones is just a handy feature and it's free with Omega.

In this lesson we will be covering how take all the settings we have made for our 960 robots subtheme and export it into code. We will cover multiple ways of doing this and why this is a good practice to get into when working with different environements and/or other team members. We also cover adding features to the .info file from our exisiting theme into our new Omega sub-theme. So basically, this lesson will cover

• Exporting your theme
• Why export?
• 3 Different methods of export
• More theme conversion

Once the lesson is complete you will become an exporting guru and impress your friends at just about any gathering with your Omega Exporting amesomeness.

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.

The combination of Omega, Alpha and our new 960 robots base theme means that there are a pile ton of CSS files included in our pages now. These CSS files provide the foundation for some of the coolest features in Omega like the mobile first approach and the ability to provide a responsive design. Lets take a look at

• The various CSS files included by alpha, Omega, and our subtheme and how they work together
• Do a quick expirement to demonstrate the various CSS files associated with Omega's media queries
• Talk abou the HTML output by the Omega theme and how it's structured.

So put on your goggles beacuse we're about dive deep into the land of responsive CSS.

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.

For this lesson we get to finally start to convert our 90 Robots theme into our Omega sub-theme. We're going to take a look at what we have the original 960 Robots files, and start to move that into our 960 Robots Omega theme. To start things off we will:

• Review theme files
• Move main.css into the global.css file
• Begin converting the page.tpl.php
• Create a custom region template

Here is where the rubber meets the road for making our sub-theme look the way we want it to, so let's dive in.

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.

We have a custom template file that has the HTML that we want, but not all of variables are coming through yet, and instead we are getting "Undefined variable" errors. In this lesson we're going to take care of that, as well as making sure our custom variables from the original 960 Robots get moved over as well. Omega has its own best practices around adding preprocess and process functions to a sub-theme, so we'll walk through what Omega expects, and how to use the files and examples that Omega is providing for us. So we're going to:

• Look at the Omega best practices
• Create a process include file
• Add our region variables
• Add our custom variable from 960 Robots

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.

In this lesson we have fast-forwarded some by completing the conversion of our old page.tpl.php into the new Omage theme. We'll take a look at the work we've done to get to this point, and then deal with what looks like could be a tricky HTML wrapper problem by creating a new zone for our theme, and configuring it to meet our needs. So, we'll:

• Review templates and variables
• Add a new zone to our theme
• Configure our regions with the new zone

This is where we can really see how to blend the usefulness of code and configuration in Omega, to accomplish our task in a very simple way.

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.

So, we now have all of our CSS and HTML in our sub-theme. In this lesson, we've moved over the remaining files that our theme will need, like the images folder, and our node template files. The last step to finish this theme up, is to modify our CSS to take advantage of the responsive framework we already have in place. To do that we'll:

• Review the theme files
• Look at our default CSS file
• See the responsive changes

We're in the home stretch with our theme, so let's make our CSS responsive and wrap things up.

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.

Additional resources

You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.