How to add custom CSS to each page

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.