colorpanel's Introduction

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

Recommend Projects