Custom CSS File

Drupal will automatically search the theme folder for a file called style.css. If it is found, it will be imported automatically; there is nothing you need to do to guarantee this behavior. However, you may want to import additional style sheets. Perhaps you would like to have one called style.css that governs typesetting, color, and graphical elements to be imported automatically, and another called layout.css that deals exclusively with positioning and spacing.

To add a custom .css file, in your theme's template.php file (if you don't have one, create one in your theme's main directory), call the following function:

Replace the $stylesheet variable with the relative path to the file you wish to import. To import the file themes/bluemarine/layout.css, for example, you would use this line (the function's optional $media parameter will default to all):


In order to make this code really robust so that it can work for themes no matter where they are located, and even work in a multisite environment (see Chapter 6), you need to add the following code to the _phptemplate_variables() function in template.php. The bold segment gets the path to the current theme's directory dynamically:

function _phptemplate_variables($hook, $vars) { // bring the global $theme variable into scope global $theme;

// theme('block') gets called on every page load so we use 'block' case 'block':

theme_add_style(drupal_get_path('theme', $theme). '/layout.css'); break;

return $vars;

Confirm that the new style sheet is being imported by looking for the following line in the HTML that is sent to the browser:

<style type="text/css" media="all">@import "themes/bluemarine/layout.css";</style>

0 0

Post a comment