You are here

Omega 4 - A modern base theme for Drupal 7

Submitted by Peter on Wed, 2013-09-11 11:59

Omega is the second most popular theme for Drupal after Zen. Omega 3 attempted to do everything including provide a user interface for altering the theme. Omega 4 is an advancement toward a great base theme with the bells and whistles provided by other components focused on those other areas.

This page is based on Omega 4 dev from September 10, 2013, which is beta 7 + some development changes. I tested Beta 7 and it had some problems. One problem was supposed to be solved in the development version but was not. The dev version did improve the layout of the included Ohm demonstration subtheme theme.

The dev version is a 400 KB download from drupal.org/project/omega. The download expands out to 680 files occupying 1.5 MB. Fortunately many of those files are not used by the theme during a page load.

You could read the documentation at drupal.org/node/1768686 or jump straight in then read the documentation after you have the subtheme running.

Install

Pick a test site. I am using 03d.info.

Download and expand Omega 4 into the /sites/all/themes/ directory. Visit the Administration, Appearance, and set Ohm to the default theme for your test site. You do not have to switch on the base theme. You do not have to change any settings. Visit the home page to see the result.

Configuration

A demonstration theme should work in a regular Web browser without configuration. There are configuration options for a variety of special cases including older browsers.

Selectivizr.com/

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

  1. Create directory /sites/all/themes/omega/omh/libraries/selectivizr/.
  2. Download Selectivizr from selectivizr.com.
  3. Expand the downloaded file into /sites/all/themes/omega/omh/libraries/selectivizr/.
  4. Rename selectivizr-min.js to selectivizr.min.js.
  5. Switch on Selectivizr in the admin page.

Respond

Older releases of Internet Explorer, all the way back to IE 6, are in common use and have problems rendering polyfills. Javascript can fix the problem.

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

  1. Create directory /sites/all/themes/omega/omh/libraries/respond/.
  2. Download respond.min.js from github.com/scottjehl/Respond.
  3. Store the downloaded file in /sites/all/themes/omega/omh/libraries/respond/.
  4. Download respond.src.js from https://github.com/scottjehl/Respond.
  5. Store the downloaded file in /sites/all/themes/omega/omh/libraries/respond/.
  6. Rename respond.src.js to respond.js.
  7. Switch on Respond in the admin page.

CSS3 PIE

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

  1. Create directory /sites/all/themes/omega/omh/libraries/pie/.
  2. Download PIE-1.0.0.zip from css3pie.com/download.
  3. Expand the downloaded file.
  4. Copy PIE.js into /sites/all/themes/omega/omh/libraries/pie/.
  5. Switch on CSS3 PIE in the admin page.

HTML5 Shiv

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

HTML5 Shiv is a Javascript shim to slip some HTML 5 improvements into some older browsers. Shim is an engineering term for a small add-on device to adjust space in a machine or construction. Some people call a shim a shiv as a reference to sticking a knife into your opponent to kill them. Weird.

The source Web site currently has no minified versions of the Javascript files so we fake the minified versions by copying the full source versions with different names. At a later stage, when you are satisfied with
HTML5 Shiv, you can hunt down or create minified versions.

  1. Create directory /sites/all/themes/omega/omh/libraries/html5shiv/.
  2. Download html5shiv.js from https://github.com/aFarkas/html5shiv/tree/master/src and save the file into /sites/all/themes/omega/omh/libraries/html5shiv/.
  3. Copy html5shiv.js as html5shiv.min.js.
  4. Download html5shiv-printshiv.js from https://github.com/aFarkas/html5shiv/tree/master/src and save the file into /sites/all/themes/omega/omh/libraries/html5shiv/.
  5. Copy html5shiv-printshiv.js as html5shiv-printshiv.min.js.
  6. Switch on HTML5 Shiv in the admin page.

Chrome Frame and Internet Explorer Edge support

