Adding stylesheets for other output devices - Revision history

Hutchy68: tidying up page, removing cookiejar, basic CSS page on other outputs

2012-12-03T05:51:33Z

tidying up page, removing cookiejar, basic CSS page on other outputs

Hutchy68: removing category stubs, sporatic use and other categories more descriptive in use

2012-12-03T04:12:11Z

removing category stubs, sporatic use and other categories more descriptive in use

Batch1211 at 14:47, 17 September 2010

2010-09-17T14:47:21Z

Pollen8 at 18:07, 11 January 2009

2009-01-11T18:07:43Z

Chris Davenport: New page: {{cookiejar}}

2008-06-19T08:40:44Z

New page: {{cookiejar}}

New page

@@ 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
 The recognised media types are:
 *all - Suitable for all devices.
 *aural - For speech synthesizers.
@@ Line 15: / Line 14: @@
 *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
+<source lang="css">
-<code css>
 @media print {
-    BODY { font-size: 12pt }
+  body {
+   }
-</code>
-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 {
+   }
-</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):
+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" />
-</code>
+</source>
 [[Category:Tutorials]]
 [[Category:Templates]]

@@ Line 37: / Line 37: @@
 </code>
 [[Category:Tutorials]]
 [[Category:Templates]]

← Older revision		Revision as of 14:47, 17 September 2010
Line 36:		Line 36:
	<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>		</code>
		+
		+	[[Category:Stubs]]
		+	[[Category:Tutorials]]
		+	[[Category:Templates]]

← Older revision		Revision as of 18:07, 11 January 2009
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>