Removing excess CSS in Drupal 7

You are here

Categories:

One of the most time consuming and critical tasks in Drupal development is styling the output.  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.

See also:  hook_css_alter on api.drupal.org

Tags:

Done right, right here.  

All our work is performed by qualified, experienced developers right here in America.

Talk to Us  Talk to Us

Find out what we can do for your business. Contact us to arrange a demonstration, get a price quote, or just ask questions.

Better still, call us and speak to a Drupal developer right here in Northern Virginia.

(703) 879-6985