Creating Dynamic CSS Styling

Shortly I will be reviewing [Drupal 6 Themes](http://www.packtpub.com/drupal-6-themes/book) by Packt Publishing. As a primer to the review Packt Pub have granted me rights to publish selected articles from Drupal 6 Themes. Here is the first in the series of four articles—**Creating Dynamic CSS Styling in Drupal 6**.

In addition to creating dynamic templates, the Drupal system also enables you to apply CSS dynamically. Drupal creates unique identifiers for various elements of the system and you can use those identifiers to create specific CSS selectors. As a result, you can provide styling that responds to the presence (or absence) of specific conditions on any given page. Two of the most common uses of this technique are covered below: The creation of node-specific styles and the use of $body_classes.

## Using Dynamic Selectors for Nodes

The system generates a unique ID for each node on the website. We can use that unique ID to activate a unique selector by applying this nomenclature for the selector:

#node-[nid] {
}

For example, assume you wish to add a border to the node with the ID of 2. Simply create a new div in style.css with the name:

#node-2 {
border: 1px solid #336600
}

## Changing the Body Class Based on body_classes

One of the most useful dynamic styling tools introduced in Drupal 6 is the implementation of $body_classes. This variable is intended specifically as an aid to dynamic CSS styling. It allows for the easy creation of CSS selectors that are responsive to the layout of the page. This technique is typically used to control the styling where there may be one, two or three columns displayed, depending on the page and the content.

> Prior to Drupal 6, $layout was used to detect the page layout, that is, one, two or three columns. While $layout can technically still be used, the better practice is to use $body_classes.

Implementing $body_classes is a simple matter; just add $body_classes to the body tag of your page.tpl.php file—the Drupal system will do the rest. Once the body tag is altered to include this variable, the class associated with the body tag will change automatically in response to the conditions on the page at that time. Now, all you have to do is create the CSS selectors that you wish to see applied in the various situations.

Let's step through this with a quick example. Open up your page.tpl.php file and modify the body tag as follows:

<body class="<?php print $body_classes; ?>">

This will now automatically create a class for the page based on the conditions on the page. The chart below shows the options this presents:

Drupals default Body Classes
Condition Class Available
no sidebars .no-sidebar
one sidebar .one-sidebar
left sidebar visible .sidebar-left
right sidebar visible .sidebar-right
two sidebarss .two-sidebar
front page .front
not front page .not-front
logged in .logged-in
not logged in .not-logged-in
page visible .page-[page type]
node visible .node-type-[name of type]

$body_classes provides the key to easily creating a theme that includes collapsible sidebars. To set up this functionality, modify the page.tpl.php file to include $body_classes.

Now, go to the style.css file and create the following selectors:

.one-sidebar {
}
.sidebar-left {
}
.sidebar-right {
}
.no-sidebar {
}
.two-sidebars {
}

The final step is to create the styling for each of the selectors above (as you see fit).

When the site is viewed, the system-generated value of $body_classes will determine which selector is applied. You can now specify, through the selectors above, exactly how the page appears—whether the columns collapse, the resulting widths of the remaining columns, and so on , and so on.

In the next article we will look closely at **Working with Template Variables**, be sure to check it out!

Drupal 6 Themes

Create new themes for your Drupal 6 site with clean layout and powerful CSS styling

  • Learn to create new Drupal 6 themes
  • No experience of Drupal theming required
  • Techniques and tools for creating and modifying themes
  • A complete guide to the system's themable elements

http://www.packtpub.com/drupal-6-themes/book

Last updated 14th April, 2009 - 10:59pm

Authored by Jeff Burnz on