While building a custom theme from scratch is great, most themers prefer to use starter themes as the base for their designs. Starter themes save time and effort as we do not have to perform tedious repetitive tasks and can rely on a tried and tested structure to use as a foundation for our theme.
In this recipe, we will be looking at creating a theme based on the most popular of all starter themes available on drupal.org, Zen.
Download the theme from http://drupal.org/project/zen and install it following the instructions in the first recipe from Chapter 1, Drupal Theme Basics.
The Zen theme provides a starter kit which can be used to kick-start our theme.
- Navigate to the newly installed Zen theme's folder at
sites/all/themes/zen. Copy theSTARTERKITfolder inside it. - Paste this folder into
sites/all/themes. Rename the folder to the name of our new theme which, in this case, ismyzen.
- Within this folder, rename the file
STARTERKIT.info.txttomyzen.info. - Open the
.infofile in an editor. - Update the name field to the name of the theme which in this case is My Zen.
- Update the description field to My custom zen sub-theme.
- Save and exit this file.
- Open
template.phpin an editor and replace all occurrences ofSTARTERKIT_withmyzenusing the find and replace all function. - Save and exit this file.
- Repeat the above find and replace operation for the file
theme-settings.phpas well. - Save and exit this file.
Visiting the theme administration page at admin/build/themes (Home | Administer | Site building | Themes) should now display our new theme. Screenshots, favicons, and other niceties can be configured just like for any other theme.
The Zen theme contains a folder named STARTERKIT which is effectively a skeleton theme containing files and folders which can be readily customized to create a new theme. Once we have made a copy of this folder and renamed its .info file with the name of our theme, Drupal will recognize our new entry, which is now registered as a sub-theme of Zen as seen in the following screenshot.
Once enabled, the front page of the site will look something like the following screenshot. It is worthwhile comparing the screenshots in this recipe with those from the Creating a theme from scratch recipe earlier in this chapter. The essential difference is that we have a slightly fleshed-out skeleton to work with when we use Zen with a lot of the right pieces already in the right place.
The Zen theme comes with a plethora of settings and documentation which can at times, be a little overwhelming. But the rewards of familiarizing ourselves with them are worth our time.
We can confirm that this is a sub-theme of Zen via its .info file which specifies that
base = zen
As mentioned in the last chapter, if we need another theme similar to myzen, we can create one with base = myzen and save ourselves a whole host of repeated operations.
Just about every folder which comes with Zen contains a README.txt file which is filled to the brim with copious documentation. It is a good idea to always read through these files. prior to diving in head-first