Kevin Bridges

Drupal has a way of making an otherwise intelligent person feel like a complete bumbling idiot. The CSS functions in Drupal 5 are no exception. I became excited when I read the notes on Ted Serbinski's Blog relating to theming in Drupal 5 and the related information contained at Converting 4.7x themes to 5.x . While this documentation may seem simple and straight forward to Drupal Core Developers it left me scratching my head for quite some time. I begin my theme development by selecting the default theme that is selected in a standard installation of Drupal. For the purposes of this entry, the default is the Garland theme.

To begin I copy the garland folder to a new folder named mytheme. Viewing the source of the pages generated by mytheme shows several lines of css imports that I did not want so that I could focus on the css I need to alter for my layout.

@import "/modules/node/node.css";
@import "modules/system/defaults.css";
@import "/modules/system/system.css";
@import "/modules/user/user.css";
@import "/themes/mytheme/style.css";
@import "/themes/mytheme/print.css";

As far as I can tell, this information is stored in a variable called &css which is an array with the following structure:

Array
(
    [all] => Array
        (
            [module] => Array
                (
                    [modules/node/node.css] => 1
                    [modules/system/defaults.css] => 1
                    [modules/system/system.css] => 1
                    [modules/user/user.css] => 1
                )

            [theme] => Array
                (
                    [themes/mytheme/style.css] => 1
                )

        )

)

The exception is the print.css an optional fix-ie.css for those unfortunate enough to be using that browser ... both are hardcoded into the page.tpl.php file. The first step in eliminating the css calls is to remove the hardcoded references from page.tpl.php:

<style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style> <!--[if lt IE 7]> <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style><![endif]-->

Now that we are done removing the hacks we can fall back on what I think is the proper way of removing references. To remove all styles from the page we use:

unset($css['all']);

If we wanted to target a specific css file such as the defaults.css we would instead use:

unset($css['all']['module']['modules/system/defaults.css']);

As mentioned earlier, the Garland theme pulls in two additional css styles by hardcoding them into the page.tpl.php file. I'm sure that is a perfectly acceptable approach, but would prefer to see one that consistently uses Drupal as I believe it was intended. Unfortunately the if lt IE 7 css conditional above for the fix-ie.css file is likely the most efficient way to perform that task because it does not rely on server side processing. For that reason I'll show you how to add the print.css file they hardcoded:

$css = drupal_add_css(path_to_theme() .'/print.css', 'theme', 'print');

Here is a complete example for removing the default styles and adding a custom style sheet:

$css = drupal_add_css(path_to_theme() .'/styles.css', 'theme');
unset($css['all']['module']['modules/system/defaults.css']);
$styles = drupal_get_css($css);