Всплывающий мини-чат в углу сайта + красивый вид

laym [ Offline ]

Дата: Воскресенье, 02.09.2012, 02:58 | Сообщение # 1

Пользователь №: 13

Сообщений: 4

скрин чата: http://s019.radikal.ru/i607/1208/a8/c9c0e2bbc5da.jpg

Вот скрипт удобного мини-чата, который плавает в правом углу на всех страницах не мешая глазам, а если нужно зайти в чат и отписаться, то он открывается легким нажатием и закрывается так же.

Установка чата:

1) Активируем мини-чат (модуль)
2) В нижнею часть сайта, после футера добавляем:

Code

3) ПУ>Управление дизайном>Мини-чат>Вид Материалов
заменяем все на:

Code

<div style="text-align:left;background:#ffffff;border:1px solid #CCD3DA;padding:2px;">

   <table width="100%" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top"><div style="font:8pt"><a href="javascript:void('Apply to')" style="color:#000000;" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;">$NAME$</a></div></td>
   <td width="85%" align="right" valign="top"><a href="javascript://" style="font:8pt">$TIME$</a></td></tr></table>
   <div style="text-align:left;font-size:9pt;">$MESSAGE$</div></fieldset>

   </div><div style="margin-top: 4px;"></div>

4)ПУ>Управление дизайном>Мини-чат>Форма добавления сообщений
Заменяем все на:

Code

<table width="100%">
   <tr>
   <td align="left" valign="top">
   <textarea name="mcmessage" id="mchatMsgF" title="Сообщение" onkeyup="countMessLength();" onfocus="countMessLength();"></textarea>
   <div style="float:left;"><div id="chatb" href="$SMILES_URI$"><img src="http://s017.radikal.ru/i431/1208/48/02e8151d2431.gif"></div>
   <div id="chatb" href="$RELOAD_URI$"><img src="http://s017.radikal.ru/i404/1208/17/69fcd9b33efb.png"></div>
   <div id="chatb" href="$BBCODES_URI$"><img src="http://i081.radikal.ru/1208/dc/83989baa30fc.png"></div>
   <div id="chatb" href="$MSGCTRL_URI$"><img src="http://i068.radikal.ru/1208/d4/542d5289a6d2.png"></div></div><div id="reloadSec" style="float:right;"></div>
   $_SECURITY_CODE$
   </td>
   <td width="10%" align="right" valign="top">
   <div id="buttonsubmit" onclick="$('#mchatBtn').click();">ОК</div>
   </td>
   </tr>
   </table>
   <style>
   #mchatMsgF{padding:4px;margin-top:6px;border:1px solid #B5B8C8; background:#ffffff url(http://s011.radikal.ru/i316/1208/9b/e1c038bef0f7.gif) repeat-x 0 0;width:100%;height:42px;font-family:tahoma;font-size:12px;font-weight:bold;}
   #buttonsubmit{background:#6386d0;border:1px solid #3358a5;padding:13px;margin-top:6px;font-size:12px;color:#FFF;font-weight:bold;cursor:pointer;}
   #buttonsubmit:hover{background:#7e9fe4;border:1px solid #3358a5;padding:13px;margin-top:6px;font-size:12px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:underline;}
   #buttonsubmit:active{background:#4f72bd;border:1px solid #3358a5;padding:13px;margin-top:6px;font-size:12px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:underline;}
   #chatb{background:#FFF;border-left:1px solid #B5B8C8;border-right:1px solid #B5B8C8;border-bottom:1px solid #B5B8C8;padding:4px;font-size:12px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:underline;display:inline-block;}
   </style>
   <div style="display:none;"><input type="submit" style="width: 30px;" id="mchatBtn" class="mchat" value="OK"></div>

   <?if($FLD_SECURE$)?>
   <table border="0" cellpadding="1" cellspacing="1" width="100%">
   <tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr>
   </table>
   <?endif?>

Готово) радуйтесь классным мини-чатом и его внешним видом, если Вам не нравится всплывающий мини-чат, то Вы можете установить себе только вид.