Colour Picker

Админ Панель-Внешний вид-Ваш стиль-Глобальные-globalTemplate найти:

</body></html>

Выше вставить:

<div id='colourPicker'>
    	<div id='colourOne' class='colourOption'></div>
    	<div id='colourTwo' class='colourOption'></div>
      <div id='colourThree' class='colourOption'></div>
    	<div id='colourFour' class='colourOption'></div>
    	<div id='colourFive' class='colourOption'></div>
    	<div id='colourSix' class='colourOption'></div>
</div>  
<script>
jQuery(document).ready(function($) {
	$('.colourOption').on('click', function() {
		$('#colourPicker *').removeClass('selectedColour');
		/* This switches on the selectedColour class for that div. */
		$(this).toggleClass('selectedColour');
		if ($(this).attr('id') == 'colourOne') {
			$('body').addClass('bodyOne');
			$('body').removeClass('bodyTwo bodyThree bodyFour bodyFive bodySix');
		} else if ($(this).attr('id') == 'colourTwo') {
			$('body').addClass('bodyTwo');
			$('body').removeClass('bodyOne bodyThree bodyFour bodyFive bodySix');
		} else if ($(this).attr('id') == 'colourThree') {
			$('body').addClass('bodyThree');
			$('body').removeClass('bodyOne bodyTwo bodyFour bodyFive bodySix');
		} else if ($(this).attr('id') == 'colourFour') {
			$('body').addClass('bodyFour');
			$('body').removeClass('bodyOne bodyTwo bodyThree bodyFive bodySix');
		} else if ($(this).attr('id') == 'colourFive') {
			$('body').addClass('bodyFive');
			$('body').removeClass('bodyOne bodyTwo bodyThree bodyFour bodySix');
		} else if ($(this).attr('id') == 'colourSix') {
			$('body').addClass('bodySix');
			$('body').removeClass('bodyOne bodyTwo bodyThree bodyFour bodyFive');
		}

	});

}); 
</script>

Админ Панель-Внешний вид-Ваш стиль-CSS и нажмите Добавить CSS-файла.

Название: colourPicker

#colourPicker {
width: 30px;
border-style: solid;
border-width: 2px;
border-color: #2C3E50;
background-color: #2C3E50;
float: right;
position: fixed;
right: 2px;
top: 40%;
}
#colourPicker div {
display: block;
margin: 5px;
width: 5px;
height: 40px;
border-style: solid;
cursor: pointer;
-webkit-transition: border-width .5s ease;
-moz-transition: border-width .5s ease;
-ms-transition: border-width .5s ease;
-o-transition: border-width .5s ease;
transition: border-width .5s ease;
}
.colourOption{
  	border-width: 0 15px 0 0;
}
#colourOne {
	background-color: #3498DB;
	border-color: #34495E;
}
#colourTwo {
	background-color: #9B59B6;
	border-color: #34495E;
}
#colourThree {
	background-color: #2ECC71;
	border-color: #34495E;
}
#colourFour {
	background-color: #E74C3C;
	border-color: #34495E;
}
#colourFive {
	background-color: #E67E22;
	border-color: #34495E;
}
#colourSix {
	background-color: #fff;
	border-color: #34495E;
}
#colourOne:hover {
	border-width: 0 0 0 10px;
	-webkit-transition: border-width .5s;
	-moz-transition: border-width .5s ease;
	-ms-transition: border-width .5s ease;
	-o-transition: border-width .5s ease;
	transition: border-width .5s ease;
}
#colourTwo:hover {
	border-width: 0 0 0 10px;
	-webkit-transition: border-width .5s, width .5s;
	-moz-transition: border-width .5s, width .5s;
	-ms-transition: border-width .5s, width .5s;
	-o-transition: border-width .5s, width .5s;
	transition: border-width .5s, width .5s;
}
#colourThree:hover {
border-width: 0 0 0 10px;
-webkit-transition: border-width .5s, width .5s;
-moz-transition: border-width .5s, width .5s;
-ms-transition: border-width .5s, width .5s;
-o-transition: border-width .5s, width .5s;
transition: border-width .5s, width .5s
}
#colourFour:hover {
	border-width: 0 0 0 10px;
	-webkit-transition: border-width .5s, width .5s;
	-moz-transition: border-width .5s, width .5s;
	-ms-transition: border-width .5s, width .5s;
	-o-transition: border-width .5s, width .5s;
	transition: border-width .5s, width .5s;
}
#colourFive:hover {
	border-width: 0 0 0 10px;
	-webkit-transition: border-width .5s, width .5s;
	-moz-transition: border-width .5s, width .5s;
	-ms-transition: border-width .5s, width .5s;
	-o-transition: border-width .5s, width .5s;
	transition: border-width .5s, width .5s;
}
#colourSix:hover {
	border-width: 0 0 0 10px;
	-webkit-transition: border-width .5s, width .5s;
	-moz-transition: border-width .5s, width .5s;
	-ms-transition: border-width .5s, width .5s;
	-o-transition: border-width .5s, width .5s;
	transition: border-width .5s, width .5s;
}
.selectedColour {
	border-width: 0 0 0 10px;
}
.bodyOne {
  	background-color: #3498DB;
}
.bodyTwo {
  	background-color: #9B59B6;
}
.bodyThree {
  	background-color: #2ECC71;
}
.bodyFour {
  	background-color: #E74C3C;
}
.bodyFive {
  	background-color: #E67E22;
}
.bodySix {
  	background-color: #fff;
}