Responsive Theme - How to create Omega Subtheme?

It’s becoming highly important for businesses to set up mobile versions of their corporate websites. This is because a good majority of individuals rely on their cell phones to access the Internet. If you don’t have a mobile-compatible website, then you are definitely missing out on quality business!

It’s important that your website can be viewed in any resolution across a variety of platforms – mobile devices, tablets, laptops, notebooks, desktops and TVs. And this is only possible with the concept of responsive theming.

A responsive theme is a flexible theme with a fluid grid system that adapts your website to any viewing environment. Drupal Base themes that support responsive design are Zen 7.x-5.x, Adaptivetheme and Omega. To create a responsive theme, it is always recommended to use a Base theme and then create a subtheme. Let us create a subtheme of Omega Theme.

You can create an Omega subtheme by using any of the following methods::

1. Omega Tools (Recommended)
2. Drush (For Advanced Users)
3. Manually

Using Omega Tools: Omega Tools allow you to create a subtheme using Drupal administration.

1. Install and enable Omega Tools Module (http://drupal.org/project/omega_tools)

2. Navigate to "Administration" -> "Create a new Omega subtheme"

3. Add a theme name.

4. Tick against the check box "Install automatically" to automatically place the theme in the selected destination. This feature requires you to have write permission for the selected destination.

5. Choose the base theme. There are two choices, Alpha and Omega. Alpha has the basic CSS reset, grid, core layout, interface, debugging and basic templating functions. Omega adds panel integration and a selection of default styling css files. In 99% of cases you want to base your subtheme on Omega. It's ideal to choose Omega.

6. Choose the Starterkit as per your requirement. For example, the Omega HTML5 Starterkit.

7. Click "Save" and continue.

8. Add the description and version. Click "Finish".

9. Your sub-theme has been created. Check your selected destination for the theme. For example, the "all/themes" directory.

10. By default, the sub-theme contains the following files and directories:

• css
• preprocess
• process
• templates
• logo.png
• mysubtheme.info
• screenshot.png
• template.php

Now enable the sub-theme and play with the files to create the theme as per your design.

Note: Do not enable the Alpha and Omega core themes.

CSS: By default, you will have 5 css files. 1 global.css for all the layouts and 4 .css files prefixed with your sub-theme name for different layouts.

• mysubtheme-alpha-default.css
• mysubtheme-alpha-default-narrow.css
• mysubtheme-alpha-default-normal.css
• mysubtheme-alpha-default-wide.css

Preprocess: Any custom preprocess functionality can be placed in the preprocess folder rather than directly in template.php. We can create the files in the name such as:

• TEMPLATE_preprocess_html() = preprocess-html.inc
• TEMPLATE_preprocess_page() = preprocess-page.inc
• TEMPLATE_preprocess_node() = preprocess-node.inc
• TEMPLATE_preprocess_comment() = preprocess-comment.inc
• TEMPLATE_preprocess_region() = preprocess-region.inc

Process: Like preprocesses, any custom process functionality can also be placed in the process folder rather than directly in template.php. Files can be in a syntax as follows:

• TEMPLATE_process_html() = process-html.inc
• TEMPLATE_process_page() = process-page.inc
• TEMPLATE_process_node() = process-node.inc
• TEMPLATE_process_comment() = process-comment.inc
• TEMPLATE_process_region() = process-region.inc

Templates: You can copy any .tpl.php file and customize them accordingly.