Modèles

<style type='text/css'>
#name #tba-header { background-color: #c76e92; }
#name div.tba-text { background-color: #c76e92;  }
#name .tba-footer a { color: #c76e92; }
#name div.tba-text::after { border-color: #c76e92; }
/* STATUS */
#name .tba-status span.fa.fa-check-circle { color: #a9da88; }
</style>

<center>
<div id="name"><div id="tba-aim"><div id="tba-header"><img src="http://placehold.it/85x85"/><div class="tba-info"><div class="tba-name">username</div><div class="tba-display">first last</div><div class="tba-status"><span class="fa fa-check-circle"></span>short status</div></div></div>
<div class="tba-box"><div class="tba-text">text here!</div></div>
<div class="tba-footer"><table cellpadding="0" cellspacing="0"><td class="tba-msg"><img src="http://i.imgur.com/jTJZWEE.gif" /></td><td><a href="http://shine.b1.jcink.com/index.php?showuser=3019">Send</a></td></table></div></div></div>
</center>

<style type="text/css">
.bch1 { width: 110px; height: 200px; padding: 45px 25px; background-color:#827ccd; } .bch1a { position: relative; width: 90px; height: 90px; margin: 10px 10px 15px; } .bch1a img { position: relative; width: 90px; height: 90px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .bch1b { color: #fcfcfc; font-family: montserrat; font-size: 15px; font-weight: 700; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; word-spacing: 0px; line-height: 100%; } .bch1a .online { position: absolute; bottom: 0px; right: 5px; width: 13px; height: 13px; background-color: #78c366; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; z-index: 2; border: 3px solid #827ccd; } .bch1c { margin-top: 5px; color: rgba(255,255,255,0.5); font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; }.bch2 { width: 248px; height: 288px; background-color: #fefefe; border: 1px solid #EDEEF3; } .bch2a { padding: 10px; color: #B2BAC3; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; border-bottom: 1px solid #E7EAF2; } .bch2a i { float: right; } .bch2b { height: 190px; padding: 10px; overflow-y: auto; overflow-x: hidden; margin-right: 5px; } .bch2b::-webkit-scrollbar { width: 3px; } .bch2b::-webkit-scrollbar-track { background: transparent; } .bch2b::-webkit-scrollbar-thumb { background-color: #e5e5e5; border-radius: 20px; } .bch2b::-webkit-scrollbar-button:start:decrement, .bch2b::-webkit-scrollbar-button:end:increment { height: 5px; display: block; background-color: #fcfcfc; border: 0px; }.bch2c { width: 228px; height: 28px; padding: 10px; background-color: #F8F8F8; color: #B2BAC3; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; border-top: 1px solid #E7EAF2; }.bch2d { width: 206px; height: 6px; padding: 10px; background-color: #fefefe; color: #B2BAC3; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 6px; border: 1px solid #EDEFF3; }.bch2d span { float: right; color: #A49FDB; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 6px; }.bch2d i { float: left; font-size: 12px; line-height: 6px; margin-right: 8px; }.bchbubble { display: inline-block; clear: both; float: right; position: relative; max-width: 130px; padding: 8px 12px; background-color: #827ccd; color: #fafafa; font-family: montserrat; font-size: 9px; font-weight: 400; font-style: normal; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; word-wrap: break-word; margin: 3px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; z-index: 4; }.bchbubble:after { content: ""; position: absolute; bottom: 0px; right: -26px; width: 15px; height: 30px; clip: rect(15px,20px,45px,0px); border-color: #827ccd; border-width: 0px 12px; border-style: solid; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; z-index: 3; }#NAME .bch1, #NAME .bchbubble { background-color: #HEXCODE }#NAME .bchbubble:after, #NAME .bch1a .online { border-color: #HEXCODE }#NAME .bch2d span { color: #HEXCODE }</style>

<center>
<div id="NAME">
<table cellpadding="0" cellspacing="0"><tr><td><div class="bch2">
<div class="bch2a">To: First Last<i class="fa fa-chevron-right"></i></div><div class="bch2b">
<div class="bchbubble">message here~</div>
<div class="bchbubble">also a message?</div>
<div class="bchbubble">holy cakeballs, batman! another message!</div>
</div><div class="bch2c"><div class="bch2d"><i class="fa fa-camera"></i>Send Message...<span>Send</span></div></div></div></td><td><div class="bch1"><div class="bch1a"><a href="http://shine.jcink.net/index.php?showuser=3019"><img src="https://placehold.it/100x100"></a><div class="online"></div></div><div class="bch1b">First Last</div><div class="bch1c">"status message here"</div></div></td></tr></table></div>
</center>