Adding stylesheets for other output devices: Difference between revisions
From Joomla! Documentation
m New page: {{cookiejar}} |
No edit summary |
||
| 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 18:07, 11 January 2009
 |
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) 16 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" />