Changing the Body Class Based on bodyclasses
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, I
\ one, two or three columns. While $layout can technically still be used, I
the better practice is to use $body_classes. I
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] |
If you'd like to see this technique in action (without having to create it from scratch), take a look at the Bluewater theme we created in the previous chapter. In the page.tpl.php file you will find the $body_classes variable added to the body tag.
Enable the theme and then open the site with your browser. View the source code for your front page. Find the body tag in your source code. It now reads:
<body class="front not-logged-in page-node one-sidebar sidebar-left">
$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.
This above example from the Bluewater source code assumes you are running the default implementation with no modification and that you are not logged in!
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
This technique is used in the previous chapter to handle the columns in the example theme Bluewater.
Post a comment