Community Documentation

D5 - How to build your own sub-theme.

Last updated March 24, 2011. Created by JohnAlbin on December 16, 2007.
Edited by Christopher Jam..., xjm, ronald_istos. Log in to edit this page.

Using Zen 5.x-1.x for Drupal 5:

  1. Copy the STARTERKIT folder and rename it to be your new sub-theme. IMPORTANT: Only lowercase letters and underscores should be used.

    For example, copy the zen/STARTERKIT folder and rename it as zen/foo.

  2. If you want a liquid layout for your theme, copy the layout-liquid.css from the zen folder and place it in your sub-theme's folder. If you want a fixed-width layout for your theme, copy the layout-fixed.css from the zen folder and place it in your sub-theme's folder. Rename the layout stylesheet to "layout.css".

    For example, copy zen/layout-fixed.css and rename it as zen/foo/layout.css.

  3. Copy the print stylesheet from the zen folder and place it in your sub-theme's folder.

    For example, copy zen/print.css to zen/foo/print.css.

  4. Copy the zen stylesheet from the zen folder and place it in your sub-theme's folder. Rename it to be the name of your sub-theme.

    For example, copy zen/zen.css and rename it as zen/foo/foo.css.

  5. Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurances of "STARTERKIT" with the name of your sub-theme.

    For example, edit zen/foo/template.php and zen/foo/theme-settings.php and replace "STARTERKIT" with "foo".

  6. Log in as an administrator on your Drupal site and go to Administer > Site building > Themes (admin/build/themes) and enable your new sub-theme.

    Optional:

  7. Modifying Zen core stylesheets: If you decide you want to modify any of the other stylesheets in the zen folder, copy them to your sub-theme's folder before making any changes. Also, be sure to edit the drupal_add_css() calls near the beginning of your sub-theme's template.php file.

    For example, copy zen/html-elements.css and rename it as zen/foo/html-elements.css. Then edit zen/foo/template.php and change drupal_add_css(path_to_theme() .'/html-elements.css', 'theme', 'all'); to drupal_add_css(path_to_subtheme() .'/html-elements.css', 'theme', 'all');

  8. Modifying Zen core template files: If you decide you want to modify any of the .tpl.php template files in the zen folder, copy them to your sub-theme's folder before making any changes.

    For example, copy zen/page.tpl.php to zen/foo/page.tpl.php.

  9. Themeing Drupal’s search form: Copy the search-theme-form.tpl.php template file from the zen folder and place it in your sub-theme's folder. In your sub-theme's template.php file, un-comment the phptemplate_search_theme_form() function.
  10. Further extensions of your sub-theme: Discover further ways to extend your sub-theme by reading Drupal's Theme Developer's Guide online at: http://drupal.org/handbooks

Comments

How to replace strings in a file

Easiest way to do it provided you got Linux or *NIX derivative OS (Mac OS X included):

sed "s/STARTERKIT/name_of_your_subtheme/g" template.php > temp; mv temp template.php;
sed "s/STARTERKIT/name_of_your_subtheme/g" theme-settings.php > temp; mv temp theme-settings.php;

or

perl -pi -e 's#STARTERKIT#yourthemename#g' *

If my comments have helped you, please pay it forward!
Use issue queues to discuss module issues - this will help your questions assist others (including yourself!) in future.
http://twitter.com/grobot ● www.giantrobot.co.nz

Multi-site install?

How does zen work with multi-site installs? I would like to create sub-themes that are not availableto all sites, but restricted to one of the multisites. Is it possible to have the core zen files in /sites/all/themes/zen, and a subtheme in /sites/sitename.com/themes/zen/subtheme, where /sites/sitename.com/themes/zen/ is empty?

If not, are there problems with installing two copies of zen, one for all sites, and one for the restricted sub-theme? Or do you recommend simply not installing zen in /sites/all/themes?

Multi-site on D5

This issue seems to be resolved on Drupal 6 - I didn't even realise it existed until I tried to duplicate my D6 procedure on D5.

I see you figured out a workaround after raising the issue here - http://drupal.org/node/256011

Would be good to have other methods (eg a working symlink setup?) suggested. While your solution of hosting multiple Zen installs is reported to work, it does mean having multiple copies of the same code on your system, so adds maintenance requirements.

If my comments have helped you, please pay it forward!
Use issue queues to discuss module issues - this will help your questions assist others (including yourself!) in future.
http://twitter.com/grobot ● www.giantrobot.co.nz