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.
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»:
CSS Resource Type: | CSS specification: |
|---|---|
Standard Stylesheet | Select a file from the standard directory configured in the extension configuration. |
Full URL | Give a URL for the CSS stylesheet. This can be any URL, including relative, absolute or full URLs. |
Upload | Upload a CSS file to the server. |
Inline-CSS | 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.
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:
«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»).
