Drupal theming for designers

Intended Audience

This article has web designers, developers, and anyone who has http://www.csszengarden.com in their bookmarks, firmly in its sights. We want to bring your fabulous skills to a fabulous web content management platform: Drupal.

Drupal has never suffered from having too many professional designers offering Drupal themes. This shortage has intensified as the use of Drupal has grown. Good looking themes go a long way towards raising Drupal’s profile, and supporting that growth. Take a squiz at our presentation on Drupal theming, and jump into the "great Drupal great themes" postitive feedback loop!

How this article is presented/how to read this article

Sections flagged with a indicate that a your participation is required (e.g. testing a theme, configuring something, etc.)

Sections flagged with a indicate if you’re not sure how to do something, further details are available, but they’re external to this article.



It is recommended that you are able jump in to the 'participation required' sections, by:

Drupal Theming – Part 1 - Introduction

How does Drupal enable theming

Drupal uses theme engines, a theme engine is a layer that abstracts functionality between the Drupal core and pluggable Drupal themes. By default, Drupal 5.x installs the Drupal-specific PHPTemplate engine. Other theme engines may be used by installing add-on modules. more on other theme engines

This diagram demonstrates how theme engines plug into Drupal core, and individual themes (i.e. the ones you will create) rely on the theme engines.

In the Drupal-specific PHPTemplate world, the only must-have of a theme is a page.tpl.php file. The other files are not mandatory, and we will look at what they do later.

First, lets inspect page.tpl.php

As you can see, page.tpl.php provides the HTML/XHTML framework for your theme. The highlighted PHP tags are either print, or conditional (if-then-else) print, pre-defined variables (discussed in next section).

Create a new theme by:

  • Creating a folder named ‘simplest_theme_demo’ in /sites/all/themes
  • Downloading the following page.tpl.php into your newly created folder
  • You should have:

Select the theme for your site and look at the code it generates:

By comparing page.tpl.php and the generated code side by side, the extra tags you will need to accommodate in your stylesheet become obvious:

The generated code which has been highlighted in green, indicates sections generated from node.tpl.php. We will discuss node.tpl.php next.

By creating files using the Drupal naming convention, you are able to further control the display of teasers (node.tpl.php), full content (node.tpl.php), comments (comment.tpl.php), and blocks (block.tpl.php), and these will be discussed in the section.

Get stylish

As stated before, all you need to create a Drupal 5.x theme, is page.tpl.php, but as a designer, you're itching to add some style. By dropping a style.css file into you're theme's folder, you're ready to begin theming. For your convenience, we've created a starter theme for you: bare_bones.zip. Edit the bare_bone's style.css, or replace it with you're own.

All themed up and nowhere to go

Some of you will want to show your theme off on your own/your buddy's/your mom's Drupal site. Some will step through the CVS hoops to get it listed on http://drupal.org/project/themes. And for those of you who are excited by an opportunity to expand your premium theme portfolio, stay tuned, exciting things are headed this way!

That's right, we're Drupalling away to make a theme exchange happen!

Drupal theming for designers, continued


2014, does the above coding still apply?

Guest (not verified) | Wed, 07/23/2014 - 16:22

I personally did not saw many developers or designers offering drupal theme i do not know why its happen because drupal is a thing with different features.

john (not verified) | Wed, 09/03/2008 - 18:48

Your site is great and I really appreciate it! I have always enjoyed reading your site.

Guest (not verified) | Wed, 09/03/2008 - 15:24

Zen is a well supported and documented starting point for Drupal theming, as others have mentioned here. Also, I'm a fan of the <a href="http://drupal.org/project/hunchbaque">Hunchbaque theme</a> for simple stuff.
<a href="http://www.topnotchthemes.com">Premium Drupal themes</a>

Guest | Wed, 07/23/2008 - 04:17

Great information. I am just getting into Drupal and theming sites for my <a href="http://www.furociousdesign.com/">Orange County Website Design</a> company, and I'm learning a lot of good things from posts like this. It's great to work with CMS's that are robust and have many options like Drupal does. Keep the great design information coming and I'll stay tuned in. Cheers!

Guest | Sat, 06/21/2008 - 04:25

Thanks for putting this together. It might be helpful to others visiting the page to note that if you're using drupal 6.x you need to include a *.info file in the theme directory (e.g: simplest_theme_demo) described above.

There's more info about this here: http://drupal.org/node/171205

I think the simplest *.info file would be something like:

name = Simple
core = 6.x
engine = phptemplate

Guest | Sun, 03/16/2008 - 02:11

I've used yellow highlights in the page.tpl.php image to call attention to the PHP variables embedded in the HTML structure. I just discovered this article, written in September '07, that also inspects the anatomy of page.tpl.php in easily chewable chunks: http://www.nerdliness.com/article/2007/09/10/drupal-theming

em | Thu, 12/20/2007 - 13:57

Beginner Drupal themers were often pointed to Zen as a starting point, but for a long time, it was a full theme that required a lot of style elimination to get to a realistic starting point. A week after this post was blogged, Zen was updated, and has been freshly minimalist-ized! Now I can agree enthusiastically with other Zen referrers: http://drupal.org/project/zen

em | Thu, 12/06/2007 - 09:23