Add CSS File To Specific Pages In Drupal

I get asked a lot how to go about adding certain CSS files to only certain pages of a Drupal project, rather than every page. This is commonly desired when you are using a drastically different front page in comparison to your drill pages. To achieve this you will want to use the drupal_add_css() function provided by the Drupal API.

It’s very basic in functionality:

drupal_add_css(path_to_theme() . '/layout-fixed.css', 'theme', 'all');

Given a path to a CSS file, it will load it where ever the function is called. The second param specifies whether you are theming a “theme” or a “module” with it, and the third param reffers to the “media” attribute of the <link> tag.

I’ve seen many coders drop this call right into the page or node template they are theming. That is really less than desired, as it tightly links a css file to template file. Say you wanted to use this css file 5 times, you would have to add it to 5 files. That duplication would make it time-consuming to change if you had to alter the name of the file, for example (and that is provided you can remember where you put every call to drupal_add_css()).

A cleaner approach is to put it’s call in your template.php and use some logic to control when to use it. Something like:

if($_GET['q]=="node/2") {
drupal_add_css(path_to_theme() . '/crazy-style.css', 'theme', 'all');
}

Doing this will ensure that all of your dynamically added CSS’s files live in one spot, making it super easy to add or extend to.

To remove an existing CSS file per page, try something like:

 $arrCSS = drupal_add_css();
  unset($arrCSS['all']['theme']['path/to/css-file.css']);
  $vars['styles'] = drupal_get_css($css);
  return $vars;
Be Sociable, Share!

13 Replies to “Add CSS File To Specific Pages In Drupal”

  1. Absolutely,

    If you want to do it by taxonomy, try:

    $arrTerms = array();
    foreach($node->taxonomy as $t) {
      $arrTerms[] = $t->name;
    }
    $taxonomyTerm = "section1"
    if (in_array($taxonomyTerm, $arrTerms)) {
      drupal_add_css(path_to_theme() . '/crazy-style.css', 'theme', 'all');
    }
    

    And if you want to do it solely based on the URI, you can try:

    if(strstr($_SERVER['REQUEST_URI'], "section1")) {
      drupal_add_css(path_to_theme() . '/crazy-style.css', 'theme', 'all');
    }
    

    Let me know how these work out

  2. Note: it’s REQUEST_URI, not REQUEST_URL

    But no, what $_SERVER[‘REQUEST_URI’] provides you with is the resource path of the current page you are on. For example.com/section1, it would return “section1”, for example.com/foo/bar/1, it would return “foo/bar/1”. Basically, everything to the right of the domain name.

    Hope this helps

  3. There is a quote missing in the body of the message…
    if($_GET[‘q’]==”node/2″) just right after q

    So thanks a lot it works well!

    I have tried to add a css to a sub directory of section1 like section1/part2 but it didn’t act like I planned…

  4. Hello Franck,

    I realise that the version that work out is the one based on node number… I can’t make the address based work eventually… Sorry I missunderstood something perhaps…

    here is my code :

    if(strstr($_SERVER[‘REQUEST_URI’], “espace-pros”)) {
    drupal_add_css(path_to_theme() . ‘/admin-pages.css’, ‘theme’, ‘all’);
    }

    thx

  5. Hi,
    I am trying to associate a weight with a css file so that it can overide the style.css file.

    I tried the below but did not work any ideas ?

    drupal_add_css($vars[‘directory’] .’/css/front.css’, ‘customt’, 100);

    Cheers,
    vishal

  6. Thanks for the article, but one of my biggest complaints with learning Drupal is the amount of places where you can add code. Therefore I’m not sure where the snippets you’ve provided should be placed, theme, module, elsewhere?

  7. Really good question; and super common, might I add. The thing with Drupal is, You can add theme code (code to alter output) in a lot of places (template.php, tpl files, modules), because Drupal can handle those types of requests really late in it’s request lifetime. Stuff that has to alter the way things will be configured or booted up, most always have to live in a custom module; as modules are called upon earlier. For the drupal_add_css(), this falls into the former: drop it in a template.php hook, in a tpl file, or a custom module (see http://drupal.org/node/156334)

    Hope that helps

Leave a Reply

Your email address will not be published. Required fields are marked *