Simple jQuery plugin to switch css stylesheet skin theme on your template demo

Follow @infario Download Star

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>

Include script on your footer below jQuery

 <script src="dist/jquery.colorpanel.js"></script>

call the plugin code on your document ready event

            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
File Icons

About Plugin

The plugin targeted people who sells their templates with multiple color skin choices. It will be quite easy to configure the color codes with css files. In future we have plan to add layout selection icons within the plugin