Simple jQuery plugin to switch css stylesheet skin theme on your template demo
<link href="dist/jquery.colorpanel.css" rel="stylesheet">
<link href="skins/default.css" id="cpswitch" rel="stylesheet">
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>
<script src="dist/jquery.colorpanel.js"></script>
$('#colorPanel').ColorPanel({
styleSheet: '#cpswitch'
, animateContainer: '#wrapper'
, colors: {
'#4B77BE': 'skins/default.css'
, '#16a085': 'skins/seagreen.css'
, }
});
{
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 |