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]]

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[edit]

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[edit]

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" />
Retrieved from "https://docs.joomla.org/index.php?title=Adding_stylesheets_for_other_output_devices&oldid=78063"