Making Drupal Theme Building Easier on the Designer

Sheena Donnelly | 11-26-08

The fundamental of any Site Design is in the div structure of the html document. Many web designers have a personal preference for how they structure and assign IDs to their layout-level div elements. This might be a simple naming convention that is semantic to the designer, or the names may correspond to a default CSS that the designer uses to streamline her styling process.

Having this habit allows the designer to focus on execution of the design, rather than constantly reading the page template to decide how to slice a photoshop comp or which selectors to use in the CSS file. Designing for Drupal can become a laborious process for any designer when they find themselves constantly needing to be reminded of exactly which element is being targeted.

Anyone with a rudimentary proficiency in HTML and PHP should be able to easily make the template edits necessary to customize a Drupal Theme’s page layout. If you are planning to make changes to an existing Theme (rather than making a new Theme from scratch), it is advisable to not edit the existing Theme, and instead create a sub-Theme. To do this, create a new folder in the same Themes directory as the Theme you are working from, with the name of your new Theme. Copy the .info file from the existing Theme into the new directory, and edit the file. Change the name to your new Theme’s name and add the following line to the file:

base Theme = baseThemeName

Obviously, replace “baseThemeName” with the name of the base Theme you are using. Now you have a sub-Theme to work from. Copy from your base Theme any files you plan to make changes to, for this task we will be editing the .info file and page.tpl.php.

The first step in building a custom template layout is to edit the Regions defined in your Theme’s .info file. A Region is simply a variable to which you can assign Blocks. Region definitions look something like this:

Regions[Region_name] = Region Name
Regions[Region_name_2] = Region Name 2

The text in brackets is the machine-readable (no capital letters, special characters, spaces or hyphens, must not begin with a number) name and the text following the equals sign (=) is the human-readable name of the Region.

Begin each new Region definition on a new line and use a semi-colon(;) to comment-out any unwanted Regions. Be sure that your Regions are defined in a semantic order. The header should be at the top, body content in the middle, and footer at the end of the list. The order in which you define your Regions will be the order that the Regions appear on your Blocks building page.

Now that you have defined the Regions that can output content, the next step is to edit your Theme’s page.tpl.php file to designate an area for the Regions’ content. Printing a Region’s content involves one simple line of PHP:

<?php print $Region_name; ?>

Be sure to have this line of code for each Region you created in the .info file. Of course, any designer would want to have more control over the layout of this content:

<div id="Region_name"><div id="Region_name_inner">
<?php print $Region_name; ?>
</div></div><!-- /#Region_name_inner, /#Region_name -->

There are two important pieces of code that have been added in this example. First, are the two div elements which wrap the Region, for easy targeting in a CSS file. The second is the comment after the closing div tags. Commenting after every closing div is very important to the readability of any HTML/PHP template.

One last bit of logic must be added to this code snippet in order to make it fully functional. If the Region in question happens to be empty, our current code will give us an empty Block-level element, which could lead to a messy-looking page. Two additional lines of code will ensure that an empty Region leaves no traces of itself in the final HTML output:

<?php if ($Region_name): ?>
<div id="Region_name"><div id="Region_name_inner">
<?php print $Region_name; ?>
</div></div><!-- /#Region_name_inner, /#Region_name -->
<?php endif; ?>

This simple “if” statement will output the Region’s content and it’s surrounding div elements, only if there is actually some content to output. Note: whether or not there is content to output is determined by if there is a Block assigned to that Region or not. The Views module will still output empty HTML elements even if it has no content, and that will cause the Region to display with empty elements.

Another technique that will make theming easier for the designer, is to assign a special class to an element if some other element is present (i.e., give one class to the body content area when sidebar content is present). To do this, we add a class attribute to the div tag, but instead of naming the class we write a new if/else statement:

<?php if ($Region_name): ?>
<div id="Region_name" class="<?php if($sidebar): ?>with-sidebar<?php else: ?> without-sidebar<?php endif; ?>">
<div id="Region_name_inner">
<?php print $Region_name; ?>
</div></div><!-- /#Region_name_inner, /#Region_name -->
<?php endif; ?>

This statement will give the div a class of “with-sidebar” if the Region named “sidebar” contains content and gives the div a class of “without-sidebar” if the Region named “sidebar” does not contain content. In this way, you can write CSS that will change the appearance of the div element depending on the presence of a sidebar.

In order to make your Drupal template designer-friendly, continue editing the page template in this fashion. Add div elements where needed, change IDs, add classes and move things around. Be sure to make note of where if/else statements begin and end, so that code is not broken (rewrite them if necessary).

Beginning with a page template of Block level elements with IDs and classes that make sense to the CSS writer is a great way to make Drupal theming an easier and more enjoyable process. If you have default CSS file that you always begin styling with, you can customize your page template to work with it. This process is much more efficient than re-writing the CSS or memorizing the default Drupal page layout.