Removing The Default CSS In Drupal 5

Drupal comes with several CSS files built in. These files determine the default look of basic elements like menus, tabs, and tables. But what if the default Drupal style just isn't what you want?

You could override the default styles, line by line, in your own CSS file, but that can get tedious. A more direct approach is to simply stop Drupal from loading the unwanted CSS in the first place.

Here are the two CSS files we're concerned with:

/modules/system/defaults.css
/modules/system/system.css

System.css is full of deeply nested selectors, and can be a real source of pain when it comes to customizing your theme. Defaults.css is less intrusive, but worth removing if you really want a clean slate to build your theme on.

Here's the code we'll be using to bypass these files:

function _phptemplate_variables($hook, $vars) {
  $css = drupal_add_css();
  unset($css['all']['module']['modules/system/system.css']);
  unset($css['all']['module']['modules/system/defaults.css']);
  $vars['styles'] = drupal_get_css($css);
  return $vars;
}

This code goes in your theme's template.php file. If you already have a "_phptemplate_variables" function, you'll need to incorporate this code into it.

Basically, this code loads the list of CSS files, removes the lines we don't want, and returns the new list to Drupal.

Removing Module CSS Files

You can also use this method to remove CSS files loaded by modules. Here's an example of bypassing the Help module's CSS file:

function _phptemplate_variables($hook, $vars) {
  $css = drupal_add_css();
  $rm = drupal_get_path('module','help').'/help.css';
  unset($css['all']['module'][$rm]);
  $vars['styles'] = drupal_get_css($css);
  return $vars;
}

In this example, we're using the drupal_get_path function to find the module, as modules can be located in several different places in Drupal 5.

Posted by John on 2007-12-10
Tags: ,