Drupal 6 Theming Cookbook: Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes

It will be useful to navigate to the Garland folder at themes/garland to browse and view the files inside a typical, fully featured theme. Garland also uses the PHPTemplate theming engine which is the most commonly used and recommended engine across Drupal's core and contributed themes.

The following table outlines the types of files typically found inside a theme's folder and the naming conventions to be followed for some of them.

Create a folder named mytheme inside sites/all/themes. This name is usually also the name of the new theme and it is best to keep things uncomplicated by not using spaces and special characters. While mytheme is suitable for the purpose of this recipe, it will be a good idea to give the theme a unique and pertinent name based on its design and use. It is also important to ensure that there are no name-conflicts with other existing core or contributed themes.

A sub-theme of a core theme can be created through the following procedure:

We will be using the mytheme sub-theme which was created in the previous recipe.

As we are dealing with a sub-theme here, it is by default relying on the template files of its base theme. To override the base file used to theme the layout of a node, copy the node.tpl.php file from the base theme's folder—themes/garland—to the sites/themes/mytheme folder. Opening the new file in an editor should bring up something similar to the following:

<?php
// $Id: node.tpl.php,v 1.5 2007/10/11 09:51:29 goba Exp $
?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
...

Once the theme is just about ready to go, visit the front page of the site to take the screenshot. Since we are providing a snapshot of the theme, temporarily swap the name of the site with the name of the theme. It might also be useful to prepare some example content for display on the front page to obtain an accurate representation of the style and layout of our theme.

Adding a screenshot for our theme can be done via the following steps:

Create a CSS file inside the theme's folder named mytheme.css and add the following example rule to it:

* {
color: #996633 !important;
}

This rule should override and change the color of all text on the page to a brownish hue.

Adding a CSS file to a theme is best accomplished via its .info file. Navigate to the theme's folder at sites/all/themes/mytheme and open the mytheme.info file in an editor. Add the following line to this file to include our CSS:

stylesheets[all][] = mytheme.css

Once done, save the file and exit the editor. Since we have modified...

CSS optimization is a requirement only when a site is ready to go live. Until such time, it is recommended that it be left switched off as CSS changes during development will not take effect unless the Drupal cache is cleared.

Optimization and other performance-related features are sequestered within admin/settings/performance (Home | Administer | Site configuration | Performance). This performance configuration page should have a section titled Bandwidth optimizations which should contain options for CSS and Javascript optimization. Look for the setting named Optimize CSS files and set it to Enabled as in the following screenshot:

Create a folder inside sites/all named modules. This is where custom and contributed modules are usually housed.

The following list details the procedure involved in creating a module named mysite to hold our theme-agnostic customizations and other odds and ends:

We will be adding the CSS to the mysite module as created in the previous recipe. Create two CSS files named mysite.css and mysite_special.css inside the mysite module's folder and populate them with some sample rules.

Add the following code to the mysite module:

/**
* Implementation of hook_init().
*/
function mysite_init() {
// The path to the mysite module.
$path = drupal_get_path('module', 'mysite');
// Include mysite.css.
drupal_add_css($path . '/mysite.css');
// Include mysite_special.css, but do not preprocess.
drupal_add_css($path . '/mysite_special.css', 'module', 'all', FALSE);
}

Save the file and visit the site to check if the two CSS files are now included.

The drupal_add_css() function is used to add CSS files from a module. Its syntax is as follows:

drupal_add_css($path = NULL, $type...

As we have seen in other recipes in this chapter, a number of sites use an "odds and ends" module to handle tweaks and customizations particular to the site. We will be using the mysite.module created earlier in this chapter to hold our customizations. It is assumed that the module is available and already enabled.

Open the mysite module file and paste the following code into it:

/**
* Implementation of hook_init().
*/
function mysite_init() {
global $custom_theme;
// An array of themes for each day of the week.
// These themes do not have to be enabled.
$themes = array();
$themes[0] = 'garland';
$themes[1] = 'minnelli';
$themes[2] = 'bluemarine';
$themes[3] = 'pushbutton';
$themes[4] = 'chameleon';
$themes[5] = 'marvin';
$themes[6] = 'mytheme';
// Get the current day of the week in numerical form.
$day = date("w...

Ensure that the color module is enabled in admin/build/modules (Home | Administer | Build | Modules). Since we are going to change the color scheme of the Garland theme, ensure that it is set as the current theme.

Colorizing the Garland theme can be accomplished by following these steps: