Actions

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

From Joomla! Documentation

m (Marked for translation)
(Marked this version for translation)
 
Line 1: Line 1:
 
<noinclude><languages /></noinclude>
 
<noinclude><languages /></noinclude>
 
<translate>
 
<translate>
 +
<!--T:1-->
 
Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
 
Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
 
</translate>
 
</translate>
  
<translate>===Media Types===</translate>
+
<translate>===Media Types=== <!--T:2--></translate>
<translate>The recognised media types are:
+
<translate><!--T:3-->
 +
The recognised media types are:
 
*all - Suitable for all devices.  
 
*all - Suitable for all devices.  
 
*aural - For speech synthesizers.  
 
*aural - For speech synthesizers.  
 
*braille - Intended for braille tactile feedback devices.</translate>  
 
*braille - Intended for braille tactile feedback devices.</translate>  
<translate>*embossed -Intended for paged braille printers.  
+
<translate><!--T:4-->
 +
*embossed -Intended for paged braille printers.  
 
*handheld - Intended for handheld devices.  
 
*handheld - Intended for handheld devices.  
 
*print - Used for formatting printed pages.  
 
*print - Used for formatting printed pages.  
 
*projection - Intended for projected presentations, for example projectors or print to transparencies.
 
*projection - Intended for projected presentations, for example projectors or print to transparencies.
 
*screen - Intended primarily for color computer screens.</translate>  
 
*screen - Intended primarily for color computer screens.</translate>  
<translate>*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.  
+
<translate><!--T:5-->
 +
*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).</translate>  
 
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate>  
  
<translate>===Examples===
+
<translate>===Examples=== <!--T:6-->
 
You can assign a media type to a CSS declaration with the following syntax</translate>
 
You can assign a media type to a CSS declaration with the following syntax</translate>
  
Line 29: Line 33:
 
</source>
 
</source>
  
<translate>To assign more than one declaration style to more than one media type:</translate>
+
<translate><!--T:7-->
 +
To assign more than one declaration style to more than one media type:</translate>
  
 
<source lang="css">
 
<source lang="css">
Line 44: Line 49:
 
</source>
 
</source>
  
<translate>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):</translate>
+
<translate><!--T:8-->
 +
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):</translate>
  
 
<source lang="html4strict">
 
<source lang="html4strict">
Line 52: Line 58:
 
<noinclude>
 
<noinclude>
 
<translate>
 
<translate>
 +
<!--T:9-->
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 
[[Category:Templates]]
 
[[Category:Templates]]

Latest revision as of 19:26, 17 May 2015

Other languages:
български • ‎English • ‎français • ‎Nederlands • ‎português do Brasil

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" />