This optional function (selectable under the miscellaneous settings) allows visitors to change the style of your website by clicking on any of the coloured boxes presented at the top. The style switcher used in this theme is quite a basic one and does not use complicated scripts like PHP. That being said, you will find it much easier to set up if you’ve already got experience of customising RapidWeaver themes and using CSS. The style switcher is safe to use on websites and uses a simple cookie so returning visitors will see their previously selected style as the default. The cookie will expire after 365 days, or when the visitor resets their web browser which normally deletes all cookies.

The code used in this theme is based roughly on that by Kevin Luck (http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html) with some modifications made to make it RapidWeaver compatible and optimise the code slightly for improved performance. Incidentally, some of the more complicated functions were removed.

To add or remove style options from the theme, open the theme contents and open the index.html file in a code editor. Scroll down until you see this code:

<!-- Links to style sheets used by the style switcher -->
<link rel="alternate stylesheet" type="text/css" href="%pathto(css/styles2.css)%" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="%pathto(css/styles3.css)%" title="styles3" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="%pathto(css/styles4.css)%" title="styles4" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="%pathto(css/styles5.css)%" title="styles5" media="screen" />

Add or remove links to your style sheets. Then continue scrolling down until you see this code:

<!-- Style Switcher Buttons -->
<ul>
<li><a href="serversideSwitch.html?style=%pathto(css/styles1)%" rel="styles1" class="styleswitch">Default</a></li>
<li><a href="serversideSwitch.html?style=%pathto(css/styles2)%" rel="styles2" class="styleswitch">Blue</a></li>
<li><a href="serversideSwitch.html?style=%pathto(css/styles3)%" rel="styles3" class="styleswitch">Green</a></li>
<li><a href="serversideSwitch.html?style=%pathto(css/styles4)%" rel="styles4" class="styleswitch">Red</a></li>
<li><a href="serversideSwitch.html?style=%pathto(css/styles5)%" rel="styles5" class="styleswitch">Black</a></li>
</ul>

Each list item (li) represents a separate style option which is listed sequentially. The square coloured icons are stored in the images folder, this is where you should also save your own buttons and link to them from there. We use the %pathto()% input tag so RapidWeaver will automatically generate the link based on your site URL. Styles 1 should not be changed - this is used as the theme default setting and is an empty style sheet.

The actual style sheets are saved in the ‘style_switcher’ folder which can be found inside your CSS folder. You can either duplicate and rename what is already here or create your own custom style sheets. Each of these style sheets can include any CSS code you like, but it is recommended you only use valid CSS 2 code and avoid anything too complicated which might break in some browsers or interfere with RapidWeaver plugins.

Remember that CSS code used in the style switcher will override styles set by your theme. So if for example you want all inline links to be orange, you will need to edit each of the style switcher CSS files and remove the link code or adjust accordingly.

To speed up the creation of style switchers, if your style options are mainly colour based, set up the desired colour schemes using the colour settings within the theme. Then export or publish your site. Using the activity monitor in Safari, open the colourtags.css file and copy and paste the contents into your style switcher CSS file. This makes it easier to setup your style switchers without having to do too much manual CSS editing.

The actual style switcher icons can be replaced with text if you prefer. The CSS used to display style switcher links can be found within your styles.css folder in the theme contents.

Style switchers can be a very useful tool to aid accessibility when building websites. You could build alternative styles which enlarge text sizes or invert page colours (e.g. light text on dark backgrounds). There really is a wide range of things you can do using style switchers to improve websites for your visitors.