Drupal 6 Theming Cookbook

Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes

• Take control of the look and feel of your Drupal website
• Tips and tricks to get the most out of Drupal’s theming system
• Learn how to customize existing themes and create unique themes from scratch
• Part of Packt’s Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

Including a CSS file in a theme

This recipe details the steps involved in adding a CSS file to the theme via its .info file. In this case, we will be adding a CSS file to the mytheme sub-theme which we created in the previous article.

Getting ready

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.

How to do it…

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

If the CSS file is stored along with other stylesheets in a sub-folder named css, the syntax would include the relative path to the file as follows: stylesheets[all][] = css/mytheme.css.

Once done, save the file and exit the editor. Since we have modified the .info file and introduced a new file, our changes will not take effect until the theme registry is rebuilt. Therefore, clear the Drupal cache and view the site to confirm that our new stylesheet has been included correctly. The theme should now display all text in brown.

How it works…

Drupal checks the .info file and notes that we have declared stylesheets using the stylesheets variable. The syntax of this variable is similar to that of an array in PHP. The all index in the syntax represents the media type as used in CSS declarations.

The next screenshot displays a section of the source code of a page which confirms the inclusion of the new stylesheet, mytheme.css. We can also see that our sub-theme is including the stylesheets declared by its base theme—Garland—as well as its own stylesheets.

In the preceding screenshot, we can see that Drupal references each stylesheet along with a query string. For example, mytheme.css is included as mytheme.css?e. This rather quirky suffix is a trick used by Drupal to ensure that browsers do not use stale copies of a cached CSS file while rendering our site.
We can test this by clearing the Drupal cache and viewing the source code once again. Now, our stylesheets should have a different suffix— perhaps, something like mytheme.css?A—thereby tricking browsers into believing that these are different files and using them instead of their cached copies.

There’s more…

One of the advantages of using a sub-theme is that we can easily override elements of the base theme. This includes stylesheets as well.

Overriding the base theme’s stylesheet

If the base theme includes a stylesheet named layout.css, adding a stylesheet of the same name in the sub-theme will override the base theme’s stylesheet. In other words, Drupal will include the sub-theme’s stylesheet instead of that of the base theme.

Enabling CSS optimization

CSS optimization in Drupal is accomplished through two steps—aggregation and compression. This optimization provides a significant boost to performance both on the server as well as for the user. This recipe details the steps to be performed to enable this feature in Drupal.

Getting ready

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.

How to do it…

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:

Public File system
As the screenshot states, the optimized CSS file is cached using Drupal’s file system which needs to be set to public to ensure that the user’s browser can access and download it. Therefore, it is necessary to set Download method of the Drupal file system to Public. This can be done via admin/settings/file-system (Home | Administer | Site configuration | File system).

Once done, click on the Save configuration button at the bottom of the page to save our changes.

How it works…

Aggregation involves the collating and joining of multiple CSS files into a single stylesheet, while compression reduces the resulting file to a smaller size by trimming out unnecessary elements such as whitespace. The former helps in reducing the number of files that the server has to load and serve. The latter saves on bandwidth and time.

The previous and following screenshots demonstrate CSS optimization at work. The previous screenshot is a snippet of the HTML source of a Drupal page running on a stock Garland theme. As displayed, this involves the server performing look-ups and serving eight separate CSS files—seven for all media types and a print stylesheet—for each and every page served. If this is extrapolated to sites of greater complexity, the number of files and, consequently, the server and bandwidth load, begin to take on significant proportions and can seriously impact performance.

The preceding screenshot is of the same page as before with one difference—CSS optimization is now turned on. The number of CSS files has now been reduced to only two—one for all media types and the other being the print media type. These stylesheets are stored in the files folder and are cached copies. As a result, each page load now only involves the webserver serving two files instead of the previous eight.

There’s more…

CSS optimization and other performance improvements should be used with care.

When to use it

CSS optimization is only necessary to improve performance on production sites. Enabling it beforehand will only hinder theme development.

Enabling optimization can sometimes be handy when working on sites which are using more than 31 stylesheets—a not too infrequent occurrence on sites using a plethora of modules and an elaborate theme—as this is an upper-bound for Internet Explorer. IE will only load the first 31 stylesheets and ignore the rest. Drupal’s CSS optimization feature reduces this number to one, thereby conveniently working around the issue. An alternative is to use modules such as IE CSS Optimizer (http://drupal.org/project/ie_css_optimizer).

Other optimizations

Other optimization settings can also be configured on the performance page. These include page caching, block caching, and JavaScript optimization. It is also worthwhile browsing the caching and performance modules that are available as contributed modules via http:// drupal.org/project/modules under the category Performance and scalability.

Creating the mysite module to hold our tweaks

In the course of developing our site, we will frequently come across situations where various elements of the site need to be tweaked in PHP using Drupal’s APIs. While a lot of theme-specific cases can be stored in template files, certain tweaks which are theme-agnostic require that we store them in a module to ensure that they are available to all themes.

This recipe covers the creation of a module to hold all these bits and pieces.

Getting ready

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

How to do it…

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

1. Create a folder inside sites/all/modules named mysite where mysite refers to the name of our site.
2. Create a file named mysite.info within the mysite folder.
3. Edit this file and add the following code inside:

   name = Mysite
   description = A module to hold odds and ends for mysite.
   core = 6.x

4. Save the file.
5. Create another file named mysite.module which will hold our odds and ends.
6. Save and exit the editor.
7. Finally, enable the module via the module administration page at admin/build/ modules (Home | Administer | Site building | Modules).

How it works…

Just as with themes, modules require a .info file which provides information to Drupal on compatibility, dependencies, and so on. Once Drupal ascertains that the module is compatible with the version installed, it loads the .module file of the same name and processes it accordingly.

We can test if the module is working by adding a snippet such as the following:

<?php

/**
* Implementation of hook_init().
*/
function mysite_init(){
// Display a message on every page load.
drupal_set_message(“Welcome to MySite!”);
}

As the comment suggests, the preceding snippet will display a welcome message on every page load.

There’s more…

The Drupal community routinely comes up with modules to ease the pain of development.

Module builder

There’s a module available named Module builder which can be used to generate a skeleton of a general module. This can subsequently be populated as per our requirements. It is available at http://drupal.org/project/module_builder.