Drupal theming:
from scratch, mashup or
subtheme?

So it's time for you to lay down something original using Drupal, gone are the days of picking a contrib theme. You want inflict some of your own design onto the waiting www. What plan of attack should be implemented?

The main options are:

  1. Find a theme which get's close to what you want then just wade in to the css and mash it up.
  2. Find a theme which get's close to what you want and add your own css files to make your modifications.
  3. Find a theme which can be used a good basis for what you want and make a subtheme.
  4. Build your own theme from scratch.

I'm going to tell you why 3 is better than 2+1 and I'll save talking about 4 for another day.

Options 2 and 1 are ok really, and in all honesty it's how most of us start out. It's mush easier to modify something that already exits than to start from scratch. As long as you get a site which resembles what you initially set out to do then who cares?
There are a couple of major disadvantages to these methods, notably:

  • If a newer version of the base theme is released you can't upgrade without finding all your modifications and re applying them to the newer version.
  • It is extremely difficult, even with good commenting to keep track of all your changes.

So what is so good about a subtheme? The main advantage is that the base theme remains completely unmodified, meaning that you can update when you have to with complete freedom. Secondly, all your changes are all in one place, not wrapped around existing code, so it's much easier to see exactly what you were up to at 3am drunk on coffee the night before.
Importantly, you only make changes where needed, if a css class isn't declared in your subtheme then drupal just looks for it in the base theme and if it's not declared there drupl looks for it in the default drupal css. Same goes for template files.

Building your subtheme

At it's most basic all a subtheme needs to consist of is an existing base theme, a folder in your themes directory called whatever you want your theme to be named and a .info file of the same name in that folder.

I'm going to call my new subtheme simonelliott and use NineSixty as my base theme. To begin with my themes folder will look something like this:

  • sites/all/themes/ninesixty/ninesixty.info
  • sites/all/themes/ninesixty/ all the other theme files
  • sites/all/themes/simonelliott/simonelliott.info

Your .info file should include at least the following as a minimum.

  1. ; $Id:
  2.  
  3. name = Simon Elliott
  4. description = My new subtheme
  5. core = 6.x
  6. engine = phptemplate
  7. base theme = ninesixty

The first 2 lines provide the name and description of your subtheme for the theme selection interface at /admin/build/themes in your drupal install. The third and fourth tell drupal which version of drupal and which templating engine your theme has been designed for. The last line simply states the base theme to which your subtheme belongs.

With this file in place you can now enable your theme at /admin/build/themes although it will be identical to your subtheme.

The first thing you are likely to want to do is modify some css, this requires two things, first we need to create a new css file in your subtheme folder then we need to tell drupal about your new css file.

Create an empty file sites/all/themes/simonelliott/simonelliott.css

Then add the following to simonelliott.info anywhere at the bottom

  1. stylesheets[all][] = simonelliott.css

You will need to flush your cache for drupal to see these changes.

You can now add all your css changes to your new css file and they will override any existing css.

If you need to make changes to the template files in your base theme just make a copy of the original and put it in your subtheme folder and hack away. You will need to flush your drupal cache everytime you add a new code file to your subtheme.

Drupal will look in your subtheme folder for page.tpl.php first, if it doesn't exist there then drupal defaults to your base theme folder and if it still can't find it drupal will use the default page.tpl.php.

If you want to add extra regions to your site just declare them in your subtheme .info file and use them as normal in your template files.

Please be aware if your theme or subtheme uses only the default drupal regions, left, right, content, header, and footer these are not declared in the .info file. If you want to add an additional region to these defaults then you have to declare the defaults too.

This will give the default regions

  1. ; $Id:
  2.  
  3. name = Simon Elliott
  4. description = My new subtheme
  5. core = 6.x
  6. engine = phptemplate
  7. base theme = ninesixty
  8.  
  9. stylesheets[all][] = styles/simonelliott.css

This will give the default regions plus one custom region

  1. ; $Id:
  2.  
  3. name = Simon Elliott
  4. description = My new subtheme
  5. core = 6.x
  6. engine = phptemplate
  7. base theme = ninesixty
  8.  
  9. ;Regions
  10. regions[left] = Left sidebar
  11. regions[right] = Right sidebar
  12. regions[content] = Content
  13. regions[footer] = Footer
  14. regions[header] = Header
  15. regions[content_top] = Content top
  16.  
  17. stylesheets[all][] = styles/simonelliott.css