Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

How to create a subtheme in Drupal 6

Parent Feed: 

Creating a subtheme is a powerful and flexible way of theming in Drupal. Drupal 6 made implementing subthemes relatively easy to do. There are a few basic concepts to understand before starting, but once underway, creating a subtheme is a simple straightforward process. In this post, I'll outline the process for creating a subtheme. This is meant to be a quick primer, not an exhaustive tutorial on the elements and features of subthemes.

Before going further, I must acknowledge that this post borrows heavily from two posts currently available on Drupal.org. For further information, you can refer to:

Subtheme Concept

A subtheme is a child theme that borrows certain attributes from a parent theme. This allows you to use an established theme and a derivative of that theme both on the same site without needing to alter or duplicate the original theme.

When set up correctly, a subtheme inherits the following attributes from its parent theme:

  • All style sheets
  • All template files
  • All functions and overrides defined in the parent theme's template.php file (if it has one)
However, there are other key attributes that the subtheme does not inherit, including:
  • the parent theme's logo (logo.png)
  • regions (if the parent theme has custom regions)

Creating a subtheme

For the purposes of this post, we'll use an example of setting up a subtheme called "mysubtheme" that will be using an installed version of the contributed "framework" Drupal theme as its parent.

  1. Create a folder in your custom "themes" folder and name it the with the name you have chosen for your subtheme. Ex: mysubtheme
  2. Add a .info file to your subtheme folder. To define this as a subtheme, your subtheme folder needs text document named (using our example): mysubtheme.info
  3. Add the following elements to your .info file:
    name = mysubtheme
    description = any descriptive text you wish
    core = 6.x
    base theme = <(folder)name of any core or contributed theme or subtheme, e.g. framework>
    stylesheets[all][] = mysubtheme.css

    This defines the name of your subtheme, any description you want (shows up on the themes admin page), the reference to the base theme from which you want to inherit, and a stylesheet for defining the styles from the parent theme and other CSS that the subtheme will be overriding.
  4. Set up your regions. If the parent theme has established a set of custom regions in its .info file (many do), you will need to copy the region settings from the parent's .info file and add them to your subtheme's .info file. Otherwise, you will not be able to use these regions in your subtheme. For the contributed "framework" theme in our example, this would look like:
    regions[left] = Left sidebar
    regions[right] = Right sidebar
    regions[content] = Content
    regions[header] = Header
    regions[nav] = Navigation
    regions[footer] = Footer
    This is a feature, not a bug. It allows you to have a totally different set of regions for your subtheme if you have the need for this. If you do, just define the regions you wish to have using the "regions [regionname] = RegionLabel" syntax. If you define new regions for you subtheme, you will also need to create a new page.tpl.php file which prints these regions and place this in your subtheme folder.
  5. Add any necessary template files. As mentioned above, your subtheme will inherit the parent theme's tpl.php template files. If you wish to override a specific template file -- as in the regions example in 4 above -- add the specific tpl.php file to your subtheme folder. Alter this file as you wish. It will override the corresponding template file of the same name in the parent theme.
  6. Add your subtheme's overriding CSS file (ex. mysubtheme.css) to the subtheme folder. Use this file for all your subtheme's style overrides. You can, of course, define and add additional CSS files for your subtheme. If you wish to have multiple custom stylesheets, be sure to add reference to them in your .info file.

Having completed these steps, your subtheme should be up and ready for use. Visit your themes admin page to enable the theme.

Happy theming!

Your rating: None Average: 4.3 (56 votes)

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web