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