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

From Joomla! Documentation

m (New page: {{cookiejar}})
 
Line 1: Line 1:
 
{{cookiejar}}
 
{{cookiejar}}
 +
You can define different CSS style sheets depending upon the device the user is browsing your site with
 +
 +
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).
 +
 +
You can assign a media type to a CSS declaration with the following syntax
 +
 +
<code css>
 +
@media print {
 +
    BODY { font-size: 12pt }
 +
  }
 +
</code>
 +
 +
To assign the declaration to more than one media type:
 +
 +
<code>
 +
@media print handheld{
 +
    BODY { font-size: 12pt }
 +
  }
 +
</code>
 +
 +
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):
 +
 +
<code html>
 +
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
 +
</code>

Revision as of 13:07, 11 January 2009

Quill icon.png
 This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.

The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you.

This article was last edited by Pollen8 (talk| contribs) 15 years ago. (Purge)

You can define different CSS style sheets depending upon the device the user is browsing your site with

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).

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

@media print { 

   BODY { font-size: 12pt }
 }

To assign the declaration to more than one media type:

@media print handheld{ 

   BODY { font-size: 12pt }
 }

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):

<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=12589"