Actions

Difference between revisions of "Adding stylesheets for other output devices"

From Joomla! Documentation

m (removing category stubs, sporatic use and other categories more descriptive in use)
(tidying up page, removing cookiejar, basic CSS page on other outputs)
 
Line 1: Line 1:
{{cookiejar}}
+
Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
You can define different CSS style sheets depending upon the device the user is browsing your site with
+
  
 +
===Media Types===
 
The recognised media types are:
 
The recognised media types are:
 
 
*all - Suitable for all devices.  
 
*all - Suitable for all devices.  
 
*aural - For speech synthesizers.  
 
*aural - For speech synthesizers.  
Line 15: Line 14:
 
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).  
 
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).  
  
 +
===Examples===
 
You can assign a media type to a CSS declaration with the following syntax
 
You can assign a media type to a CSS declaration with the following syntax
 
+
<source lang="css">
<code css>
+
 
@media print {
 
@media print {
    BODY { font-size: 12pt }
+
  body {  
 +
    font-size: 12pt;
 +
    font-color: #000000;
 
   }
 
   }
</code>
+
}
 +
</source>
  
To assign the declaration to more than one media type:
+
To assign more than one declaration style to more than one media type:
  
<code>
+
<source lang="css">
@media print handheld{
+
@media print, handheld{
    BODY { font-size: 12pt }
+
  body {  
 +
    font-size: 12pt;
 +
    font-color: #000000;
 +
  }
 +
  img {
 +
    max-width: 100%;
 +
    height: auto;
 
   }
 
   }
</code>
+
}
 +
</source>
  
Alternatively, and perhaps a neater solution is to create a separate style sheet for a given media type and include the following in your templates <head> (the following is taken from the beez template):
+
The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):
  
<code html>
+
<source lang="html4strict">
 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
</code>
+
</source>
  
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 
[[Category:Templates]]
 
[[Category:Templates]]
 +
[[Category:CSS]]

Latest revision as of 00:51, 3 December 2012

Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.

Media Types

The recognised media types are:

  • all - Suitable for all devices.
  • aural - For speech synthesizers.
  • braille - Intended for braille tactile feedback devices.
  • embossed -Intended for paged braille printers.
  • handheld - Intended for handheld devices.
  • print - Used for formatting printed pages.
  • projection - Intended for projected presentations, for example projectors or print to transparencies.
  • screen - Intended primarily for color computer screens.
  • tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
  • tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Examples

You can assign a media type to a CSS declaration with the following syntax

@media print {
  body { 
    font-size: 12pt;
    font-color: #000000; 
  }
}

To assign more than one declaration style to more than one media type:

@media print, handheld{
  body { 
    font-size: 12pt;
    font-color: #000000;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />