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.

Comments

That's a good idea. I'm always troubled by the Zen themes multitude of CSS files. For me a bigger problem oftentimes is that many Drupal modules output HTML without classes or ID:s making it hard to style without affecting overall design.

Method does not work. I wanted to kill system.css via zen and it works at first, but then there are functions somewhere that loads system.css straight from the core, ignoring zen and that really messes things up :(

My point is that template_preprocess_page is just one of 29 functions that call drupal_add_css() in core alone.

The thing is that Drupal loads all CSS styles no matter what, even ignoring if the user is an anonymous user or a administrator. Why would a anonymous user want to have the CSS of the administration panel? There's no need for that.

I have been researching to see how to fix this but I haven't got any good solution. :/

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?