Select the Compatibility tab and switch off Enable Chrome Frame and Internet Explorer Edge support. Switching it off reduces the page download overhead and time by removing some of the Google junk. Google junk is consistently the slowest part of a page download. Google junk might download fast in some cities but in every test I conduct, all over the world, Google downloads just create a big drag on every page.

You can switch this option back on if you create something that only works in Google Chrome and you want it to run in Internet Explorer. A better approach is to create things that are not dependent on Google's proprietary Chrome Web browser.

Enable LiveReload

Select the development tab and switch off Enable LiveReload. LiveReload does not do anything you need and LiveReload needs some other software loaded. You might set up LiveReload later if you spend most of your time changing CSS or images.

Save the configuration.

You will see the following message. Make a note to do that after you finish developing your theme and the settings are stable.
The settings for this theme are currently served from a variable. You might want to export them to your .info file.

Logo image settings

I switched off the default for 03d.info.

Shortcut icon settings

I switched off the default for 03d.info.

Blocks

Ohm picks up the default blocks from Omega.

  • Navigation bar (set to System help)
  • Header
  • Hero
  • Highlighted
  • Help
  • Content (set to Main page content)
  • First sidebar (set to Search form, Navigation, User login)
  • Second sidebar
  • Footer

The approximate layout follows.

    Navigation bar      
  03D.info     Header  
           
Hero          
Highlighted          
  Home        
  Help        
  <h1>Example</h1>   First sidebar Second sidebar  
  Content        
           
Footer          
           

Performance

Remove Google fonts

Everything Google is slow. The Ohm theme uses two fonts from the Google font library to make something slightly pretty. The font downloads add a second to the first page downloaded for each visit to your site. Google will downgrade your search rank for being slow. Remove the special fonts. Remove them from the Ohm CSS files. I can add more details later if you need them.

Switch on CSS aggregation

Visit the Admin configuration page and select Performance. In the performance page, set the minimum cache lifetime to a day then switch on Aggregate and compress CSS files and save the configuration. Test the results. In rare situations, aggregation can change the results from the CSS.

You should see a small reduction in page load time. You might occasionally see a longer page load time because the larger aggregated files take longer to download. if the download times are worse, look at the memory available for caching files in your server. The same memory shortage might slow down the download of Javascript and image files.

Switch on Javascript aggregation

Visit the Admin configuration page, select Performance, and switch on Aggregate JavaScript files then save the configuration. Test the results. Aggregation can break Javascript.

Generated HTML

The following HTML starts the page as HTML 5 and falls back to older HTML for some older Web browsers.

<!DOCTYPE html>
  <!--[if IEMobile 7]><html class="ie iem7" lang="en" dir="ltr"><![endif]-->
  <!--[if lte IE 6]><html class="ie lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
  <!--[if (IE 7)&(!IEMobile)]><html class="ie lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
  <!--[if IE 8]><html class="ie lt-ie9" lang="en" dir="ltr"><![endif]-->
  <!--[if (gte IE 9)|(gt IEMobile 7)]><html class="ie" lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#"><![endif]-->
  <!--[if !IE]><!--><html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#"><!--<![endif]-->

The characterset is defined as UTF8.

<meta charset="utf-8" />

You get assorted stuff for legacy iPhones (for those people who have not upgraded to Android).

<link rel="apple-touch-icon-precomposed" href="http://03d.info/sites/all/themes/omega/omega/apple-touch-icon-precomposed-72x72.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="http://03d.info/sites/all/themes/omega/omega/apple-touch-icon-precomposed-144x144.png" sizes="144x144" />
<link rel="apple-touch-icon-precomposed" href="http://03d.info/sites/all/themes/omega/omega/apple-touch-icon-precomposed-114x114.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="http://03d.info/sites/all/themes/omega/omega/apple-touch-icon-precomposed.png" />
<meta http-equiv="cleartype" content="on" />

You might want to change or remove the advertising for Drupal.

<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="profile" href="http://www.w3.org/1999/xhtml/vocab" />

Ok, tell everyone you are ready for hand held devices.

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
<meta name="viewport" content="width=device-width" />

Technology: