Adding stylesheets for alternate media

Last modified: August 23, 2009 - 21:17

Media Specific Stylesheets in Drupal

If you want to add media-specific stylesheets (e.g. any of those listed at http://www.w3.org/TR/REC-CSS2/media.html), use the following snippet in your page.tpl.php file to properly add them using Drupal theme functions.

<head>
  <title><?php print $head_title ?></title>

  <?php print $head ?>

  <?php
   
print theme('stylesheet_import', base_path() . path_to_theme() . '/css/screen.css', 'screen'); // FOR COMPUTER SCREENS
   
print theme('stylesheet_import', base_path() . path_to_theme() . '/css/print.css', 'print'); // FOR PRINTING
   
print theme('stylesheet_import', base_path() . path_to_theme() . '/css/handheld.css', 'handheld'); // FOR HANDHELD DEVICES
 
?>

 
  <?php print $styles ?>
 
</head>

@Media Rule in your Stylesheet

If you have only a few lines for an alternative media style sheet, you can add them in your current theme's style sheet and specify the media with the @media rule.

For example, if you do not want to not show the header and sidebars in your print styling you can add the following to your existing CSS file:

@media print{
  #header, #sidebar-left, #sidebar-right{display:none;}
}

 
 

Drupal is a registered trademark of Dries Buytaert.