Phone: (Australian callers) 02-8003-4624
(international callers) +61-2-8003-4624
Drupal theming for designers
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:
- having a local install of Drupal v 5.x ( install Drupal)
- being able to install a Drupal theme, and using the web admin dashboard to enable it ( see steps 1 - 3 to install and enable a theme)
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.
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!