Removing unwanted stylesheets from Drupal

By David Pratt / Tags: , / 3 Comments / Published: 16-12-09

One of the things that irritates me about adding modules in Drupal, is that they often have their own stylesheets associated with them that get automatically added to the site upon module activation. Not always, but very often you’ll find that the rules within these supporting stylesheets result in one or more of the following undesirable side-effects:

  • possess rules that clash, or are made redundant by rules that you already have in place
  • control aspects of the module administration that a user would never see
  • cater for features that the module provides that you don’t need, or haven’t activated
  • offer browser and device support that is not part of the site requirements
  • you have themed a modules mark-up, thus rendering its own stylesheet obsolete

Generally there is no easy way, or no way at all to disable these stylesheets from the admin or module settings.

If you took a typical Drupal setup with a Zen starter theme and add about 10 of the popular modules, it wouldn’t be unthinkable for the number of stylesheets to breach the 20 mark! 20 stylesheets!

Even before you start adding your own stylesheets...

Even before you start adding your own stylesheets...

I know that the stylesheets can be cached and served as one file, but when you’re debugging the CSS and adding new sections to a site of any real size, you will inevitably end up playing specificity wars and having to reset rule properties more often than you’d like. This all leads to bloated CSS that is a pain to debug and maintain.

To overcome this in the past and regain some sort of control over what CSS ends up on the site, I have adopted a code butchers approach and taken to ripping out the line seen below in the page.tpl.php file, and then just manually adding the stylesheets in the html.

print $styles; //bye, bye

That’s a problem solved, but another problem created in that sometimes you do actually want a modules stylesheet to be used. Determining the CSS file location(s) that a module uses can be difficult, especially when there are configuration options within a module that force different sets of stylesheets to be used such as in the popular fivestar module.

I’m sure there are probably better, cleaner ways to achieve this, but what I do now is cull the Zen starter theme.info of all superfluous stylesheets and then add the phptemplate_preprocess_page function within the template.php file with code that removes the remaining unwanted stylesheets, like so:

function phptemplate_preprocess_page(&$vars){
	//Get the loaded stylesheets as an array
	$stylesheets = drupal_add_css();
 
	//Remove the default style sheets
	unset($stylesheets['all']['module'] ['modules/aggregator/aggregator.css']);
	unset($stylesheets['all']['module'] ['modules/node/node.css']);
	unset($stylesheets['all']['module'] ['modules/system/defaults.css']);
	unset($stylesheets['all']['module'] ['modules/system/system.css']);
	unset($stylesheets['all']['module'] ['modules/system/system-menus.css']);
	unset($stylesheets['all']['module'] ['modules/taxonomy/taxonomy.css']);
	unset($stylesheets['all']['module'] ['modules/user/user.css']);
 
	//Remove some of the popular module stylesheets - add / remove your own here
	unset($stylesheets['all']['module'] ['sites/all/modules/cck/modules/fieldgroup/fieldgroup.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/cck/theme/content-module.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/date/date.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/filefield/filefield.css']);
	unset($stylesheets['all']['module'] ['sites/all/modules/link/link.css']);
 
	//Set the styles
	$vars['styles'] = drupal_get_css($stylesheets);
}

This function will do the trick for all of the Drupal system stylesheets and a few of the popular modules. There is a big drawback to all this stylesheet optimisation of course, which is you’ll notice that your admin area falls apart and becomes completely unusable due to the fact that the supporting stylesheets aren’t present. To overcome this is simple in most cases – you just need to set your administration theme (Administer -> Site Configuration -> Administration theme) to use a different theme and all module stylesheets will be pulled in – I usually go for the comforting shades of Garland.

Category: Tech

Tags: ,

Posted: on December 16th, 2009 at 3:18 pm.

Feeds: RSS 2.0

3 Responses to “Removing unwanted stylesheets from Drupal”

Reece December 18th, 2009 at 1:08 am

I like your approach of unsetting the page variables but there is a simpler way.

In your theme.info file you simply include the name of the stylesheet the module is including e.g cck.css, views.css etc and zen will look in your theme directory for that stylesheet instead, if it doesn’t exist it won’t include one. It’s also a good way to completely override a stylesheet a module includes, that way you can still keep your styles for that module separate in case you decide to disable it. The admin theme is definitely something I do, as you don’t have to worry about making your admin pages unusable with clashing css, although I prefer the admin module http://drupal.org/project/admin better than the wordpress admin.

David Pratt December 18th, 2009 at 11:31 am

That sounds like a much better way. Time for a bit of refactoring…

Michael Ray August 18th, 2010 at 3:20 am

Great post, David. As well as an interesting reply by Reece. Can’t wait to try this. Thanks to both of you and the fruits of your interaction here.

Leave a reply