Drupal Theming 101: How to Remove System Stylesheets

When you first start creating a Drupal theme, you might be frustrated by the large number of stylesheets that are included by default in your theme -- especially if you're creating a Zen sub-theme. Most of the documentation suggests that you override these styles in your own themename.css file. You can certainly do this, but it can make managing your CSS a nightmare, trying to keep straight what lines are your own code, and which are just there to override some default Drupal style you didn't want.

The good news is that you can prevent any of those system stylesheets from being loaded in the first place by editing your themename.info file. Look for the section that loads the stylesheets and add a line like this:

stylesheets[all][] = system-menus.css

In this case, I'm preventing system-menus.css from loading, because it adds styles to every .menu list that I didn't want.

As long as the file you link doesn't exist in your theme, Drupal will prevent the original file from loading. Just be careful - some files contain very useful styles, such as system.css, which adds styles to turn node editing links into tabs. Without that file, those links are unstyled and hard to work with.

Drupal Theming 101 is a series of posts that I'm writing about the challenges you may run into when you start working with Drupal themes. Having just started working with Drupal myself, I'm well aware of the challenges a front-end developer faces when trying to learn how to work the system.