https://github.com/bloycey/styleswitcher
A jQuery plugin to switch stylesheets on the fly.
https://github.com/bloycey/styleswitcher
2018 jquery live-project
Last synced: 17 days ago
JSON representation
A jQuery plugin to switch stylesheets on the fly.
- Host: GitHub
- URL: https://github.com/bloycey/styleswitcher
- Owner: bloycey
- Created: 2018-06-03T13:13:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-09T23:21:20.000Z (almost 5 years ago)
- Last Synced: 2025-04-11T20:03:20.593Z (17 days ago)
- Topics: 2018, jquery, live-project
- Language: HTML
- Homepage: https://bloycey.github.io/styleSwitcher/
- Size: 47.9 KB
- Stars: 7
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Documentation
StyleSwitcher dynamically appends alternate stylesheets to the `head` of your site. This allows you to overwrite your main CSS file with new styles and preview them instantly. StyleSwitcher can be applied to any `select` element and you can map as many alternate stylesheets as you want - the plugin will clean up as it goes and only load one alternate stylesheet at a time.
## Quick Start
1. Set up your alternate stylesheets using the following structure:
And within the customstyles folder:
The path to your custom stylesheets should be `css/customstyles/`
2. Set up your HTML as follows:
```
Default Theme
Blue Theme
Green Theme
Purple Theme
```
The value of each option should correlate with one of the alternate stylesheets saved on your server. By default each of your custom stylesheets will _need_ to start with the prefix `custom`. You can, however, change the prefix using the advanced options below.
One of your options should have the value "defaultstyles". When this option is selected all custom stylesheets are removed.
3. Add the styleSwitcher.js file to your footer after jQuery but before your custom.js file.
4. Initialise the plugin by calling the styleSwitcher function on a `select` tag.
```
$(document).ready(function(){
$('#colorpick').styleSwitcher();
})
```
5. That's it! You should now notice that your styles change as you select different options from the select dropdown.
---
## Advanced Usage
There are several options that you can specify. They defaults for these options are as follows:
```
$('#colorpick').styleSwitcher({
path: "css/customstyles/",
prefix: "custom",
inputType: "select",
session: true
})
```
`path` - Accepts a string. Determines the path to your custom css stylesheets.
`prefix` - Accepts a string. determines the prefix for your custom css stylesheets.
`inputType` - Accepts `"select"` or `"radio"` or `"button"`.
If using radio buttons you should structure your HTML as follows:
```
Default Theme
Blue Theme
Green Theme
Purple Theme
```
If using buttons you should structure your HTML as follows (note the use of the data attributes!):
```
Default Theme
Blue Theme
Green Theme
Purple Theme
```
`session` - Accepts a boolean. Determines whether or not you selection is stored in session storage and will endure after page reloads. This is set to 'true' by default.
---