How to Remove Core and Module CSS from a Drupal 7 Theme

Posted: April 24, 2014 under CSS, Drupal

In the post on base themes that I wrote earlier this week, I pointed out that core adds a lot of CSS to your site that you may not want. If you find yourself overriding this CSS in your themes, you definitely have some bloat that you could trim down. You also run into this issue quite a bit with contributed modules. Views, Flexslider and Superfish are modules that typically add a lot of CSS I don't want.

So how to get rid of this potentially unwanted code? Below I've included a function that you can drop in your template.php file. Of course you need to replace YOUR_THEME in the function name with the name of your theme.

  1. function YOUR_THEME_css_alter(&$css) {
  2.  
  3. // Remove Drupal core css
  4.  
  5. $exclude = array(
  6. 'modules/aggregator/aggregator.css' => FALSE,
  7. 'modules/block/block.css' => FALSE,
  8. 'modules/book/book.css' => FALSE,
  9. 'modules/comment/comment.css' => FALSE,
  10. 'modules/dblog/dblog.css' => FALSE,
  11. 'modules/field/theme/field.css' => FALSE,
  12. 'modules/file/file.css' => FALSE,
  13. 'modules/filter/filter.css' => FALSE,
  14. 'modules/forum/forum.css' => FALSE,
  15. 'modules/help/help.css' => FALSE,
  16. 'modules/menu/menu.css' => FALSE,
  17. 'modules/node/node.css' => FALSE,
  18. 'modules/openid/openid.css' => FALSE,
  19. 'modules/poll/poll.css' => FALSE,
  20. 'modules/profile/profile.css' => FALSE,
  21. 'modules/search/search.css' => FALSE,
  22. 'modules/statistics/statistics.css' => FALSE,
  23. 'modules/syslog/syslog.css' => FALSE,
  24. 'modules/system/admin.css' => FALSE,
  25. 'modules/system/maintenance.css' => FALSE,
  26. 'modules/system/system.css' => FALSE,
  27. 'modules/system/system.admin.css' => FALSE,
  28. 'modules/system/system.base.css' => FALSE,
  29. 'modules/system/system.maintenance.css' => FALSE,
  30. 'modules/system/system.messages.css' => FALSE,
  31. 'modules/system/system.menus.css' => FALSE,
  32. 'modules/system/system.theme.css' => FALSE,
  33. 'modules/taxonomy/taxonomy.css' => FALSE,
  34. 'modules/tracker/tracker.css' => FALSE,
  35. 'modules/update/update.css' => FALSE,
  36. 'modules/user/user.css' => FALSE,
  37. 'misc/vertical-tabs.css' => FALSE,
  38.  
  39. // Remove contrib module CSS
  40. drupal_get_path('module', 'views') . '/css/views.css' => FALSE, );
  41. $css = array_diff_key($css, $exclude);
  42.  
  43. }

The Tao base theme uses something similar (I'm sure others do as well) and Mike Herchel showed off some of his resets in a recent presentation at Florida DrupalCamp. He has some other good stuff in there you might want to check out.

Play around with the code above and see if you can reduce the size of your pages - every little bit helps! If you have any comments on this post, you may politely leave them below.

About the Author

John Hannah

I’m John Hannah, a frontend developer, avid Drupalista and the guy behind Friendly Machine. When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.