colorpanel
Simple jQuery plugin to switch css stylesheet skin theme on your template demo
How to use
Include plugin Stylesheet on your head
<link href="dist/jquery.colorpanel.css" rel="stylesheet"> Include skin Stylesheet on your head with id
<link href="skins/default.css" id="cpswitch" rel="stylesheet"> Add panel html code within your body tag
If you want to have transition effect on change of stylsheet have the panel code out of your animate container div : ie #wrapper
<div id="colorPanel" class="colorPanel"> <a id="cpToggle" href="#"></a> <ul></ul> </div> Include script on your footer below jQuery
<script src="dist/jquery.colorpanel.js"></script> call the plugin code on your document ready event
$('#colorPanel').ColorPanel({ styleSheet: '#cpswitch' , animateContainer: '#wrapper' , colors: { '#4B77BE': 'skins/default.css' , '#16a085': 'skins/seagreen.css' , } }); Options
{ styleSheet: '#cpswitch' , colors: { '#1abc9c': 'skins/default.css' , '#2980b9': 'skins/blue.css' , '#c0392b': 'skins/red.css' , } , linkClass: 'linka' , animateContainer: false } | Name | Type | Default | Description |
|---|---|---|---|
| styleSheet | string | selector | '#cpswitch' | pass the id of your skin stylesheet link tag |
| colors | object | { '#1abc9c': 'skins/default.css' , '#2980b9': 'skins/blue.css' , '#c0392b': 'skins/red.css' , } | list of color options you are providing as object. Hex color codes as Key and css file path as value |
| animateContainer | string | Selector or false | false | pass the container div for whole page to make fadeIn , fadeOut transition |
| linkClass | string | 'linka' | pass the classname for color anchor |
