The easiest way of making an Omega 4.x subtheme is by using the omega drush commands. This page provides a guide for those who prefer to create subthemes manually.

Before we start make sure you have downloaded version of Omega 7-x-4.x and installed it. The theme does not need to be enabled.

Create your own subtheme

Omega comes with two starterkits to choose from, Default and Dusty. In the following example we will select "Default" and our new theme will be named "mysubtheme".

In the Omega root directory, copy the "default" directory, located in omega/starterkits, to sites/all/themes, and rename it to mysubtheme:

cp -a omega/starterkits/default ../mysubtheme

Your theme now requires some additional configuration before it can be used.

Configure your new subtheme

Go to your newly created theme (sites/all/themes/mysubtheme).

Create theme info file
Rename default.starterkit.inc file to match your theme name.
mv default.starterkit.inc mysubtheme.info

Change your theme info file
Info files work like module info files. They contain the theme name and description, compatible versions of Drupal, and so on. You will need to update this file to match your theme name.

In this example, mysubtheme.info will look like:

name = Default
description = Slim bleeding edge starterkit. Uses LibSass instead of the Ruby Sass preprocessor.
screenshot = screenshot.png
engine = phptemplate
core = 7.x

; Styles
stylesheets[all][] = css/{{ THEME SANITIZED }}.reset.css
stylesheets[all][] = css/{{ THEME SANITIZED }}.styles.css

; Scripts
scripts[] = js/{{ THEME SANITIZED }}.behaviors.js

Replace {{ THEME SANITIZED }} with your theme name. Also, change the theme name and description, to help differentiate the theme in your Drupal themes page.

Rename css files
Rename two oddly named files in the css directory:
css/{{ THEME SANITIZED }}.reset.css
css/{{ THEME SANITIZED }}.styles.css

Replace {{ THEME SANITIZED }} with the new theme name.

Rename scss files
Rename two oddly named files in the scss directory:
{{ THEME SANITIZED }}.reset.scss
{{ THEME SANITIZED }}.styles.scss.

Replace {{ THEME SANITIZED }} with the new theme name.

mv "sass/{{ THEME SANITIZED }}.reset.scss" sass/mytheme.reset.scss
mv "sass/{{ THEME SANITIZED }}.styles.scss" sass/mytheme.styles.scss

Rename template function
In process/page.process.inc

function {{ THEME }}_process_page(&$variables) {}

Replace {{ THEME }} with mysubtheme.

function mysubtheme_process_page(&$variables) {
}

Rename function in preprocess/page.preprocess.inc

function {{ THEME }}_preprocess_page(&$variables) {}

Replace {{ THEME }} with mysubtheme.

function mysubtheme_preprocess_page(&$variables) {}

Rename theme settings function
in theme-settings.php

function {{ THEME }}_form_system_theme_settings_alter(&$form, $form_state) {

Replace {{ THEME }} with mysubtheme.

function mytheme_form_system_theme_settings_alter(&$form, $form_state) {

Rename JavaScript file
Rename the file {{ THEME SANITIZED }}.behaviors.js located inside the js diretory to match your theme name.

mv "js/{{ THEME SANITIZED }}.behaviors.js" js/mysubtheme.behaviors.js

Your theme is now ready to use. Visit admin/appearance to enable your new theme; click "Enable and set as default". Start creating layouts for your website.

Comments

GuyPaddock’s picture

Not sure why Ruby or Omega Tools are referenced in this doc page... neither should be needed for Omega 4.

karolus’s picture

Well, if you want to take full advantage of advanced styling and layouts using Sass, you will need Ruby installed in order to run Compass and other tools. Omega Tools are command-line helpers to make working with Omega much easier.

pkiff’s picture

I've removed the reference to Omega Tools because they are not used with Omega 4.x subthemes, are they? I thought they were explicitly NOT compatible with 4.x?

I was also going to remove the Omega Context module reference as it is not necessary for setting up an Omega 4.x subtheme. I think we might also move some of the VM information and ruby information to separate pages, so that this page focuses just on what is needed to set up the subtheme manually (more or less). There are already other pages that describe how to get ruby set up on different operating systems for Omega.

steinmb’s picture

Moved all the drush bits into "Optional steps" and cleaned it up a bit. Though the part is useful do I feel it does not belong in here and should be removed/moved.

Stein Magne
http://smbjorklund.no

saccard’s picture

There was one change missing: in theme-settings.php. I have added it just before "Rename JavaScript file".
Omega 7.x-4.4

83steps’s picture

Following these directions, the mytheme.info file contains no "base theme =" statement. Without that, it seems like it's just basically a barebones standalone theme, and not a subtheme at all. Shouldn't we be adding "base theme = omega"?

StonewallThomas’s picture

Yes, I think that you have to call out the base theme to inherit its development features. I didn't even have region demo available until I did that.