Actions

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

From Joomla! Documentation

 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{cookiejar}}
+
<noinclude><languages /></noinclude>
You can define different CSS style sheets depending upon the device the user is browsing your site with
+
<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.
 +
</translate>
  
 +
<translate>===Media Types=== <!--T:2--></translate>
 +
<translate><!--T:3-->
 
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.  
*braille - Intended for braille tactile feedback devices.  
+
*braille - Intended for braille tactile feedback devices.</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.  
+
*screen - Intended primarily for color computer screens.</translate>
 +
<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.  
 
*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).  
+
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate>
  
You can assign a media type to a CSS declaration with the following syntax
+
<translate>===Examples=== <!--T:6-->
 +
You can assign a media type to a CSS declaration with the following syntax</translate>
  
<code css>
+
<source lang="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:
+
<translate><!--T:7-->
 +
To assign more than one declaration style to more than one media type:</translate>
  
<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):
+
<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>
  
<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:Stubs]]
+
<noinclude>
 +
<translate>
 +
<!--T:9-->
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 
[[Category:Templates]]
 
[[Category:Templates]]
 +
[[Category:CSS]]
 +
</translate>
 +
</noinclude>

Latest revision as of 18:01, 6 August 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" />