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'

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'

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.

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

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

In this lesson, we pull our work together by creating a new view on the site that uses the work we've done so far with exposing our data, and creating our handlers. Once we create the view, we'll export it and add it to our module as a default view.

Though Panels comes with several built-in layouts for you to choose from, you’ll find that these don’t always suit your needs. Fortunately, there’s also a layout designer that anyone can use to create a new layout with Panels. In this lesson you will learn how to use the Panels layout designer for rapid prototyping.

Additional resources

Panels at Drupal.org

Drupal site builders have long wanted to rearrange the display of each piece of content. The page manager module provides us with a default node view context we can use to accomplish just this. In this lesson you will learn how to break an article into two columns.

In this lesson Joe demonstrates how to extend the default views sort handler and create a new one for use on our table that will allow us to sort the data returned from a query with the rows that belong to the currently logged in user at the top of the list. This lesson builds on information from the previous couple of lessons regarding implementing views handlers and general coding for views best practices.

In this lesson Joe takes a look at writing a custom filter handler by building on the knowledge gained about writing handlers from the previous lessons. Filter handlers control how data in a table is treated when being used in the context of a views filter including things like how the data is represented, what the form for filtering looks like and more.

In our original Databasics module, we had some access control around who could see the tab we are providing on the user page. Now that we have switched that tab to being a view, we need to still add that access control back. In this lesson, we will work with a new feature of Views: plugins. We will create an access plugin that gives us the freedom to add our own custom access control, along with settings to give our users a choice about what access they'd like to use.

In this video we'll look at adding yet another field handler, but in this instance we will be adding a Views field that does not directly map to an actual field in the database. Instead we will be creating our own variation on some data and adding it as a field that can be used in our views — a field that shows the percentage of page views as a black bar graph.

Now that you’ve manually created a new variant for your front page, this lesson will teach you a much faster way to duplicate an existing variant. This technique is useful if your variants are very similar to one another.

Panels and the Page manager module allow you to create different versions of the same page (called variants) under different circumstances. In this lesson you will learn how to build two different versions of the content on your home page. People who are logged in to your site will see a different home page than people who are not.