ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Мини чат сайта стиль светло серый

Мини чат сайта стиль светло серый

Очень удобный по своим функциям мини чат для вашего сайта. На картинке показано два одинаковых вида. Только разница в том что вид добавление разный.
Но я все залью и опишу что где, просто я проверял на тестовом сайте, работает сам чат или нет. Все проверил и все отлично работает. И вам только останется его установить и выбрать вид добавление какой вам нравиться.
А так этот мини чат подойдет отлично как на серый шаблоны сайта, так и на светлый дизайн. Сам ник находиться по верх сообщение, что очень грамотно создано. Просто так удобно читать и что по мне красиво смотрится на сайте.
Поехали:
Идеи в свою админ панель и заходим в мини чат - вид материала и от туда все убираем и ставим этот код.

Код

<div class="cBlock">
  <div class="chat">
  <span style="float:right">$TIME$</span>
  <div style="text-align:left;">
  <div style="padding-left:7px;"><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;"><b>$NAME$</b></a></div>
  </div>
  </div>
  <div class="cMessage" style="text-align:left;">$MESSAGE$</div>
  </div>

Теперь идем в CSS и ставим эти стили

Код

/* Стиль чата */
.mchat textarea {border:1px solid #DBDBDB;background:#f7f7f7;padding-right:5px;}
.mchat textarea:hover {background:#fff;}
.mchat input {background:#E8E8E8;border:1px solid #DBDBDB;border-left:none;height:40px;margin-left:-2px;width:20px;}
.gost {background:#fff;border:1px solid #DBDBDB;padding:5px;border-left:none;text-align:left;margin-left:-3px;padding-bottom:2px;margin-top:-5px;height:50px;font:10px Tahoma;}
.op_fon {background:#f7f7f7;border:1px solid #DBDBDB;border-right:1px dotted #ccc;width:40px;height:50px;}
.op_fon img {padding-left:5px; filter:progid:DXImageTransform.Microsoft.alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
.option {border:1px solid #ccc;height:20px;margin:5px 0;width:100%;padding-top:3px;background:#fff;filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
.option:hover {filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;opacity:1;}
.chat {background:#E8E8E8;border:1px solid #DBDBDB;padding:3px 0;font:11px Tahoma;border-top:none;}
.cBlock {margin:0px;padding:0px;border:none;}
.cMessage {background:#F8F8F8;border:1px solid #DBDBDB;border-top:none;padding:4px;font:11px Tahoma;}

Форма добавления: