So I just started creating a theme for my first big drupal project, and instantly had to quietly cry in a corner, as I saw how many css files Commerce Kickstart 2 and Omega4 are serving by default.

My plan is to essentially reduce the number of CSS files served to only one, perhaps two (depending on the current page), for the minimum amount of http-requests, without having to manually exclude them all in the theme settings file (which would be an unreliable solution, as new CSS files may get added upon installment of a new module). In addition, exceptions will have to be handled depending on a user role; so visitors should really only get one or two css files, whereas admins shall be served with all CSS files, that are required for the control panel overlay, as well.

Thus my question: Is there a way for me to easily smack those fancy admin- and maintenance-related CSS files back in, only to be loaded for admins?

Basically I want regular visitors to only load my global.css file, whereas admins also get the CSS files of the basetheme as well as commerce_kickstart_menus.css. (For some reason, toolbar_megamenu.css already gets served to admins only.)

Any help or hints as how I could go about this would be super-appreciated!

  • Are you aware Drupal has context-aware CSS aggregation built right into core? For example, users without permissions to view the admin menu will be served aggregated files without the admin menu styles, and so on.
    – Clive
    Jan 2, 2014 at 14:43
  • Yeah, if this is your first time working with a Drupal site like this, turning on CSS aggregation in your performance settings is the way to experience this. What you're seeing isn't specific to Kickstart or Omega - it's a Drupal thing in general that you should only see in development. Jan 2, 2014 at 15:16
  • thanks guys, but just turning on css aggregation is not precisely what I'm looking for here. in addition to only serve one (and for subpages, two) css file(s), I also want to get rid of all the other extermal css files that are being serves by various modules or the basetheme.
    – EchoCrow
    Jan 7, 2014 at 14:16
  • Related: drupal.org/node/264556
    – Mołot
    Mar 4, 2014 at 15:33

1 Answer 1


You can achieve this by extending a hook_css_alter in your template.php for module file.

function hook_css_alter(&$css) {
  global $user;  //  Use this object to check current user roles

  //  The $css variable is an array of all of the css files that will be loaded
  • hey Desmond! thanks for your reply and for introducing me to hook_css_alter! <3 after some more research on the $user and $css array, this is my current function: function HOOK_css_alter(&$css){ global $user; if (!in_array('administrator', $user->roles)) { foreach($css as $key => $val){ if (strpos($key,'HOOK') == false) { unset($css[$key]); } } } } it appears to be working as intended, but since I'm still new to all of this, I would greatly appreciate any feedback, should you know a more efficient way. :3 edit: uh, inline-comments make code unreadable, sorry about that
    – EchoCrow
    Jan 7, 2014 at 14:44

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.