В вид материалов мини чата:

Код

<div class="cBlock1" style="background: #2f2f2f;box-shadow: 0px 0px 1px 0px rgba(21, 21, 21, 0.78); ; ; padding:0 4px 5px 2px;margin-bottom:5px; border: 1px solid rgba(0, 0, 0, 0.23);border-radius: 15px;">  
  <div style="text-align:left;">  
  <style>
  .com_wp {
  border-radius: 50%;
  background: #232323;
  border: 1px solid rgba(64, 64, 64, 0.26);
  width: 25;
  height: 25;
  transition: 1s;
}
  .block {
  background: #383838;
  border-radius: 18px;
  border: 1px solid #1b1b1b;
  padding: 4px;
  position: relative;
  color: #fff;
  margin-top: 1%
  }
  .block::after {
  content: '';  
  position: absolute; /* Абсолютное позиционирование */
  left: 47%; bottom: -10px; /* Положение треугольника */
  border: 5px solid transparent; /* Прозрачные границы */
  border-top: 5px solid #1b1b1b; /* Добавляем треугольник
  }
  </style>
   
  <div class="block">
<img alt="" width="25" class="com_wp" border="0" src="http://theps.3dn.ru/_ld/0/04933278.png">

<!-- <Администратор> -->

  <a style="text-decoration: none; vertical-align:8px;" href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;"><b><font size="1" face="Tahoma" color="#ababab">$NAME$</font></b></a>
  </div><br> </div>  
  <div class="cMessage" style="text-align:left;"><div style=" font-family: arial,sans-serif;font-size: 11px; color: rgb(205,216,228);text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);; margin: 2px;padding: 5px; position: relative; text-decoration: none;">$MESSAGE$</div></div>  
  </div>