Drupal 7 Themes: Creating Dynamic CSS Styling

Exclusive offer: get 50% off this eBook here
Drupal 7 Themes

Drupal 7 Themes — Save 50%

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

£14.99    £7.50
by Ric Shreves | July 2011 | Drupal Open Source PHP Web Development

Not only can you make the display of templates and elements dynamic, but you can also tap into similar logic for your CSS styling. This article by Ric Shreves, author of Drupal 7 Themes, reviews different techniques available for creating styles that are responsive to the conditions on the screen like the content being displayed, or the user viewing the content.

Among the techniques covered in this article are:

  • The use of $classes to create dynamic CSS styling

 

Drupal 7 Themes

Drupal 7 Themes

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

        Read more about this book      

(For more resources on Drupal, see here.)

The reader would benefit by reffering the previous article on Dynamic Theming

In addition to creating templates that are displayed conditionally, the Drupal system also enables you to apply CSS selectively. 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.

Employing $classes for conditional styling

One of the most useful dynamic styling tools is $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 either the layout of the page or to the status of the person viewing the page. This technique is typically used to control the styling where there may be one, two, or three columns displayed, or to trigger display for authenticated users.

Prior to Drupal 6, $layout was used to detect the page layout. With Drupal 6 we got instead, $body_classes. Now, in Drupal 7, it's $classes. While each was intended to serve a similar purpose, do not try to implement the previous incarnations with Drupal 7, as they are no longer supported!

By default $classes is included with the body tag in the system's html.tpl.php file; this means it is available to all themes without the necessity of any additional steps on your part. With the variable in place, the class associated with the body tag will change automatically in response to the conditions on the page at that time. All you need to do to take advantage of this and create the CSS selectors that you wish to see applied in the various situations.

The following chart shows the dynamic classes available to you by default in Drupal 7:

Drupal 7 Themes: Creating Dynamic CSS Styling

If you are not certain what this looks like and how it can be used, simply view the homepage of your site with the Bartik theme active. Use the view source option in your browser to then examine the body tag of the page. You will see something like this: <body class="html front not-logged-in one-sidebar sidebar-first page-node">.

The class definition you see there is the result of $classes. By way of comparison, log in to your site and repeat this test. The body class will now look something like this: <body class="html front logged-in one-sidebar sidebar-first page-node">.

In this example, we see that the class has changed to reflect that the user viewing the page is now logged in. Additional statements may appear, depending on the status of the person viewing the page and the additional modules installed.

While the system implements this technique in relation to the body tag, its usage is not limited to just that scenario; you can use $classes with any template and in a variety of situations.

If you'd like to see a variation of this technique in action (without having to create it from scratch), take a look at the Bartik theme. Open the node.tpl.php file and you can see the $classes variable added to the div at the top of the page; this allows this template to also employ the conditional classes tool.

Note that the placement of $classes is not critical; it does not have to be at the top of the file. You can call this at any point where it is needed. You could, for example, add it to a specific ordered list by printing out $classes in conjunction with the li tag, like this:

<li class="<?php print $classes; ?>">

$classes is, in short, a tremendously useful aid to creating dynamic theming. It becomes even more attractive if you master adding your own variables to the function, as discussed in the next section.

Adding new variables to $classes

To make things even more interesting (and useful), you can add new variables to $classes through use of the variable process functions. This is implemented in similar fashion to other preprocess function.

Let's look at an example, in this case taken from Drupal.org. The purpose here is to add a striping class keyed to the zebra variable and to make it available through $classes. To set this up, follow these steps:

  1. Access your theme's template.php file. If you don't have one, create it.
  2. Add the following to the file:

    <?php
    function mythemename_preprocess_node(&$vars) {
    // Add a striping class.
    $vars['classes_array'][] = 'node-' . $vars['zebra'];
    }
    ?>

  3. Save the file.

The variable will now be available in any template in which you implement $classes.

Creating dynamic selectors for nodes

Another handy resource you can tap into for CSS styling purposes is Drupal's node ID system. By default, Drupal generates a unique ID for each node of the website. Node IDs are assigned at the time of node creation and remain stable for the life of the node. You can use the unique node identifier as a means of activating a unique selector.

To make use of this resource, simply create a selector as follows:

#node-[nid] {
}

For example, assume you wish to add a border to the node with the ID of 2. Simply create a new selector in your theme's stylesheet, as shown:

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

As a result, the node with the ID of 2 will now be displayed with a 1-pixel wide solid border. The styling will only affect that specific node.

Creating browser-specific stylesheets

A common solution for managing some of the difficulties attendant to achieving true cross-browser compatibility is to offer stylesheets that target specific browsers. Internet Explorer tends to be the biggest culprit in this area, with IE6 being particularly cringe-worthy. Ironically, Internet Explorer also provides us with one of the best tools for addressing this issue.

Internet Explorer implements a proprietary technology known as Conditional Comments. It is possible to easily add conditional stylesheets to your Drupal system through the use of this technology, but it requires the addition of a contributed module to your system, called Conditional Stylesheets.

While it is possible to set up conditional stylesheets without the use of the module, it is more work, requiring you to add multiple lines of code to your template.php. With the module installed, you just add the stylesheet declarations to your .info file and then, using a simple syntax, set the conditions for their use. Note also that the Conditional Stylesheets module is in the queue for inclusion in Drupal 8, so it is certainly worth looking at now.

To learn more, visit the project site at http://drupal.org/project/conditional_styles.

If, in contrast, you would like to do things manually by creating a preprocess function to add the stylesheet and target it by browser key, please see http://drupal.org/node/744328.

Summary

This article covers the basics needed to make your Drupal theme responsive to the contents and the users. By applying the techniques discussed in this article, you can control the theming of pages based on content, state of the pages, 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.


Further resources on this subject:


Drupal 7 Themes Create new themes for your Drupal 7 site with a clean layout and powerful CSS styling
Published: May 2011
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

About the Author :


Ric Shreves

Ric Shreves is a web applications consultant and tech author. He’s been building websites since the mid-90s and writing about tech for almost as long. Ric specializes in open source content management systems and has written texts on each of the big three: WordPress, Joomla! and Drupal.

Ric is the founding partner of water&stone, a digital agency that focuses on new media and online marketing. He works with clients on digital marketing strategy and supervises the SEO implementation team. Ric lives in Bali and divides his time between the island and Singapore.

Books From Packt


Drupal 7
Drupal 7

Drupal 7 Fields/CCK Beginner's Guide
Drupal 7 Fields/CCK Beginner's Guide

Drupal 7 Module Development
Drupal 7 Module Development

Drupal Intranets with Open Atrium
Drupal Intranets with Open Atrium

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Drupal 6 Performance Tips
Drupal 6 Performance Tips

Drupal Web Services
Drupal Web Services


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software