7 min read

Creating Dynamic CSS Styling

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:

Condition

Class Available

no sidebars

.no-sidebar

one sidebar

.one-sidebar

left sidebar visible

.sidebar-left

right sidebar visible

.sidebar-right

two sidebars

.two-sidebars

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.

Working with Template Variables

As we have seen, above, Drupal produces variables that can be used to enhance the functionality of themes. Typically, a theme-related function returns values reflecting the state of the page on the screen. A function may indicate, for example, whether the page is the front page of the site, or whether there are one, two, or three active columns (for example, the variable $body_classes). Tapping into this information is a convenient way for a theme developer to style a site dynamically.

The default Drupal variables cover the most common (and essential) functions, including creating unique identifiers for items. Some of the Drupal variables are unique to particular templates; others are common to all. In addition to the default variables, you can also define your own variables.

Using the function theme_preprocess(), you can either set new variables, or unset existing ones that you do not want to use.

In Drupal 6, preprocess functions have made working with variables easier and cleaner. By using the preprocessor, you can set up variables within your theme that can be accessed by any of your templates. The code for the preprocess function is added to your template.php file, thereby keeping the actual template files (the .tpl.php files) free of unnecessary clutter. Note that the preprocess functions only apply to theming hooks implemented as templates; plain theme functions do not interact with the preprocessors.

In Drupal 5 and below, the function _phptemplate_variables served the same purpose as the preprocess function. For a list of the expected preprocess functions and their order of precedence, see http://drupal.org/node/223430

Typically, if you wish to implement a preprocessor applicable to your theme, you will use one of the following:

 

Name of preprocessor

Application

[engineName]_preprocess

This namespace should be used for your base theme. Should be named after the theme engine used by the theme. Will apply to all hooks.

[engineName]_preprocess_ [hookname]

Should be used for your base theme. Also named after the theme engine applicable to the theme but note that it is specific to a single hook.

[themeName]_preprocess

This namespace should be used for subthemes. Will apply to all hooks.

[themeName]_preprocess_ [hookname]

Should be used for subthemes. Note that it is specific to a single hook.

Let’s look first at intercepting and overriding the default variables and then at creating your own variables.

Intercepting and Overriding Variables

You can intercept and override the system’s existing variables. Intercepting a variable is no different in practice from intercepting a themable function: you simply restate it in the template.php file and make your modifications there, leaving the original code in the core intact.

To intercept an existing variable and override it with your new variable, you need to use the function _phptemplate_preprocess(). Add this to your template.php file according to the following syntax:

<?php
function phptemplate_preprocess(&$vars) {
$vars['name'] = add your code here...;
}
?>

Note that nothing should be returned from these functions. The variables have to be passed by reference, as indicated by the ampersand before variables, e.g., &$vars.

Let’s take a very basic example and apply this. Let’s override $title inpage.tpl.php. To accomplish this task, add the following code to the template.php file:

<?php
    function phptemplate_preprocess(&$vars) {
    $vars['title'] = 'override title';
}
?>

Remember to clear your theme registry!

With this change made and the file saved to your theme, the string override title will appear, substituted for the original $title value.

Making New Variables Available

The preprocess function also allows you to define additional variables in your theme. To create a new variable, you must declare the function in the template.php file. In order for your theme to have its preprocessors recognized, the template associated with the hook must exist inside the theme. If the template does not exist in your theme, copy one and place it in the theme directory.

The syntax is the same as that just used for intercepting and overriding a variable, as seen above. The ability to add new variables to the system is a powerful tool and gives you the ability to add more complex logic to your theme.

Summary

In this two part article we covered the basics needed to make your Drupal theme responsive to the contents and the users. By applying the techniques discussed here, you can control the theming of pages based on content, state of the page or the users viewing them. Taking the principles one step further, you can also make the theming of elements within a page conditional. The ability to control the templates used and the styling of the page and its elements is what we call dynamic theming.

We covered not only the basic ideas behind dynamic theming, but also the techniques needed to implement this powerful tool. Among the items discussed at length were the use of suggestions to control template display, and the implementation of $body_classes. Also covered in this article, was the use of the preprocess function to work with variables inside your theme

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here