1

All,

I complete Drupal 7 newbie here.

I am tackling the themeing of our website (using Adaptive/ Sky theme). Now previously I would have loaded up all the CSS files in the sky.info file but then read that all the stylesheets in theme info file get loaded on every page.

What I want is to load each unique page's CSS on that page only. Example being the 'Home Page' would have its own unique CSS, same for 'About Us', 'Contact Us' pages etc.

As per my research, I am meant to use 'drupal_add_css' function in the template.php file, however, I dont know PHP & have no idea how to add the if condition that each page's alias should dictate which css file is preprocessed & loaded.

Any guidance would be great.

4 Answers 4

4

An easier way to address multiple CSS loads, is to cache and compress the CSS. You can do so by going to /admin/config/development/performance and selecting "Aggregate and compress CSS files"

But if you must have them load on separate pages I'd recommend doing it the Drupal way; separating them by content types or blocks, forms, not by URI. The simplest way to do it, is to use Theme Hooks.

For instance, to include a yourthemedirecotry/css/MYTYPE.css for content type MYTYPE;

  1. Copy /modules/node/node.tpl.php into your theme directory and rename it to node--mytype.tpl.php.
  2. Insert <?php drupal_add_css(path_to_theme() . '/css/mytype.css', array ('group' => CSS_THEME)); ?>
  3. Don't forget to flush cache.

From now on, nodes with content type MYTYPE will include a yourtheme/css/mytype.css.

Likewise, you can insert CSS into specific blocks, fields, page. For more options, see Theme Hooks and drupal_add_css.

4
  • The reason I want separate CSS files for each page is because they are rather large (1200+ lines) & agregating the whole site css would be a huge file, a waste of download & processing. Though I still very much want the existing CSS files to be aggregated & compressed by Drupal. I have the 'aboutus' page setup as a 'content page' & I just plugged in your code & it works... even though I think Im suppose to replace the text in your code 'CSS_THEME' with something else?
    – Kayote
    Jul 26, 2012 at 21:38
  • 1
    Glad it helped. CSS_THEME tells Drupal that it's not a module stylesheet; don't change it unless your CSS is part of a module. See my last link to drupal_add_css hook and search for CSS_THEME. Jul 28, 2012 at 18:33
  • 1
    Another great link drupal.stackexchange.com/questions/126/… Jul 28, 2012 at 18:37
  • thanks @timofey. Im liking the more organised CSS files for my Drupal. Cheers
    – Kayote
    Jul 30, 2012 at 19:34
1

You can add CSS & JS files in the menu hook that you are using to call that page. Suppose you had a contact us form

function my_contact_us_form(){
 drupal_add_css(PATH_TO_CSS);
}

Now this will be added only for contact us page. Suppose its a particular node like About Us page. You can use hook_init() in a module or template_preprocess() in a template.php file If condition will be something like this. Assuming URL to be like mysite.com/aboutus

if(request_uri() == "/aboutus"){
 drupal_add_css(PATH_TO_CSS);
}

request_uri() is a inbuilt defined function which will return the URI of tha page being viewed.

1
  • Thats a wonderful & easy to understand explanation. Thanks Kantu. Here is what Ive done. In template.php, Ive added: function THEMENAME_template_preprocess() { if(request_uri == "aboutus") { drupal_add_css ("css/aboutUs.css"); } } While its not working, I suspect the only thing Im doing wrong here is the paths... should the URI be '/aboutus' or without the bracket. Also is the css file path relative to the template.php file? Cheers
    – Kayote
    Jul 26, 2012 at 20:08
0

There's a module for that!!

One of my fave modules 'CSS Injector' allows you to set up multiple CSS 'rules' - custom CSS code that can be run on specific pages or media (e.g. phone, screen, print); PHP can also be used to place the CSS.

This will place your CSS code after all the theme and/or module CSS so you can use it to override what your site is doing.

I often use it to subtly customise the themes already available and ensures that my CSS tweaks remain in place even when the module or themes are updated (though you might need to change some ID/Class references).

Set up your rules at Configuration>Development>CSS Injector. Hope that answer helps!

https://drupal.org/project/css_injector

enter image description here

0

I would suggest using the module Code Per Node. This is an easy effective way in injecting css and javascript on a per node basis.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.