Drupal 7 Themes
Create new themes for your Drupal 7 site with a clean layout and powerful CSS styling
The reader would benefit by referring 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:
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:
- Access your theme’s template.php file. If you don’t have one, create it.
- Add the following to the file:
<?php
function mythemename_preprocess_node(&$vars) {
// Add a striping class.
$vars[‘classes_array’][] = ‘node-‘ . $vars[‘zebra’];
}
?> - 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: Customizing an Existing Theme [Article]
- Drupal 7 Themes: Dynamic Theming [Article]
- 25 Useful Extensions for Drupal 7 Themers [Article]
- Drupal and Ubercart 2.x: Install a Ready-made Drupal Theme [Article]
- Building an Admin Interface in Drupal 7 Module Development [Article]
- Content in Drupal: Frequently Asked Questions (FAQ) [Article]
- Drupal Web Services: Twitter and Drupal [Article]
