Drupal theme hacking - creating a sub-theme
In a previous blog post I introduced the basics of how Drupal themes work. Let's dig a bit deeper and create our own sub-theme. What you need, is a working Drupal environment and at least one custom theme installed in
sites/all/themes. During this tutorial I will create a sub-theme for the Colourise theme. If you want to use a different starting theme, the explanation below should still apply (apart from the name of the parent theme).
The sub-theme I want to design is based on the Colourise theme, and will be used for my ShutterFreak.net website, hence the very original theme name “ShutterFreak Colourise”
The first step in creating a Drupal theme (or a Drupal sub-theme), is creating a theme directory in
sites/all/themes. If you manage a theme and all of its subthemes, then it makes sense to create the sub-theme directory as a subdirectory of the parent theme. This is not at all a hard requirement. I decided to create the sub-theme directory on the same level as the parent theme's, hence the “ShutterFreak Colourise” theme resides in
Next we have to create the ‘theme info file’ in the theme directory. I named this file
shutterfreak_colourise.info. The format of this file is “KEY = VALUE”. Lines that start with a semicolon (‘;’) are comments. At the very minimum, this file should contain this:
; $Id: $ name = ShutterFreak Colourise description = Dark tableless design with valid XHTML/CSS, based on the Colourise theme. version = 0.1 core = 6.x engine = phptemplate base theme = colourise
What does this mean?
$id: $is a CVS or SVN placeholder. When this file gets checked in, this placeholder will automatically be replaced with basic versioning and tracking information from the source code control system. Since this line starts with a semicolon it is treated as a comment by the parser.
namespecifies the human readable name of the theme. This name appears in
descriptiongives basic information about the theme. If it depends on another theme, make sure to specify this here, preferably with a link to the parent theme.
versionis the version of your sub-theme.
corerepresents the core Drupal version your theme works for. For Drupal 6, this value is
enginerepresents the theme engine that applies to this theme. The built-in Drupal theme engine is
base themeis the most important statement here: it specifies the relationship between the “ShutterFreak Colourise” theme and the parent theme:
The last finishing touch you may want to do, is adding a custom favicon. There are various on-line resources that accept an image and will transform it for you into a valid
favicon.ico file. The favicon for your theme must reside in the theme directory. In my situation it resides at
Now it is time to try out your first sub-theme: navigate to
admin/build/theme, enable your theme, and behold! Now you can start playing around with blocks and position them in your theme.
In a next post we'll dig still a bit deeper in how to develop a Drupal theme. Time to write some PHP code by then