Base Themes & Sub Themes

a presentation by Geoffrey Roberts

g.roberts@blackicemedia.com

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
as
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

Inheritance

Do nothing: stylesheet will automatically be added

// basetheme style.css

p {
  font-size: 14px;
}
		

Overriding

Use a stylesheet with the same relative path

// yourtheme style.css

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

Disabling

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

Regions

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

References:

Get themes: