How to Use the Omega Base Theme for Drupal

omega

Theming Drupal is not a straightforward task, but people are trying to make it easier. One way to do that is by creating a theme framework that provides many of the basic features that designers need: a grid system, cross-browser compatibility, base CSS classes and more..

In this tutorial, we’re going to use the Omega base theme. It is the theme used by major Drupal shops such as Acquia.com and Palantir.net.

Why is Omega called a base theme? Because it never changes. You build your design on top of the base that Omega provides.

Omega remain the same whenever you use it, but you can create a sub-theme with customized block regions, column layouts and CSS. As seen in the image below, a single base theme can support multiple different variations:

tutuploadstutuploadsmedia_1322027630932.png

In this lesson we will cover

  • Installing the Omega Framework
  • Using Omega tools to create a subtheme
  • Understanding the layout
  • Basic configuration options

When you’re done, you’ll have everything working, and you will be ready to start designing a theme. That’s going to take knowledge of CSS, and is beyond the scope of this lesson. If you don’t know CSS, don’t worry, you don’t need to know it to get this installed and working.

This framework is still under development, so there is much more to come from the developers.

Step 1. Install some required and helper modules

There are a few modules that you will either need or will help out. Add the following modules to Drupal 7 if you haven’t already.

The Omega Theme requires additional modules:

Two notes of caution:

  • Some of these modules are fairly complicated to configure and have their own learning curve to go through. If you are a beginner, you don’t need to do anything with them to experiment with creating a sub-theme.
  • Some of these modules are still in early versions, so don’t experiment on a live site. Use a test site to learn. Backup your live site if you’re going to make changes or before you install any of these modules.

Step 2. Download and Install Omega

tutuploadstutuploadsStep_2_e7df06d8e4d1915fc2356e0acded5ce9.png

You can download the framework here: http://drupal.org/project/omega.

To install it go to Appearance > Install new theme.

tutuploadstutuploadsmedia_1322035316383.png

Browse to your local computer and click Install to upload your theme.

tutuploadstutuploadsmedia_1322034875001.png

After installation you will see two new themes available Alpha Core and Omega Core.

You do not need to enable these or set them as the default. In fact, it’s better if you don’t. You are going to be using these as base themes and do all your work on copies of these that you create. If you’ve installed all the the Omega Tools, Context and Delta you’ll see an additional link on the Appearance page.

Step 3. Create the sub-theme

tutuploadstutuploadsStep_3._Create_the_sub-theme.png

Click Create new Omega subtheme.

If you’re a beginner, this takes all the worry out of the process. You can create sub-themes by hand, and it’s not very difficult. You don’t have to use Omega as the base theme. You can use any template as the base theme. When you create the sub-theme almost all the characteristics of the base theme are inherited by the sub-theme.

It’s great because when it comes time for version updates, you only have to update the base, and all the sub-themes will update with it. Any customizations you made to the sub-theme won’t be affected.

The Omega subtheme creator can be used with other themes, it’s not restricted to Omega. But to fully automate the process (especially for beginners) you will need to use one of the starter kits.

If you use it for other templates, there are some files you will need to create and change by hand, the starter kits won’t work.

tutuploadstutuploadsmedia_1322030114830.png

Give your theme a name

Choose your base theme.

Choose your starter kit.

Omega gives you two starter kit options, Omega-html5 and Omega-xhtml. HTML5 is a better choice in terms of long-term compatibility with the modern web’s changing browser standards. Choose Omega-xhtml starter kit if you have any particular XHTML requirements.

Step 4. Go through the configuration wizard

tutuploadstutuploadsStep_4._Go_through_the_configuration_wizard.png

Only step one of the wizard is working as this is written. So you can jump to Finish after you give it a name, description and version number.

tutuploadstutuploadsmedia_1322030300883.png

Step 5. Finalize the configuration

tutuploadstutuploadsStep_5._Finalize_the_configuration..png

Check the box to Enable the theme.

tutuploadstutuploadsmedia_1322030390416.png

After you click Enabled, you get to choose whether you want this as the default theme. You can also click Advanced configuration to open up more options. If you are a beginner they won’t mean too much, and defaults will work for learning purposes.

tutuploadstutuploadsmedia_1322030452103.png

When you return to the Appearance page you will see that the theme with the name you gave it is now the default theme.

Step 6. Visit the site

tutuploadstutuploadsStep_6._Visit_the_site.png

This is what you will see when you take a look at the site.

The pink bars are the columns created by the grid system. The boxes are the block regions. You can easily see how the regions are arranged and how many standard columns they span.

tutuploadstutuploadsPr.png

On the top right of the screen you will see two green check marks. When you mouse over them they open and tell you what they relate to. If you click GRID, the check mark will change to a red x and the pink bars will disappear. When you click on BLOCKS, you toggle the outlines of the regions.

The third one is the result of adding the CSS Live Module. When you click it it opens a side pane that you’re going to like a lot.

tutuploadstutuploadsmedia_1322030653979.png

The side pane will give you access to all of your CSS files and and editor window. You can make changes while you are viewing the site. The basic site is so plain you’re free to do just about anything you want with the CSS.

