How To Control The Order Of Stylesheets In Drupal 7

Michael Phipps's picture

In Drupal 7, header information has been taken out of the page.tpl.php template.  When you add stylesheets to the .info file for your theme, These stylesheets get added to the end of the list of stylesheets that are being inserted into the header.  Sometimes, you want to make sure your stylesheet is the first one read (particularly when you are using reset.css type stylesheets) so that it can be overridden by any other modules.

To make sure your stylesheets are first in the list, you need to add the following code to your template.php in your themes directory.  Make sure you replace THEMENAME with the name of your theme.  In this particular instance, I am making sure my 960 grid css is first, which contains multiple css files so that you can see how to add more than one stylesheet to the top of your list.

 

/**
 * Preprocesses the wrapping HTML.
 *
 * @param array &$variables
 *   Template variables.
 */

function THEMENAME_preprocess_html(&$variables) {
    /* This puts our 960 grid theme first. */

    $options = array(
    'group'  => CSS_SYSTEM - 1,
    'weight' => -10,
  );

  $reset = drupal_get_path("theme", "THEMENAME") . "/gs/reset.css";
  drupal_add_css($reset, $options); 

  $reset = drupal_get_path("theme", "THEMENAME") . "/gs/text.css";
  drupal_add_css($reset, $options);

  $reset = drupal_get_path("theme", "THEMENAME") . "/gs/960.css";
  drupal_add_css($reset, $options);

}

Once you have added this to your template.php file in your theme, make sure that you clear the cache for your website.  Let me know if this code helps you, or if you have any questions, or need any clarification.

© 2010 Your Name.. Drupal theme by Kiwi Themes.