andrew.eatherington : websitemaker

^{Picture: Wikimedia Commons}

In the article 'Styling a Drupal Site : Ready to Wear' I introduced the notion of styling, or theming, a Drupal site with a ready made theme. Another approach to styling is to develop your own design by using a 'vanilla' theme or a 'framework' theme as it's base. This gives you a plain, 'no frills' site that can be developed according to your design requirements.

In fact, this plain version of the site can be used as a 'live' wireframe to develop the information architecture and functionality without getting caught up in the look and feel. The design of the interface and pages can then be applied to support the content and engage the visitor.

Here is sample of some the base themes available:

• Basic
• Blue Trip
• Blueprint
• Clean
• Framework
• Genesis
• NineSixty
• Zen

The idea behind a base theme is to provide an out-of-the-box, standards compliant theme. Some are built on well known tried and tested CSS grid system frameworks such as Blueprint, Blue Trip and 960.

Applying one of these themes is as simple as applying any theme. Instructions can be found in 'Many Ways to Style a Site : Ready to Wear' or 'Installing Themes' on the Drupal site.

Creating a Sub-theme

Once the base theme has been installed, best practice would be to create a sub-theme which extends the original base theme thus keeping it intact. This is especially useful should the theme be updated in the future by it's maintainers. To create a sub-theme:

1. Open the theme folder and locate the .info file which will have the same name as your base theme
2. Duplicate the .info file and rename to something of your choice for the sub-theme name
3. Open the file and change the name of the name entry to the same sub-theme name
4. Insert the line "base theme = the name of installed base theme" e.g. if your base theme is zen then add "base theme = zen" (without the quotes) underneath the description, version and core entries.

Some settings in this file are inherited automatically from the base theme so can be deleted or modified:

• Stylesheets declared in the base or parent theme .info file. Here you can declare your custom stylesheet for the sub-theme. CSS styles in the base theme can also be overridden in the custom stylesheet
• JavaScripts from the parent theme. Here you can declare your custom JavaScript for the sub-theme which will then be in addition to the parent theme JavaScript
• The theme engine (template.php)
• The template files (e.g. page.tpl.php)

Once you have uploaded your subtheme.info you will see the entry in your theme admin page. Before going any further it is worth enabling and applying your sub-theme to make sure it works. As there have been no additions or modifications it should look and behave in the same way as the base theme.

It is also useful, while developing your theme, to set your administrative theme to a theme other than your sub-theme. This keeps your admin pages clean as you develop. This setting can be found under 'Administration theme' in the Site configuration section. Setting it to Garland is good as it has a flexible layout which can cope with some of the more complicated forms in the admin pages.

Now you are ready to tailor your theme to your design. If you edit your .info file you should visit the admin > build > themes page to flush the cached data from the .info file. It is also a good idea to clear all cached data by visiting Administer > Site configuration > Performance page and clicking on the "Clear cached data" button at the bottom of the page. This is especially relevant if you edit the template.php file or any of the template files (e.g. page/tpl.php).

Mostly you will just want to edit the CSS files. Some of the grid based frameworks such as Blueprint apply the column classes in the template.php file. In Blueprint's case the grid is divided by 24. Each column width has it's own class (e.g. .span-12 {width:470px;}).

You may see entries like the following in template.php:

$vars['left_classes'] = 'col-left span-6';
$vars['right_classes'] = 'col-right span-6 last';
$vars['center_classes'] = 'col-center span-12';

This example shows a 3 column layout that visually renders as two columns that span six grid columns and one column that spans 12 grid columns. You may wish to reassign these classes to different span classes for different widths. Following the grid structure for Blueprint, they should add up to 24 (6+12+6).

You will find that these entries are within a function such as yourtheme_preprocess_page(&$vars) and this does exactly what it says; preprocesses the page before it is passed onto the page template (e.g. page.tpl.php). The function usually checks to see if there is content present in the region and then sets up the layout classes for that region. In the page template you will find areas like this:

<?php if ($left): ?>
<div class="<?php print $left_classes; ?>"><?php print $left; ?></div>
<?php endif ?>

Here you can see the page checking to see if there is content assigned to the left region (left sidebar). If it finds some, then the <div> tag that follows becomes available. PHP code prints the appropriate classes in the class declaration which were assigned in the preprocess_page function in template.php. The content is then printed between the <div> tags.

So where does this content come from? Other than the main content that is created when you create the page itself, other content is mostly assigned to regions as blocks through Administer › Site building › Blocks › Blocks page. Here you place navigation, search and blocks that list content from the site into the regions listed. Items and content are also assigned through the theme admin pages and the site information page.

The regions listed on the blocks admin page are specified in the .info file in your theme folder. You will find entries like the following:

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

You can specify your own regions to accept content by adding your own region to the list. The content area variable name is assigned in the array and used by php to write the content to the page (<?php print $left; ?>). On the right is the meaningful name that will appear in the Administer › Site building › Blocks page.

These are then put into the page template (e.g. page.tpl.php) where you want the content or blocks to appear. Make sure that you reproduce the name of the region in the page template exactly. The regions will then be available in the blocks page.

This is a very flexible approach to theming and provides much of the groundwork so that a theme can be rapidly developed with the added benefit of having a very usable theme right from the start. In future articles I hope to provide a more in depth look at some of the aspects discussed here.