Caution, these are permanent changes you are making in the edit pane. Make sure you have backups of your CSS files in case you change your mind about something. They will not change the base theme CSS, only on the sub-theme.

tutuploadstutuploadsThe_side_pane_wil.png

Here’s what the site looks like when the grid and the block regions are toggled to “off”.

Step 7. Configure the sub-theme you created

tutuploadstutuploadsStep_7._Configure_the_sub-theme_you_created._1.png

Click the Settings link next to the theme logo on the Appearance page.

You can ignore the Edit link. It takes you to the uncompleted wizard we didn’t get to use during installation. Here’s what the authors say about it though, “Omega UI – IN DEVELOPMENT – Will provide an advanced jQuery interface for configuring Omega theme settings via drag & drop interface chocked full of awesomesauce!”

tutuploadstutuploadsStep_7._Configure_the_sub-theme_you_created..png

Choose your grid system.

Your choices are the default and fluid. If you choose fluid, you will no longer have any fixed columns, and the layout will expand to 100% of the screen.

The responsive settings will be checked by default.

tutuploadstutuploadsmedia_1322031567023.png

This will help bring your site to the small screen. These settings will work for now.

tutuploadstutuploadsmedia_1322031593397.png

For now it’s best to just keep the Normal layout as primary. You can try the other settings, and see what happens, but this doesn’t need to be dealt with unless you unchecked the “responsive grid” box at the top of the page.

Step 8. Zone and region configuration

tutuploadstutuploadsStep_8._Zone_and_region_configuration.png

The settings allow you to modify the regions, without needing to modify the template files. Each panel here corresponds to the section rows and the regions that show up on the home page. VIew your site or take another look at the picture in Step 6, and you’ll see that this list corresponds to your layout.

They kind of mix up some terminology here. The link says zones and regions, but the panels are titled section and zone. A section is an area of the layout that goes across the entire grid. A zone is a part of the section. When you click on the zone, you’ll see the region that is in the zone. These would be the same as “block regions” in other templates, and will be the place you put the blocks.

This is very confusing. I eventually had to start putting content in and assigning the blocks to regions to see what was really happening.

Here’s what you need to start giving these regions or zones, or whatever they decide to call them, some shape.

tutuploadstutuploadsmedia_1322041343245.png

Click User Zone to open the editing a pane.

Click Configuration to edit the configuration.

Click Regions to open the pane showing the regions.

Click the name of the region you want to edit.

In the first pane, providing a wrapper allows you to use custom CSS. Force this zone to be rendered – This means that the space will be rendered even if the zone is empty. Usually if it’s empty it collapses and doesn’t show at all.

User Bar First is a region like other regions in other templates, and this is where you will be placing your blocks. This pane allows you to place the region exactly and control it’s size. If you prefix it with 2 columns, the first two columns on that row will be blank, and nothing else will be able to fill them. If you suffixed it with 2 columns, nothing will be able to fill the last two columns, and your region will occupy the 8 columns in the middle, and it will be centered.

If you wanted this region to occupy the last 8 columns, you would prefix it with 4 columns, and suffix it with 0 columns. This is how you get exact placement of regions on your layout.

Step 9. Toggle your CSS

tutuploadstutuploadsStep_9._Toggle_your_CSS.png

You can have many style sheets. As you create new versions of a theme, you can turn some on and turn some off. You control it with the check boxes.

tutuploadstutuploadsmedia_1322031870742.png

The other sections I didn’t cover are either fairly simple or not really necessary for getting started learning how to work with Omega.

The purpose of this tutorial is to give you enough information so you can install the theme, install the sub-theme and get the basic configuration set up so you can start working on your next incredible design for the Omega Framework.

The next step for students is to start studying the CSS files and start using the code panel to make some customizations. That’s where the fun begins. Review our coding course online and get started!

Author

0 0 votes
Article Rating
Subscribe
Notify of
25 Comments
Oldest
Newest
Inline Feedbacks
View all comments
madhaze
madhaze
12 years ago

Thanks for posting this. I was having a hard time finding instructions for getting Omega up and running.

Nick
12 years ago
Reply to  madhaze

