The Definitive Guide to Drupal 7

Exercise

Managing Stylesheets in Your Theme

In this section, you’ve learned quite a few ways to manipulate CSS files in Drupal’s theme layer. Now you’ll go through the steps again with practical examples.

Exercise A: Define stylesheets for all pages in the .info file

  1. Begin by creating a new directory in your theme called css in sites/all/themes/mytheme. This step is optional but helpful for theme file organization.
  2. Create two files inside the css directory called style.css and print.css.
  3. Open the sites/all/themes/mytheme/mytheme.info and add the following two lines to define the stylesheets so Drupal knows to load them:
    1. stylesheets[all][] = css/style.css stylesheets[print][] = css/print.css
  4. Clear the site cache at /admin/config/development/performance. Once you return to the front end of your site, you’ll see that both files have been added.

Exercise B: Add a conditional stylesheet for IE using drupal_add_css()

  1. Create a file inside the css directory called ie.css.
  2. Create a file in the root of the theme directory called template.php if you haven’t already done so, and make sure to include <?php at the top of the file.
  3. Use the following code to implement template_preprocess_html() and load the IE stylesheet using drupal_add_css():
    1. <?php
    2. /**
    3.  * Implements template_preprocess_html().
    4.  */
    5. function mytheme_preprocess_html(&$vars) {
    6. // Add conditional stylesheet that targets Internet Explorer 8 and below.
    7. drupal_add_css(path_to_theme() . '/css/ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
    8. }

Exercise C: Add a custom stylesheet for the homepage using drupal_add_css()

You’ll use the $is_front variable, which already exists, to detect if the home page is being displayed and then add the homepage.css stylesheet. Add this code directly above the conditional stylesheet code you added in Exercise B.

  1. <?php
  2. // Add a stylesheet that prints only on the homepage.
  3. if ($variables['is_front']) {
  4. drupal_add_css(path_to_theme() . '/css/homepage.css', array('weight' => CSS_THEME));
  5. }

Exercise D: Override and remove module CSS files using hook_css_alter()

To implement hook_css_alter(), you'll need to create a function called mytheme_css_alter() in your template.php file. The $css parameter, which is passed by reference, contains all the stylesheets in array format, and you can do what you please with it. The following code shows how to remove the node.css file if it’s set to load.

  1. <?php
  2. /**
  3.  * Implements hook_css_alter().
  4.  */
  5. function mythemename_css_alter(&$css) {
  6. // Remove the node.css file.
  7. if (isset($css['modules/node.css'])) {
  8. unset($css['modules/node.css']);
  9. }
  10. }

You are reading content from two chapters on Theme Development from The Definitive Guide to Drupal 7, written by Jacine Luisi and published by Apress on July 19, 2011. All rights reserved.