Last updated April 16, 2011. Created by edegro on July 26, 2010.
Edited by Carolyn, Tor Arne Thune. Log in to edit this page.

In order to enable a theme to use CSS Template, the author must define the configuration include 'css_template/css_template.inc' within the theme folder. An example css_template.inc that demonstrates all of the available variable types would be:

<?php
$info
= array(
 
'templates' => array(
   
'css_template_demo.css',
  ),
 
'variables' => array(
   
'site_width' => array(
     
'type' => 'length',
     
'title' => 'Site Width',
    ),
   
'banner_image' => array(
     
'type' => 'image',
     
'title' => 'Banner Image',
     
'maximum_dimensions' => '1200x800',
     
'minimum_dimensions' => '600x100',
    ),
   
'site_name_font' => array(
     
'type' => 'options',
     
'title' => 'Site Name Font',
     
'options' => array(
       
'Verdana,Arial,Helvetica,sans-serif' => 'Sans-serif',
       
'Georgia,"Times New Roman",serif' => 'Serif',
      ),
    ),
   
'site_name_font_size' => array(
     
'type' => 'length',
     
'title' => 'Site Name Font Size',
    ),
   
'site_name_color' => array(
     
'type' => 'color',
     
'title' => 'Site Name Color',
    ),
  ),
);
?>

These variables will be presented on the theme configuration page. When set, the theme CSS files specified as templates in the css_template.inc file will be updated with the given values. In order for these updates to work, the appropriate variable marker comments must be inserted into the CSS files. For example:

#header, #content, #footer {
  width:/*site_width*//*banner_image.width*/100%/*banner_image.width*//*site_width*/;
  margin:auto;
}
#header {
  background-image:/*banner_image*/none/*banner_image*/;
  height:/*banner_image.height*/auto/*banner_image.height*/;
}
.site-name {
  font-family:/*site_name_font*/Verdana,Arial,Helvetica,sans-serif/*site_name_font*/;
  font-size:/*site_name_font_size*/2em/*site_name_font_size*/;
}
.site-name a, .site-name a:link, .site-name a:visited, .site-name a:hover {
  color:/*site_name_color*/#FFFFFF/*site_name_color*/;
}

These variable markers must always be in pairs, with the inner content as the default value. Variable marker pairs can also be nested, with inner pairs only being evaluated if the parent set had no value set on the theme configuration page.

Image type variables also make the uploaded file's dimensions available via 'width' and 'height' dot properties, as demonstrated in the example CSS above.

The above examples are taken from the CSS Template Demo (http://drupal.org/project/css_template_demo) theme.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Good tutorial so far but got completely stuck at this page despite reading it several times. Suggestion for improvement: Add a list of actual values entered on the administration page and how css_template_demo.css looks after these variables have been substituted.

TDD is provided by Drupal. Leveraging SimpleTest. I'm writing up documentation on how this operates.