<div contenteditable="true" class="uHide uAd u2">Color Post Add</div>  
<i class="uPostColor">Aa</i><div class="uColor u1"></div>  
<div class="uColor u2"></div>  
<div class="uColor u3"></div>  
<div class="uColor u4"></div>  
<div class="uColor u5"></div>  
<div class="uColor u6"></div>  
<div class="uColor u7"></div>  
<div class="uColor u8"></div>  
<div class="uColor u9"></div>  
<div class="uColor u10"></div>  
<div class="uColor u11"></div>  
<div class="uColor u12"></div>  
<div class="uColor u13"></div>  
<div class="uColor u14"></div>  
<div class="uColor u15"></div>  
<div class="uColor u16"></div>  
<div class="uColor u17"></div>  
<div class="uColor u18"></div>

<script>$('.uPostColor').click(function() {  
$('.uHide, .uColor').slideToggle('slow');  
});  
$('.uColor').click(function() {  
uColors = $(this).attr('class');  
$('.uAd').removeAttr('class').addClass('uHide uAd '+uColors+'').removeClass('uColor');  
$('.uHide').show();  
});  
$(".uHide").bind("keydown",function(e) { if(e.keyCode == 13){  
$('.uHide, .uColor').slideToggle('slow');  
uColoBB = $('.uAd').attr('class');  
uColoBB = uColoBB.replace('uHide','').replace('uAd','uAdd');  
uColoText = $('.uAd').html();  
$('textarea#message').val('[uColor="'+uColoBB+'"]'+uColoText+'[/uColor]');  
$('input#send').click();  
return false  
}});  
function uColorit() {  
$('.cMessage').each(function(){  
$(this).html($(this).html().split('[uColor="').join('<div class="').split('"]').join('">').split('[/uColor]').join('</div>'));  
});  
}; uColorit();</script>

.uColor {width: 20px;height: 20px;display: inline-block;border-radius: 50%;margin: 0px 5px;float:left; position: relative;  
  top: 6px;}  
.u1 {background-color: rgb(252, 216, 114);}  
.u2 {background-image: linear-gradient(45deg, rgb(252, 216, 114) 0%, rgb(243, 83, 105) 100%);}  
.u3 {background-color: rgb(243, 83, 105);}  
.u4 {background-image: linear-gradient(45deg, rgb(102, 244, 133) 0%, rgb(23, 172, 255) 100%);}  
.u5 {background-color: rgb(74, 144, 226);}  
.u6 {background-image: linear-gradient(45deg, rgb(252, 54, 253) 0%, rgb(93, 63, 218) 100%);}  
.u7 {background-color: rgb(95, 102, 115);}  
.u8 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18309289_127281221175543_27870364906291200_n.jpg?oh=092df3e13bb9b594bdd884f229af7b4f&oe=59F5C522); background-size: cover;}  
.u9 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18508529_373215599741793_4110353877742649344_n.jpg?oh=71cdfa5ef7b352318326591ad5b0489b&oe=5A0CC51F); background-size: cover;}  
.u10 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18316491_1372847866113832_8579386684896968704_n.jpg?oh=a71e904b803ec262a107f54134a12cba&oe=59C42896); background-size: cover;}  
.u11 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18553430_1872549626347024_5629736332940017664_n.jpg?oh=b2dfabdefe51b5134e2942f2355804e7&oe=5A051755); background-size: cover;}  
.u12 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18553343_1421927967874386_4098389992936570880_n.jpg?oh=eb9a09d6cc5e52f3de92ab23cab5efc1&oe=59F96878); background-size: cover;}  
.u13 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18554185_294151671029285_3415657511913521152_n.jpg?oh=99e3617b295674d7a33b094efc12ae23&oe=59FF3587); background-size: cover;}  
.u14 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18900309_118306792098285_206637795802873856_n.jpg?oh=51ed2c4a3a6c653d183ced262622bb61&oe=59C6A58D) bottom; background-size: cover;}  
.u15 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18405796_1192421064216862_5292923657557901312_n.jpg?oh=c3b15bdc95e9e2816686e9e9b979c1f4&oe=5A013D56) bottom; background-size: cover;}  
.u16 {background-color: rgb(17, 17, 17);}  
.u17 {background-color: red;}  
.u18 {background-color: #e9ebee;color: #515e8c !important;}  
.uColorAdd, .uColor, .uHide {display:none}  
.uAdd, .uAd {font-family: Helvetica, Arial, sans-serif;color: rgb(255, 255, 255);  
  font-size: 30px;  
  font-weight: 700;  
  line-height: 1.2em;  
  padding: 100px 27px;text-align: center;outline-style: none;}  
i.uPostColor {  
  background: palegreen;  
  font-size: 13px !important;  
  border-radius: 50%;  
  font-style: normal;  
  color: #3b5998 !important;  
  padding: 5px;  
  font-family: serif;  
  display: inline-block;  
  margin-top: 4px;  
}