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;
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Twitter

Comment | Trackback

,
Code

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

  1. Yves Says:

    February 22nd, 2010 at 10:50 am

    hello,

    Is it possible to replace $_GET['q]==”node/2″ by a more general path like http://www.drupalsite.org/section1 so it only applies to all the pages belonging to section 1 ?

    Thanks
    great post

  2. Frank Says:

    February 22nd, 2010 at 5:20 pm

    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

  3. Yves Says:

    February 23rd, 2010 at 7:06 am

    Hello Frank,

    Thanks for your fast reply! Do I have to replace ‘REQUEST URL’ by something?

    Yves

  4. Frank Says:

    February 23rd, 2010 at 7:22 am

    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

  5. Yves Says:

    February 23rd, 2010 at 9:22 am

    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…

  6. Yves Says:

    March 2nd, 2010 at 10:20 am

    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

  7. tuzo Says:

    March 26th, 2010 at 2:28 am

    thanks frank, very helpful!

    br
    tuzo

  8. Tai Says:

    May 16th, 2010 at 4:47 pm

    Apparently using drupal_add_css is incompatible with caching and can cause problems.

    http://api.drupal.org/api/function/drupal_add_css/6

    A better way would be to avoid caching for page specific styling and instead add it to $styles or just $head.

  9. Christopher Says:

    September 24th, 2010 at 10:48 am

    This was helpful. Thanks for posting! :)

  10. vishal Says:

    June 1st, 2011 at 5:57 am

    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

  11. Frank Says:

    June 1st, 2011 at 6:05 am

    I believe the weight property is only available in Drupal 7, there was a discussion leading up to a patch for this a while back, http://drupal.org/node/92877 , maybe you can make it apply? Let me know, curious what you come up with.

  12. patrick Says:

    August 24th, 2011 at 6:28 am

    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?

  13. Frank Says:

    August 24th, 2011 at 6:34 am

    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