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:
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
Browse to your local computer and click Install to upload your theme.
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
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.
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
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.
Step 5. Finalize the configuration
Check the box to Enable the theme.
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.
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
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.
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.
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.
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
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!"
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.
This will help bring your site to the small screen. These settings will work for now.
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
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.
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
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.
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!
