Adding your own CSS to the Admin theme

Drupal theme builders enjoy an immense degree of control over the layout of their themes via css, but in some cases the best-practices for adding your own CSS to the admin theme is less understood. There are various ways to do this but our goal is to minimize any performance cost so that the site responds as quickly as possible. Here are three approaches for Drupal 7:

1. If you copy the admin theme or create a subtheme based off of the admin theme (note, this won't work with Drupal Commerce, as it already has a subtheme based off of Shiny) - and then add a css file via a .info call, you will load the CSS on every page.
2. If you copy the admin theme, or create a subtheme based off of the admin theme, you can use the hook drupal_add_css() in your template.php file. This will allow you to call the stylesheet conditionally, on certain pages only for example, or for certain browsers. This works alright but you're already calling more files than necessary.
3. Create your own module, and call drupal_add_css() from it. This is one of the 'lightest' ways to add to the admin theme's CSS without touching the original file and it's important to note this method will work if your admin theme is already a subtheme (for ex. 'Drupal Commerce Kickstart Admin' theme is a subtheme of 'Shiny'). Below are the steps for how to do this:

Create a directory called 'mymodule' (use whatever name you want), create these files within it, and then place it within your sites/all/modules/custom directory. I've added comments to the code below so you can see what's happening.

• mymodule.info
• mymodule.module
• css/mymodule.css

mymodule.info contains:

name = mymodule
description = Custom alterations for admin pages on website [xyz]
core = 7.x 

mymodule.module contains:

function mymodule_preprocess_html(&$variables) {
// Add conditional stylesheets for admin pages on admin theme.
  if (arg(0)=="admin") {
    // reference your current admin theme  
    $theme_path = drupal_get_path('theme', 'commerce_kickstart_admin');
    // reference your own stylesheet    
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule.css', array('weight' => CSS_THEME));
  }
}

...and then of course you add your own css to the mymodule.css file, being called last on the admin theme.

Learn more about function drupal_add_css here.