Last updated 24 October 2009. Created on 19 October 2008.
Edited by Jeff Burnz, bekasu. Log in to edit this page.

To create your sub-theme first make a copy of the /genesis_SUBTHEME/ directory.

The best place to save your new sub-theme is: sites/all/themes/

The new sub-theme does not have to be inside the /genesis/ directory, as this is optional in Drupal 6.

The new sub-theme folder contains the following files & directory:

  • genesis_SUBTHEME.css
  • ie.css
  • page.tpl.php
  • template.php
  • favicon.ico
  • screenshot.png

The Sub-theme Folder /genesis_SUBTHEME/

Change "SUBTHEME" to your theme name e.g. /genesis_mytheme/

Change "SUBTHEME" to your theme name e.g.

Inside the .info file change:

  1. The theme name.
  2. The description.
  3. The stylesheet name to match the name of your theme.

Heres a sample of the code you will see when you open up the file, you can easily see where you need to change the details.

  ; Change the name, description and stylesheet file name to 
  ; match your new themes name.
name          = Genesis SUBTHEME
description  = My Kickn' Sub-theme

  ; Change the Stylesheet name to your themes name. E.g genesis_mytheme.css
stylesheets[all][] = genesis_SUBTHEME.css

genesis_SUBTHEME.css (the actual file)

Change "SUBTHEME" to your theme name e.g genesis_mytheme.css. This is the main CSS file for your theme and the one you will add the majority of your modifictions to.


Add your IE hacks to this file, but do not change what is already there.

page.tpl.php - Set the Layout

The main thing to do here is change the layout. By default the layout is genesis_1. If you are not familar with the layouts open up the layout.css file in the base theme and read the comments, also see this screen-shot of all 7 layouts.

To change the layout select the ID selector that matches your preferred layout and change the in page.tpl.php;

Only local images are allowed.

Save and upload the file and viola, the layout will automagically change.

You can play around with this simply by changing the last character to a number between 1 and 7, e.g genesis_2, genesis_3 etc.

Fluid or Fixed Width

In genesis_yourtheme.css file look for lines 31 - 47, you'll see this, which is quite self explanatory:

 *                     Width Setting
	* Over ride the default width (80em - see layout.css).
	* 80 * 12 = 960px
	* Genesis supports both Fluid and Fixed width values.
	* For a Liquid layout use precentages, e.g
	* .width {width: 85%;}
	* For Fixed width theme, use ems or pixels, e.g
	* .width {width: 960px;}
	* .width {width: 80em;}
.width {width: 80em;}

Sub theme preprocess functions

If you need to use a preprocess funtion open the template.php file in your new subtheme (one is included by default) and rename the function using your theme name e.g. mytheme_preprocess_page.

Genesis borrows this code from the Zen theme, because its darn great (including the theme_hook code).

This follows the standard Drupal convention of themeName_preprocess_hook.

Looking for support? Visit the forums, or join #drupal-support in IRC.