Base Themes & Sub Themes

a presentation by Geoffrey Roberts

Thursday, 17th March 2011

Theming in Drupal

Relies on overriding and inheritance

Original from Drupal API

function theme_breadcrumb($breadcrumb) {
  if (!empty($breadcrumb)) {
    return '<div class="breadcrumb">'.
    implode(' » ', $breadcrumb).'</div>';

Themed to use list items instead

function my_theme_breadcrumb($breadcrumb) {
  if (!empty($breadcrumb)) {
    return '<div class="breadcrumb">'.
    theme('item_list', $breadcrumb).'</div>';

Structure of a Theme

Extending Themes the Drupal Way

Can be extended: don't need to stand alone
Theme developers: you don't need to do all the work

If I have seen a little further it is by standing on the shoulders of Giants.
Isaac Newton

Base Themes & Subthemes

Follows the same principles of overriding and inheritance

Sub themes are to base themes
Modules are to Drupal core

Characteristics of Base Themes

Subtheming does require coding skill (HTML /CSS/PHP)

Examples of Base Themes

Examples of Subthemes

Building a Subtheme

A lot of good base themes come with documentation on creating subthemes
eg. Zen, Basic

Readme usually contains helpful info

Some base themes come with a starterkit directory or an example directory

.info File

Your subtheme will be named after your theme's directory

To create a subtheme, add the line
base theme = othertheme

Your base theme can be in any themes directory you like

CSS/JS Inheritance

A base theme can define its own stylesheets and scripts
Subthemes can either inherit, override or disable any of these


Do nothing: stylesheet will automatically be added

// basetheme style.css

p {
  font-size: 14px;


Use a stylesheet with the same relative path

// yourtheme style.css

p {
  font-size: 14px;
  color: red;


Override with an empty file

// yourtheme style.css

template.php File

Theming functions for your template start with the name of your subtheme

Note: If you started with a starterkit, don't forget to rename functions

eg. basic_preprocess_page becomes yourtheme_preprocess_page

Subthemes inherit theming functions in template.php from their base theme

Other inheritance rules

template files (.tpl.php)

Subthemes inherit template files from base theme

Screenshots & Logos

Subthemes inherit screenshots

Subthemes do not inherit logos


Subthemes do not inherit regions
They must be declared in the .info file

Colours & Advanced Settings

Subthemes do not inherit colours or advanced settings that the base theme declares

Additional Info


Get themes: