Download simple-css-switch.js to your project JavaScript folder.
All links to CSS themes must have class="s-css-s--style" and title="Some title"
Default theme must have rel="stylesheet" , other CSS themes must have
rel="stylesheet alternate" See example below:
<link class="s-css-s--style" rel="stylesheet" title="Default style" href="css/main.css">
<link class="s-css-s--style" rel="stylesheet alternate" title="Red style" href="css/red.css">
<link class="s-css-s--style" rel="stylesheet alternate" title="Green style" href="css/green.css">This include string “themes”, and show only titles of themes.
If you want to use different theme style, you can choose from the predifined:
- themes-all
- include string “themes”, show index and title of the theme
- themes-numbers
- include string “themes”, and show only the numbers as title
- default
- include string “themes”, and show only titles of themes
- numbers
- show only the numbers
- titles
- show only the titles
For example if you want to use the theme style numbers you need to do this:
<body onload="simpleCssSwitch('numbers')">Place where you want following snippet
<div id="s-css-s--menu"></div>It will be auto populated with buttons for available CSS themes.
Simple CSS Switch has no default positioning and style.
Example style can be seen in simple-css-switch.css