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.

CSS Styleswitcher¶

Author:	Kasper Skårhøj
Created:	2002-11-01T00:32:00
Changed:	2006-05-06T14:54:07
Author:	Ingo Schommer
Email:	me@chillu.com
Info 3:
Info 4:

CSS Styleswitcher¶

Extension Key: is_styleswitcher

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¶

CSS Styleswitcher 1

Introduction 1

What does it do? 1

Users manual 1

Adminstration 2

Configuration 2

Reference 2

Known problems 2

To-Do list 2

Changelog 2

Introduction¶

What does it do?¶

This extension lets you insert several custom styled CSS-Files as "Page-Styles". Features: Per-Page-Styles, Cookies, Alternative-Styles, Default-Styles, Basic-Styles, Template-driven. Stylesheet-Switching is often used for alternative Font-Sizing (Accessibility) or alternative Layouts (Design).

Features:

Fast switching via javascript (no page-reload)
Cookie-functionality (save style-preferences for later browsing- sessions)
Include CSS-files as content-elements
Per-Page-Styles (include only on on certain pages)
Default-Styles - Basic-Styles (always included, not selectable by the user)
Template-driven (set surrounding code, IDs, etc)
Compatible to browser-integrated style-listings (Opera, Mozilla, ...)

Thanks to Rob Ballou for creating this wonderfully modularized PHP- Class, which basically does all the dirty work. This extension is just a slight modification of his GPLed work, see http://contrastsweb.com/switcher/

Users manual¶

See “Administration” for installation instructions

Styles are Content-Elements which can be inserted on every page by the “New...”-Command.
Styles inserted on rootlevel will be included in the whole pagetree (while this has nothing to do with the Style actually showing, it is just considered by the extension on every site in the pagetree).
Styles inserted below rootlevel will be included only on this page and its subsequent pagetree. This gives the possibility to add different styles in subsections of a page, e.g. an alternative print-layout only available for article-pages.
To create a new style choose “New...” in Context-Menu of a specific page and select “Page Styles”. Be sure to write the correct-filepath for CSS-files (see “Administration” for correct Typoscript-setup).
For more information on Stylesheet-Switchers: "A List Apart: Working with Alternative Stylesheets" ( http://www.alistapart.com/articles/alternate/ )

Adminstration¶

Download “is_styleswitcher” from Typo3 Extension Repository

Install the extension

Set Typoscript-Setup (see Example below) (TODO: automatically detect filepath)

plugin.tx_isstyleswitcher_pi1.absCSSFilePath = /fileadmin/template/main/_css

Include the Extension through a Typoscript-Marker (check Documentation “Modern Template Building” for basic information on Typoscript and “Futuristic Template Building” for further Information on TemplaVoila).For “Normal Template” and “Autoparser-Extension”:
```
temp.myMarker < plugin.tx_isstyleswitcher_pi1
```
For “TemplaVoila Templates”:
```
lib.myMarker < plugin.tx_isstyleswitcher_pi1
```
Don't mix with manually integrated CSS-files (via Template or Typoscript) as they will be not recognized by the extension and will be always integrated. If they are included after the extension-code, they might override the CSS-styles set by the this extension.
Try to avoid using the inline-CSS created by Extensions. Put these into external files and override the extension-css by setting plugin.tx_<extensionkey>._CSS_DEFAULT_STYLE = Include these external files in the Switcher-Extension.

Configuration¶

Reference¶

absCSSFilePath¶

Property

absCSSFilePath

Data type

Text

Description

Provides the absolute path to CSS-files (e.g. /fileadmin/template/main/_css/

Default

/fileadmin/template/main/_css/

Known problems¶

FAQ¶

Q: I want to implement a styleswitcher only on a seperate “preferences”-page – how can I activate it nevertheless on other pages?

A: Inserting only the header-logic (and not the actual style-list) is currently not supported by default, but you can workaround this issue: Just hide the style-list via CSS (ul#yourId {display: none;}) and un- hide it on the “preferences”-page with a more specific CSS, e.g. By setting an id to the bodyTag by

page.bodyTag = <body id=”preferences”>

and overwrite the CSS-setting (#preferences ul#yourId {display: block;}. It's a little hacky, but hey – it works :)

To-Do list¶

More Templates (at the moment only <ul>-list is available for output, dropdown and radio-buttons are planned)
Translation (only English/German-Translation at the moment. Anybody?)
Style-Order in HTML-Output (place default/selected-style on top- position)
Groups (allow coherent styles that are only activated together, more info on contrastsweb.com/switcher).
Typoscript-Functionality for more dynamic inclusion-scenarios.
cached output

Changelog¶

0.1.2: Added Javascript-Header (no more manual inclusion of the setActiveStyleSheet()-Functions)
0.1.3: Fixed a (really dumb) Javascript-Error where the cookie was saved for a wrong domain-scope. Style-Information should now be stored persistently via cookies.
0.2.1: Fixed a bug which crashed Apache2/PHP5 via a case-insensitive get_class()-call.
0.2.2: Fixed bug where style-settings weren't "remembered" / works with Typo3 4.0
0.2.3: Added Rootline-Selection of styles (enables custom styles on subpages)

CSS Styleswitcher - 3