We will be covering the following recipes in this chapter:
- Clearing the theme registry
- Creating a theme from scratch
- Creating myzen, a Zen-based theme
- Choosing a CSS layout for myzen
- Overriding Zen template files with myzen
- Adding a custom region to myzen
- Adding a background image to the theme
- Adding a conditional stylesheet in Zen
- Modifying myzen's theme settings
While, as detailed in the previous chapter, sub-themes of core and contributed themes are convenient and efficient in modifying and reusing elements of their base themes, circumstances often require a completely unique approach specific to our site. Custom themes are the solution for websites which demand a fresh look, using complex layouts, or need so much customization that it would be prudent to start with a clean slate.
Custom themes are the equivalent of handcrafted pieces of art as the themer controls every piece of the puzzle from a design or implementational point of view. This includes setting up the theme using .info files, choosing the layout, implementing it in a page template, adding regions, styling nodes using node templates, blocks using block templates, and so on. But over time, developers have identified a list of common tasks, characteristic layouts, and file and folder hierarchies which are logical, efficient, and promote reuse. This has evolved into what have been dubbed starter themes, themes upon which custom themes are built, usually as sub-themes.
The most popular starter theme for Drupal is Zen. As advertised on its project page, the Zen theme is a flexible standards-compliant and semantically correct XHTML theme that can be highly modified through CSS and an enhanced version of Drupal's template system. It is designed in modular fashion making it straightforward to change layouts, override templates and theme functions, and to add or remove features. Additionally, the Zen theme comes with extensive documentation within each file which make things all the more convenient.
With respect to CSS, Zen maintains a number of well documented CSS files segregated by functionality or location. For example, layout rules are contained within a dedicated layout.css (or similar) file and page backgrounds are styled within page-backgrounds.css and so on. This makes it convenient when it comes to managing and tracking code changes.
In addition to the standard files we have encountered while customizing themes in earlier chapters, a Zen-based theme contains the following file and folder structure:
File/folder name Purposetemplate.phpA file where theme overrides and other theme and engine-related code is placed.theme-settings.phpA file where settings particular to a theme can be placed. These settings are usually exposed on the theme's configuration page.css/A folder to store stylesheets.images/A folder to store images used in the theme.images-source/The folder where the source files for the optimized images in the images folder are available.js/A folder to store JavaScript files.templates/A folder wheretpl.phptemplate files are to be placed.
There are a number of other starter themes available on drupal.org. Some of the more popular ones include Fusion (http://drupal.org/project/fusion), Blueprint (http://drupal.org/project/blueprint), Ninesixty (http://drupal.org/project/ninesixty), and Adaptivetheme (http://drupal.org/project/adaptivetheme). We will be looking only at the Zen starter theme in this book.