This plugin allows one to specify alternative CSS stylesheets to create skins for your Confluence. Change colours, sizes, layouts as much as you want. Make this part of your adaptive design - incorporate a switching link inside your content with the CSS Switch Link macro. And make it stick - get the current selected skin identifier from a cookie.

CSS Switcher Plugin for Atlassian Confluence

A handy plugin that allows making changeable skins for a Confluence space by utilizing alternate CSS style-sheets from files attached to a page in a Confluence space.

See this plugin in ACTION.

This plugin provides means to use all files with content type "text/css" attached to a page in Confluence space as alternate style-sheets.

The comment provided for the attached file serves as the style-sheet title - the attribute used to distinguish alternate style-sheets from each other.

<link rel="stylesheet" type="text/css" href="/css-switch/13205516/1/Red.css" title="Red Style"/>
<link rel="alternate stylesheet" type="text/css" href="/css-switch/13205516/1/Blue.css" title="Blue Style"/>

To enable the CSS Switcher in a space, the theme's layout must be modified to add the following line which imports the requried javascript.

Some browsers (Firefox, Opera) will already display a list of alternate style-sheets that are specified in the document under "View" menu option. The comments provided for the attached files will be used for the menu options. (hint: consider carefully what you put in the file comments).

By default the first suitable file returned by Confluence will be designated as the active style-sheet from the whole set and others will be considered inactive alternates unless you explicitly specify the preferred one.

In addition to this and to be cross-browser compatible this plugin provides a small JavaScript library and a Confluence macro to render a HTML link enhanced with a call to switch the current style-sheet to the one which title (attached file comment) is specified in the macro parameter.

<a onclick="setActiveStyleSheet('Red Style')">Switch to red text now!</a>

Once the style is selected the title of the current style-sheet is stored into a cookie and upon coming back to the website the user's choice of the style will be restored.

CSS Switcher Plugin Articles

Purchase from the marketplace