Creating a sub-theme based on a core theme

This recipe details the steps involved in creating a sub-theme of an existing core theme.

Getting ready

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.

How to do it...

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

  1. Create a file named mytheme.info inside the mytheme folder.
  2. Edit this new file and add the following code inside it: 
    name = Mytheme
description = My new sub-theme (CSS, phptemplate, 3-col)
base theme = garland
core = 6.x
engine = phptemplate
stylesheets[all][] = mytheme.css

    Note

    It is useful to add an informative description field as it will be visible in the theme administration page. Specifying the key characteristics of the theme can save time and effort as the administrator gets a quick overview of the design.

  3. Save the file.
  4. Create an empty CSS file named mytheme.css inside the mytheme folder.
  5. Next, visit admin/build/themes (Home | Administer | Site building | Themes) to check if our new theme is available.
    How to do it...

As the preceding screenshot attests, the theme administration page should now include our new theme—Mytheme. Enabling it should confirm that it is more or less identical to Garland and can now be extended further as per our requirements.

How it works...

Drupal uses the .info file to learn about our new sub-theme. The name and description variables, rather unsurprisingly, represent the name of the theme and a description that customarily includes details about the layout of the theme.

The base theme variable denotes the parent theme which our sub-theme is based on. By using this variable, we are informing Drupal that it should use the layout and styling of the base theme—in this case Garland—unless we indicate otherwise. This process is commonly referred to as overriding the base theme.

Finally, the core variable denotes the compatibility of our theme with Drupal 6, while engine indicates that the theme uses PHPTemplate as its templating engine. PHPTemplate is the most widely used system. Other engines, which include Smarty, PHPTal, and Xtemplate, are seldom used and themes using them are few and far between.

Note

The stylesheets variable declares the CSS stylesheets to be included with the theme. When it comes to sub-themes, the stylesheets of base themes are automatically included unless explicitly overridden. However, due to a quirk in Drupal's theming system, base theme stylesheets are not inherited by the sub-theme unless the latter declares at least one stylesheet of its own. We have worked around this by including an empty stylesheet named mytheme.css.

There's more...

Drupal core provides an excellent example of a sub-theme based on a core theme.

Garland and Minnelli

Garland already has a sub-theme named Minnelli which is in a folder titled minnelli inside themes/garland. The difference between the two is that Garland uses a fluid layout while Minnelli is a fixed-width version of the same theme.

Chaining

Sub-themes can be chained, if necessary. For example, our mytheme could have used Minnelli as the base theme even though it is a sub-theme itself.

上一章目录下一章