DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
Advanced Page Stylesheet Selection¶
| Author: | Kasper Skårhøj |
|---|---|
| Created: | 2002-11-01T00:32:00 |
| Changed by: | Andreas Ferber |
| Changed: | 2006-04-28T20:52:45 |
| Email: | af@chaos-agency.de |
| Info 2: | |
| Info 3: | |
| Info 4: |
Advanced Page Stylesheet Selection¶
Extension Key: af_css_select
Copyright 2006, Andreas Ferber, <af@chaos-agency.de>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3
,- a GNU/GPL CMS/Framework available from www.typo3.com
Table of Contents¶
Advanced Page Stylesheet Selection 1
Introduction 1
What does it do? 1
Users manual 1
Installation 1
Adding a specific stylesheet to a page 2
Recursive stylesheet selection 2
Backend module 3
Administration 3
Configuration 3
Reference 3
Page TSConfig 3
Known problems 4
To-Do list 4
Changelog 4
This documentation might not be fully uptodate, but it should give you all the information needed to get the extension up and running.
Introduction¶
What does it do?¶
This extension allows you to select one or more stylesheet(s) for each page of the tree. The goal of this extension is to drastically reduce the weight of the pages generated by Typo3, by including only the styles needed in the page.
Unlike the css_select extension, it lets you set things like CSS media on a per-stylesheet basis. Also it lets you add alternate stylesheets which can be selected in the browsers style menu. If you want to add a stylesheet selection menu to your HTML, have a look at the is_styleswitcher extension.
Users manual¶
Installation¶
The installation of this extension is very simple. Just connect to the Typo3 Extension Repository and download «Advanced Page Stylesheet Selection» (af_css_select), located in the frontend section.
Adding a specific stylesheet to a page¶
Once the extension is installed, you can specify one or more stylesheet(s) for each of your pages. This is done by adding «Page Stylesheet» records to your page:
«Label» gives the stylesheet a name, which is needed for preferred or alternate stylesheets so that they can be displayed in your browsers style selection menu.
The way your stylesheet is specified depends on the «CSS Resource Type»:
Standard Stylesheet¶
CSS Resource Type
Standard Stylesheet
CSS specification
Select a file from the standard directory configured in the extension configuration.
Full URL¶
CSS Resource Type
Full URL
CSS specification
Give a URL for the CSS stylesheet. This can be any URL, including relative, absolute or full URLs.
Upload¶
CSS Resource Type
Upload
CSS specification
Upload a CSS file to the server.
Inline-CSS¶
CSS Resource Type
Inline-CSS
CSS specification
Directly enter your CSS into the textbox.
«Stylesheet Type» specifies what type of stylesheet this is. Persistent styles will always be applied by the browser, preferred styles will be active upon page load in the browser, and alternate styles will be made available by the browser in its style menu. If you want to add multiple CSS files that should be activated together as an alternate style in the browser, simply add multiple «Page Stylesheet» records with the same label to the page.
Recursive stylesheet selection¶
If the «recursive» configuration option is enabled (see Configuration section below), stylesheets are collected recursively along the rootline when the page is generated. This means that if you eg. add a stylesheet to your root page, it will be applied to all your subpages as well as your root page.
The stylesheets are added in descending page tree order, ie. stylesheets from the root page will be added first, then from the first level of subpages, and so on. This way, styles from a toplevel stylesheet can be overridden in an additional stylesheet on a page.
If you want to have a totally different set of stylesheets on one of your pages (and its subpages), you can do so by checking the «Stop recursive stylesheet selection» checkbox in the page header:
Backend module¶
«Advanced Page Stylesheet Selection» also comes with a backend module that integrates into the standard Web>Info module.
With it you can display the full collection of stylesheets that will be inserted into a given pages output, in the order they will be used. This way you can easily check if recursive stylesheet selection leads to the result you expect, without having to poke around in HTML output.
In order to help with this, the module displays the ID of the page where each stylesheet record is located in the last column («PID»).
Administration¶
The whole configuration of the plugin is available through the constant editor. Please see the Configuration section for more details.
You probably should avoid mixing this extensions with other means of integrating CSS into your HTML, like templates or typoscript, since it might be confusing, and you may loose some control over the order of your stylesheets.
For the same reasons you should try to avoid using the inline-CSS created by some extensions. Put the styles into an external file, include it via a «Page Stylesheet» record and override the extensions default CSS by adding
plugin.tx_<extensionkey>._CSS_DEFAULT_STYLE >
somewhere in your typoscript.
Configuration¶
Reference¶
Here's the complete reference of the TypoScript options for the plugin. Remember that you can set each one through the constant editor.
recursive¶
Property
recursive
Data type
boolean
Description
Also check for stylesheet(s) on the parent pages.
Default
1
xHTML¶
Property
xHTML
Data type
boolean
Description
Use XHTML rules for the geeration of tags.
Default
1
cssUseImportForPersistent¶
Property
cssUseImportForPersistent
Data type
boolean
Description
Use @import directives for inclusion of persistent stylesheets.
Default
0
cssComments¶
Property
cssComments
Data type
boolean
Description
Add CSS comments in the HTML source code.
Default
1
cssMimeType¶
Property
cssMimeType
Data type
string
Description
The MIME type of the stylesheet(s).
Default
text/css
cssCharset¶
Property
cssCharset
Data type
string
Description
The charset parameter of the <link> tag.
Default
utf-8
[tsref:plugin.tx_afcssselect_pi1.]
Page TSConfig¶
Configuration of the directory for the “Standard Stylesheet” resource type happens in the Page TSConfig. Available options can be found in the table below. Defaults for the configuration options can be set in the extension manager.
cssDirectory¶
Property
cssDirectory
Data type
string
Description
The directory for Standard Stylesheets, relative to the site path.
Default
cssDirectory.recursive¶
Property
cssDirectory.recursive
Data type
boolean
Description
If set, show files from the cssDirectory recursively.
Default
cssExtension¶
Property
cssExtension
Data type
string
Description
The extension of the CSS files that should be shown in the selector.
Default
[tsref:tx_afcssselect.]
Note that it might lead to unexpected results if a page inherits “Standard Stylesheet” type records from a page with a different value for the cssDirectory setting.
Known problems¶
None at the time. Just contact me if you find some.
To-Do list¶
- Manage resources required by a stylesheet, like background images
- Please contact me if you have any suggestion about this extension.
Changelog¶
- 0.2.0: - Allow use of @import for persistent stylesheet inclusion- Make standard CSS directory configurable via Page TSConfig- Allow recursive selection of files from standard CSS directory- PHP5 fixes
- 0.1.0: First public release.
Advanced Page Stylesheet Selection - 4