Overriding Drupal CSS Stylesheet

How do we keep this site running? This post may contain affiliate links — the cost is the same to you, but we get a referral fee. Compensation does not affect rankings. Thanks!

Generally you should avoid modifying any “core” Drupal files, in other words files that come standard with any new Drupal release. This promotes compatibility and takes advantage of Drupal’s extensibility. Therefore I suggest you override any drupal.css styles in your theme’s stylesheet (since your theme’s stylesheet is imported after Drupal’s, any declarations you make that match those in drupal.css will be overriden (ie. yours will be used instead)). By doing this you won’t have a mess when an important update is made to drupal.css. Rule of thumb – only update your own custom files.

For a style declaration I wish to override, I first check to see if it’s present in root/misc/drupal.css. If it’s not, then there’s no need to override it. If it is, I place the exact same declaration in my theme’s style.css file. I place all my override declarations in a section entitled /* override */ at the top of my style.css. Since my theme’s style.css gets loaded after drupal’s default drupal.css, my theme’s css override those of drupal’s css by nature of “cascading.”

Removing Drupal’s StyleSheet (Not Recommended)

For those that still insisting on removing drupal.css, I will outline a procedure here that will let you do so. Simply add the file template.php containing the following code to your style’s directory. This will completely remove the drupal.css style from your layout. Since many default and administrative styles are included in drupal.css that support Drupal’s layout structure, you may want to run tests to make sure the layout doesn’t break by removing drupal.css and that your theme’s stylesheet covers (overrides) these default styles.

This should work with and without “clean URL’s”. This code is now detailed on the official Drupal site: not including drupal.css.

Code to Remove drupal.css:

/* Removes Drupal's default style sheet (drupal.css) from this theme */ function phptemplate_stylesheet_import($stylesheet, $media = 'all') { if (strpos($stylesheet, 'misc/drupal.css') == 0) { return theme_stylesheet_import($stylesheet, $media); } }

Alex bring a series of in-depth articles on search marketing and content management systems as well as troubleshooting tips to We Rock Your Web's collection. He is an avid tennis player, nature enthusiast, and hiker, and enjoys spending time with his wife, friends, and dogs, Bella and Lily.

Leave a Reply

6 Comments on "Overriding Drupal CSS Stylesheet"

avatar
We Rock Your Web
We Rock Your Web

Try the ThemeKey module. ThemeKey is meant to be a generic theme switching module. It allows you to switch the theme for different paths and based on object properties (e.g. node field values). It can also be easily extended to support additional paths or properties as

exposed by other modules.

Anonymous
Anonymous

I don’t see a drupal.css anywhere. I’m assuming this only applies to older Drupal installations – ie. 4.x and lower?

We Rock Your Web
We Rock Your Web

Yes, drupal.css was removed from the /misc directory beginning with Drupal 6.x and up.

Anonymous
Anonymous

I think it’s nice to be able to do this, but I always wonder if my own coding is as good as the Drupal code is. Thanks for the article. I’ll have to try it out again.

Anonymous
Anonymous

Just wondering if you know how to remove CSS (styles.css) from one page (blogging pages) in Drupal?

Anonymous
Anonymous

hey thanks for the post! i really enjoyed reading it and hope to be seeing more of it in the near future. keep up the good work.

wpDiscuz

Send this to a friend