Code script change color,layourt sites !

quicksetting.js

(function($){
    $(document).ready(function(){
        var relativeDir = Drupal.settings.paththeme+'/css/';
        /* ***************************************
         * Reading Cookies for stored values
         *******************************************/

        (function(){
            if(readCookie("ssTruckingStyle") !== null){
                var styleVal = readCookie("ssTruckingStyle");
                changeStyle(styleVal);
            }
        })();
        /* ***************************************
         * SlideIn and SlideOut animation on click
         *******************************************/

        $('#styles-button').on('click', function(e){
            e.preventDefault();
            var switcherWidth = $('#block-mod-switch-layout-mod-switch-style').width();
            if($('#block-mod-switch-layout-mod-switch-style').hasClass('opened')){
                $('#block-mod-switch-layout-mod-switch-style').animate({
                    left: -switcherWidth
                }, 700, function(){
                    $(this).removeClass('opened');
                });
            }else{
                $('#block-mod-switch-layout-mod-switch-style').animate({
                    left: 0
                }, 700, function(){
                    $(this).addClass('opened');
                });
            }

        });
        /********************
           Layout Style
         *******************/
        $item = $('.drupalposs-wrapper')
        $('.themestyle a').each(function(){
            var el = $(this);
            el.on('click',function(){
                var class_old = this.getAttribute("data-value");
                $('.themestyle a').removeClass('active');

                el.addClass('active');
                switch(this.getAttribute("data-value"))
                {
                    case 'boxed':
                        $item.removeClass('framed rounded');
                        break;
                    case 'framed':
                        $item.removeClass('boxed rounded');
                        break;
                    case 'rounded':
                        $item.removeClass('boxed framed');
                        break;
                    default:
                        $item.removeClass('boxed framed rounded');
                        break;
                }
                $item.addClass(this.getAttribute("data-value"));


            });
        });
        /* ******************
         * Style Changing
         *********************/

        $('.styles-list li').on('click', function(e){
            e.preventDefault();
            var styleVal = $(this).attr('class');
            changeStyle(styleVal);
            createCookie("ssTruckingStyle", styleVal, 7);
        });

        function changeStyle(styleVal){
            $('link[title="activestyle"]').remove();
            var stylesheet = '<link rel="stylesheet" href="' + relativeDir + styleVal + '.css" type="text/css" />';
            $('head').append(stylesheet);
        }

        function createCookie(name,value,days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
            }
            else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)===' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }

        function eraseCookie(name) {
            createCookie(name,"",-1);
        }

    });
}(jQuery))