Knowing Your Body and Practicing Safe CSS

This is a quick trick I picked up to guarantee that any css changes you make only affect what you want.

There are different ways to identify the page you need to change. I tend to use url as it's always unique. Here's how:

Locate the template.php file for the theme your working on and add something like this to the page_preprocess function

  1. function your_theme_preprocess_page(&$vars) {
  2. // Add a custom body class for specifc page
  3. if ($_REQUEST['q'] == 'example/page/new-body-class') {
  4.   $vars['body_classes'] .= ' custom-body-class-name ';
  5. }
  6. // Another way to specify a body class
  7. if ($node->title == 'name of node for specific body class') {
  8.   $vars['body_classes'] .= ' another-custom-body-class ';
  9. }

Once you've done this, clear caches. Now you can just add 'body.custom-class-name' before any new css that you create:

  1. body.custom-class-name .node {
  2.   background: url('different-image/url');
  3. }

You have just learned to practice safe css that won't affect any other page except the one you want.