How to create a subtheme in Drupal 6

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.4 (54 votes)

Comments

thanks!

thanks for the informative overview. well written and clear.
cheers!

Thanks

Exactly what I needed to know.

Excellent! but...

Thank you for the excellent step-by-step guide! It answered some of my questions, but left me with some old ones...

Now that both the main theme and sub-theme are ready to go, how does one choose which theme to use when creating content???

For example:

Home | About Us | Products | Contact

Both the "home" and "about us" pages use the main theme but the "products" and "contact" pages use the sub-theme.

How do you select which theme to use for which page(s)?

Thanks,

TC

Multiple themes

There is, I think, a Taxonomy Themes module which allows you to configure multiple themes for a site based on a taxonomy element.

Unclear on the question

TC, Robert:

Are you looking to select different themes for the display of different pages? Or is your site apparently using the main theme for some pages and the subtheme for others?

If you wish to use multiple themes on your site to display specific pages differently, this is not necessarily a feature of subthemes. I'd look to contributed modules or other themeing strategies to accomplish what you are looking to do. It all depends on how regular your use-case will be, i.e. will you be theming all pages with a specific taxonomy term or of a specific content type -- or will you want random nodes/pages themed differently...

If your site seems to be using the main theme on some nodes/pages and the subtheme on others, this is most likely a templating situation, I think. In other words, are the pages that are showing the main theme of a different content type than those of the other pages? You could have a content type specific template file in your main theme that is not overridden in the subtheme. You would need to post more information about the theme you are using and what template files exist therein.

-barry

parent theme!!

Drupal is really hard to work out at the beginning but as you go on with it, I must say it is the best one to use in the sites. I was having problem in How to add other sub theme while using Drupal but I found your post to be really helpful.As said above in No.3 regarding defining a sub theme. Does this make any difference in Parent Theme too?

how can i switch the

how can i switch the subtheme based on the language variable? I'm trying to change out the images for each language using subthemes
each subtheme has a css with the different language image locations.

good one

It was a little hard at time to follow everything but I think I managed to understand it. Thanks for the info. I'll be trying this as soon as I get home.

Different theme for different pages ...

I need select different theme for different pages [show temes, buy skins] etc., see demo, etc. But how....?

Thanks

I read the instructions on the Drupal website, but wasn't clear on setting up the regions.

Thanks

Really helpful!!

Thanks

This is the first post i hv read for subthemeing, there might be more posts for the same but this was the basic and easier one that i understood in one go without any probs!

Thanks once again,
Shahid saleem shah

It was a little hard at time

It was a little hard at time to follow everything but Hispanic Grants I think I managed to understand it. Thanks for the info. I'll be trying this as soon as I get home.

It was a little hard at time

It was a little hard at time to follow everything but wolff parkinson white I think I managed to understand it. Thanks for the info. I'll be trying this as soon as I get home.

This is the first post i hv

This is the first post i hv read for subthemeing, there might be more posts for the same but this was the basic and easier one waterhouse friderichsen syndrome
that i understood in one go without any probs!

I read the instructions on

I read the instructions on the Drupal website, Prilosec but wasn't clear on setting up the regions.

Post new comment

  • Allowed HTML tags: <a> <img><b><i> <em> <h1> <h2> <h3><h4><h5><h6> <sub> <super> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <p><sup>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options