CodePen

HTML

            
              
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Style Switcher */

window.console = window.console || (function(){
	var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
	return c;
})();

/* background images */
$(document).ready(function(){ 
  
  var startClass = $.cookie('mycookie');
  $("body").addClass("wood");

/* wood */
$("#wood").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('wood');
  $.cookie('mycookie','wood');
});
  
/* crossed */
$("#crossed").click( function(){ 
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('crossed');
  $.cookie('mycookie','crossed');
});

/* fabric */
$("#fabric").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('fabric');
  $.cookie('mycookie','fabric');
});

/* linen */
$("#linen").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('linen');
  $.cookie('mycookie','linen');
});

/* diagmonds */
$("#diagmonds").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('diagmonds');
  $.cookie('mycookie','diagmonds');
});

/* triangles */
$("#triangles").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('triangles');
  $.cookie('mycookie','triangles');
});

/* triangles */
$("#black_mamba").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('black_mamba');
  $.cookie('mycookie','black_mamba');
});

/* vichy */
$("#vichy").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('vichy');
  $.cookie('mycookie','vichy');
});

/* back_pattern */
$("#back_pattern").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('back_pattern');
  $.cookie('mycookie','back_pattern');
});

/* checkered_pattern */
$("#checkered_pattern").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('checkered_pattern');
  $.cookie('mycookie','checkered_pattern');
});

/* diamond_upholstery */
$("#diamond_upholstery").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('diamond_upholstery');
  $.cookie('mycookie','diamond_upholstery');
});

/* lyonnette */
$("#lyonnette").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('lyonnette');
  $.cookie('mycookie','lyonnette');
});

/* graphy */
$("#graphy").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('graphy');
  $.cookie('mycookie','graphy');
});

/* black_thread */
$("#black_thread").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('black_thread');
  $.cookie('mycookie','black_thread');
});

/* subtlenet2 */
$("#subtlenet2").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('outer-bg');
  $("body").removeClass('hex');
  $("body").addClass('subtlenet2');
  $.cookie('mycookie','subtlenet2');
});

/* outer-bg */
$("#outer-bg").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
    $("body").removeClass('hex');
  $("body").addClass('outer-bg');
  $.cookie('mycookie','outer-bg');
});

/* hex */
$("#hex").click( function(){ 
  $("body").removeClass('crossed');
  $("body").removeClass('fabric');
  $("body").removeClass('linen');
  $("body").removeClass('wood');
  $("body").removeClass('diagmonds');
  $("body").removeClass('triangles');
  $("body").removeClass('black_mamba');
  $("body").removeClass('vichy');
  $("body").removeClass('back_pattern');
  $("body").removeClass('checkered_pattern');
  $("body").removeClass('diamond_upholstery');
  $("body").removeClass('lyonnette');
  $("body").removeClass('graphy');
  $("body").removeClass('black_thread');
  $("body").removeClass('subtlenet2');
  $("body").removeClass('outer-bg');
  $("body").addClass('hex');
  $.cookie('mycookie','hex');
});



if ($.cookie('mycookie')) {
  $('body').addClass($.cookie('mycookie'));
}

});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................