Removing excess CSS in Drupal 7

Drupal modules generally come with a default style sheet which can be both a blessing and a curse.

In most cases you'll just override the default style by providing more specific definitions in your site's CSS. This works fine if you only want to make minor changes but what if you wanted a totally different look?

Rather than overriding the default CSS consider simply replacing it all together. In this example we'll remove the style sheet for horizontal tabs and replace it with our own.

First we want to turn off the "Aggregate and compress CSS files" feature in Configuration -> Performance. (We'll turn it back on latter.)

Let's add a function to our template.php file:

function mytheme_css_alter(&$css) { unset($css[drupal_get_path('module', 'field_group') . '/horizontal-tabs/horizontal-tabs.css']); }

Flush your cache, and view source to verify the CSS is no longer being served. You can now add your style definitions wherever you like. You could even copy the default CSS file to your theme directory and include it in your mytheme.info file.