Страница 1 из 11
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Мини-чат » Всплывающий мини чат для Укоз
Всплывающий мини чат для Укоз
serfer
/avatar/51/4810-053211.gif
1');return false;" rel="nofollow" href="javascript://" name="6555">
09.10.2014 в 15:50 На мой взгляд получился красивый мини чатик, который будет находится в виде ненавязчивой кнопки в нижнем левом углу экрана вашего сайта, при нажатии на которую будет всплывать непосредственно сам мини чат.



И так перейдем к установке:

1)Активируйте мини чат в ПУ вашего сайта uCoz

2)Заходим в Вид материалов мини чата и заменяем там всё на:
Код
<?if($NUMBER$='1')?>    
<style type="text/css">    
body{background: url('http://www.wse-online.ru/minichat/fon_mini_chata-1.jpg');}    
</style><?endif?>
<div class="cBlock{background:transparent;}" style="border: 1px solid #B0B0B0; padding:0 4px 5px 2px;margin-bottom:3px;">
<div style="float:right;font-size:10px;" title="$DATE$"><font color="#FFFF00">$TIME$</div>
<div style="text-align:left;">
<?if($USERNAME$)?><a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow"><img alt="" <img src="$AVATAR_URL$" width="30px" align="left"> <?endif?>
<?if($USER_ID$=1)?><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();    
parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;">    
<span style="color:red; font-weight: bold; ">$NAME$</span></a>    
<?else?>    
<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><?endif?>
<?if($EMAIL$)?> <a href="$EMAIL_JS$" title="$STR_EMAIL$">E</a><?endif?>
<?if($SITE$)?> <a rel="nofollow" href="$SITE$" target="_blank" title="$STR_URL$">W</a><?endif?>
</div>
<div class="cMessage" style="text-align:left;"><b><font color="#E0FFFF"></b>$MESSAGE$</font></div>
<?if($CUSTOM1$)?><br>$STR_CUSTOM1$: $CUSTOM1$<?endif?>
<?if($CUSTOM2$)?><br>$STR_CUSTOM2$: $CUSTOM2$<?endif?>
</div>


Сохраняете

3)Далее заходим в Форму добавления сообщений и заменяем всё на:
Код
<?if(!$CAN_ADD$)?><div align="center"><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?></div><?else?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td>$FLD_AUTOUPD$</td>
<td width="70%" align="right">
<a href="$RELOAD_URI$" title="Обновить"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_obnovit.jpg" width="13" height="15"></a>
<?if($SMILES_URI$)?> <a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_smajla-1.jpg" width="13" height="15"></a><?endif?>
<?if($BBCODES_URI$)?> <a href="$BBCODES_URI$" title="BB-Коды"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_b.jpg" width="13" height="15"></a><?endif?>
<?if($MSGCTRL_URI$)?> <a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_upravlenija.jpg" width="15" height="15"></a><?endif?>
</td></tr></table>

<?if(!$USER_LOGGED_IN$)?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td colspan="2">$FLD_NAME$</td></tr>
<tr><td width="50%">$FLD_EMAIL$</td><td>$FLD_URL$</td></tr>
</table>
<?endif?>

<?if($FLD_CUSTOM1$ || $FLD_CUSTOM2$)?>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="50%">$FLD_CUSTOM1$</td><td>$FLD_CUSTOM2$</td></tr>
</table>
<?endif?>

<?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?>

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr><td width="65%" rowspan="2">$FLD_MESSAGE$</td>
<td align="center" valign="top"><div style="font-size:10px;">$LENGTH_COUNTER$</div></td>
</tr><tr><td align="center" valign="bottom">$SUBMIT$</td></tr></table>
<?endif?>


Сохраняете

4)И наконец заходите в "Дизайн" - "Управление дизайном (CSS)" - "нижняя часть сайта" и в самый низ вашего кода вставляете это:
Код
<style>        
        .chat_box {display:none;position:fixed;bottom:15px;left:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;}        
        .chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://www.wse-online.ru/minichat/ikonka_zakrytija-1.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}        
.chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}        
               
        div.chat_button {display:block;width:75px;height:75px;background:url('http://www.wse-online.ru/minichat/ikonka_chata.png') no-repeat;position:fixed;bottom:15px;left:15px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}        
div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}        
</style>        
<div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div>        
<div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div>        
<div id="chatBox">$CHAT_BOX$</div>        
</div>


Сохраняете и радуетесь своему новому мини чату!

Да и чуть не забыл такой фон как на скриншоте у мини чата может появится не сразу после установки вами мини чата,а после написания первого сообщения в мини чат и нажатия клавиши обновить мини чат. cool
TicTac
/avatar/87/668404.gif
2');return false;" rel="nofollow" href="javascript://" name="6556">
09.10.2014 в 17:13 Зачем вообще нужен фон в мини чате? Сообщения должны читаться легко. Лично для меня, так сообщения сливаются с фоном. И это не есть хорошо rtfm
serfer
/avatar/51/4810-053211.gif
3');return false;" rel="nofollow" href="javascript://" name="6557">
09.10.2014 в 19:54 Ну вообщето фон нужен для красоты,а если не нравится цвет текста - выберете другой чтоб не сливался с фоном.

Замените в первом коде в этой строчке: <div class="cMessage" style="text-align:left;"><font color="#FFFF00">$MESSAGE$</font></div>
Выделенное красным на другой цвет и все дела.

Лично я стараюсь в меру своих возможностей сделать сайт красивее,а мини чат это же не форум.Там люди напишут пару слов : Привет всем! или Какая прекрасная погода! и поставят пару смайлов. Там и вчитываться не в чего smile
exclusiv...
/avatar/01/4333-414916.png
4');return false;" rel="nofollow" href="javascript://" name="6558">
09.10.2014 в 20:11 serfer, всеравно. Текст должен быть читабельным. Фон можно было бы тогда подобрать другой
exclusiv...
/avatar/01/4333-414916.png
5');return false;" rel="nofollow" href="javascript://" name="6559">
09.10.2014 в 20:12 и выделить сообщения каждого пользователя контурами
serfer
/avatar/51/4810-053211.gif
6');return false;" rel="nofollow" href="javascript://" name="6560">
09.10.2014 в 21:08 Переделано все читабельно tommy
exclusiv...
/avatar/01/4333-414916.png
7');return false;" rel="nofollow" href="javascript://" name="6561">
09.10.2014 в 21:14 сообщения сделай в контуре чтобы выделялись
serfer
/avatar/51/4810-053211.gif
8');return false;" rel="nofollow" href="javascript://" name="6577">
10.10.2014 в 11:52 moil
exclusiv...
/avatar/01/4333-414916.png
9');return false;" rel="nofollow" href="javascript://" name="7048">
06.06.2015 в 18:33 Форму добавления сообщения можно изменить =) сделать более функциональнее типа как на zagruzka-plus
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Мини-чат » Всплывающий мини чат для Укоз
Страница 1 из 11
Поиск: