Colorpanel – jQuery Plugin to Switch CSS Stylesheet Skin Theme

Colorpanel is a simple jQuery plugin to switch css stylesheet skin theme on your template demo

Usage

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 stylesheet 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
            }

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...