You’re very welcome, Madhaze! You should check out our Drupal Beginner and Intermediate classes available at [url=http://www.ostraining.com/online]www.ostraining.com/online[/url]

Kind regards,

Nick

gnubie
gnubie
12 years ago

Awesome post, just wish it would go just that little further for us noobies – but thanks all the same as Drupal info is not easy to find.

steve
12 years ago
Reply to  gnubie

Hi gnubie

What information is missing for you? Happy to do a Part 2, if needed.

davida
davida
12 years ago
Reply to  steve

[quote name=”steve”]Hi gnubie

What information is missing for you? Happy to do a Part 2, if needed.[/quote]

[quote name=”steve”]Hi gnubie

What information is missing for you? Happy to do a Part 2, if needed.[/quote]

Would you please build a simple site with omega theme? I know all the basic CSS, I would like to learn layout,3 Col. use customized header background, use drapul blockes etc.. I would like sign up the training when it is available, thanks in advance,

decibel.places
decibel.places
12 years ago

after installing the recommended modules, anytime I enabled the admin or admin_menu modules I got the dread error

PDOException: SQLSTATE[HY000]: General error: 2006 MySQL server has gone away

I had to increase max_allowed_packet to 64M in MySQL (using Xampp 1.7.4 on Windows 7)

Great tutorial btw, got me up & running in no time. Love the live_css module, even better than Firebug!

Nick
12 years ago
Reply to  decibel.places

Hi decibel.places,

We’re glad you enjoyed the tutorial and that you were also able to get your issue sorted! 🙂

Kind regards,

Nick

banghouse
banghouse
11 years ago

Anyone that says they can’t find documentation on Omega isn’t looking very hard. The official handbook is a step by step guide for getting started and beyond. Anyone using drupal products should know (or should learn) how to find a project handbook on D.O – [url=http://drupal.org/node/819164]http://drupal.org/node/819164[/url]

The Omega project handbook is an example of how well a project can be documented if the core belief that documentation matters is understood and acted upon. We hope that the quality of our handbook will motivate others to treat their projects’ documentation with a similar degree of priority.

That said, this write-up is very well done. And the Omega documentation team welcomes anyone interested in developing better documentation for Omega to join forces with us on [url=http://drupal.org]drupal.org[/url].

For additional resources:

IRC – #drupal-omega

Issue queue – [url=http://drupal.org/project/issues/omega]http://drupal.org/project/i…[/url]

Group – [url=http://groups.drupal.org/omega-framework]http://groups.drupal.org/om…[/url]

banghouse
banghouse
11 years ago

It is the theme used by major Drupal shops such as [url=http://Acquia.com]Acquia.com[/url] and [url=http://Palantir.net]Palantir.net[/url].

FYI: [url=http://Palantir.net]Palantir.net[/url] is not built on Omega nor do they utilize Omega afaik. They’re the Zen folks. “Zen” being another excellent base theme. [url=http://Acquia.com]Acquia.com[/url] however _is_ built on Omega.

tyler
tyler
11 years ago

great post!! If you do a Part 2 it would be great to go over how the templates, process and preprocess directories and template.php should be used in your subtheme.

cathyhutzler
11 years ago

I found this article to be extremely helpful. Thank you.

NoNames Please
NoNames Please
11 years ago

Sorry, but I’ve mucked around with Omega long enough to know that it’s pure vaporware, crippleware and broken software. The documentation you point to is incomplete and utterly useless. If you know enough to rely on it, you don’t need it in the first place. If this is the best Drupal has, Drupal is dead.

abadon
abadon
11 years ago

Really nice tuto, the best so far i’v found thanks a lot Ed

Kiwami
Kiwami
11 years ago

Very refreshing.. needed this to get started.. Always knew I needed a ‘main framework’ if I was going to dive into the Drupal game.. Omega it is.. and this tutorial simplified the headache of what modules and practices the big kids use.

Kaushik Wavhal
Kaushik Wavhal
11 years ago

Thanks a ton…

I was about to give up on omega and found this post…very helpful…

Can you please explain this second last line of your post??

“The next step for students is to start studying the CSS files and start using the code panel to make some customizations”

Which css files and what and where exactly is the code panel??

Thanks in advance…Cheers

Hasan Haifz
Hasan Haifz
11 years ago

Great tips. Thanks so much.

davidda
davidda
11 years ago

i would like to see how to build a simple site with omega theme, please let me know when is your next step available, i will sign up and believe there are many will do too.

rseebach
11 years ago

I was wondering if this would be covered in the intermediate class you teach.

Ritu Raj
Ritu Raj
11 years ago

in Step 3, you said about to create sub-theme. but I am unable to see create sub theme link after installing omega theme.

Regard’s

Ritu Raj

Nathan
Nathan
11 years ago

In order to create a subtheme using Omega, you must have Omega Tools installed. [url=http://drupal.org/project/omega_tools]http://drupal.org/project/o…[/url]

Nathan
Nathan
11 years ago

Kaushik,

If you have CSS Live installed you can see the ‘Edit CSS’ button on the right side of the window. Once you click the button the panel opens. I like to use Google Chrome’s feature ‘Inspect Element.’

The CSS you will see is being pulled from your base theme. Do not edit the CSS in the base theme! If you want to override the base theme CSS then you should add your own CSS in sites/all/themes/YOURSUBTHEME/css/global.css.

Hope this helps!

Gravedig
Gravedig
11 years ago

Hey,

Great article, I’d seen Omega before but wasn’t entirely clear on what it did and tended to stick to the safer options like pre-packaged themes.

Thanks!

Kamana
Kamana
10 years ago

Thank you very much .

vanessa
vanessa
9 years ago

this tutorial only refers to omega3 not omega 4

jsequeiros
jsequeiros
8 years ago

Buen material, para la creación de un subtema de omega, me servirá para actualizar mi tema hecho en drupal6 a drupal7 para mi sitio [url=http://www.jsequeiros.com]www.jsequeiros.com[/url]

25
0
Would love your thoughts, please comment.x
()
x