Мини чат для uCoz от Center-DM - Скрипты - uCoz - uCoz портал - uCoz.co.ua
Заходите к нам с нового домена -
uCoz.co.ua
Total users: 3516
New-Info это:
Большой сборник скриптов, шаблонов, меню, макетов для uCoz. Проект New-Info.uCoz.Net не требует от Вас регистрации для скачивание файлов. Также большая часть загружена на наш сервер - это даст возможность скачивать в один клик.
Профиль
Онлайн всего: 1
Гостей: 1
Пользователей: 0
скачать моды
Мини чат для uCoz от Center-DM
Категория: Скрипты / Дата добавления материала: 14.01.2012, 14:46
У всех чатов в системе uCoz есть один большой минус, css стили которые отвечают за основной фон чата, расположены внутри системы их нельзя залить другим файлом в файловый менеджер и отредактировать (href="/_st/my.css" ), из-за чего к примеру установив на главную страницу своего сайта фон изображением, данный фон будет отображаться в чате.
Поэтому для начало нам следует создать в файловом менеджере основной файл css стилей (style.css) вашего сайта и прописать в него те стили которые были установлены в стилях my.css и прописать ссылку на данные css в ваших шаблонах страниц сайта:
Code
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
меняем на:
Code
<link type="text/css" rel="StyleSheet" href="ВАШ САЙТ/style.css" />
Шаг 1 - Установим HTML:
В конец нашей страницы перед тегом
установим html код чата:
Code
<!--Мини чат DM--> <?if($CHAT_BOX$)?> <div id="center_dm_ru_chat"> <div id="dm_chat_open"> <div id="ichat_open" onclick="show_agent()" ></div> </div> <div id="dm_chat_closed"> <a id="ichat_closed" href="javascript: show_agent()"></a> $CHAT_BOX$ </div> </div> <script type="text/javascript" src="http://new-info.ucoz.net/imghost/c-dm/min_chat.js"></script> <?endif?> <!--End Мини чат DM-->
Обратите внимания, что в данном коде прописал js файл (min_chat.js), который отвечает за открытия и закрытия чата при нажатие на кнопки:
Code
function show_agent() { $('#dm_chat_open').toggle('normal'); $('#dm_chat_closed').toggle('normal'); }
Теперь нам следует зайти в админ панели сайта, Дизайн => Управления дизайном => Мини-чат и установить следующий код:
Code
<div class="cBlock$PARITY$ transparency_i"> <div class="cnat_name"> $NUMBER$. <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 class="cnat_tame">($TIME$ | $DATE$)</div> <div class="cnat_message"> <?if($USERNAME$)?> <a href="$PROFILE_URL$" title="$USERNAME$" target="_blank"> <?if($AVATAR_URL$)?> <img class="avatar_chat" alt="Аватар $USERNAME$" title="$USERNAME$" src="$AVATAR_URL$" /> <?else?> <img src="http://new-info.ucoz.net/imghost/c-dm/no_avatar.jpg" class="avatar_chat" title="$USERNAME$" alt="аватар отсутствует" /> <?endif?> </a> <?else?> <img src="http://new-info.ucoz.net/imghost/c-dm/no_avatar.jpg" class="avatar_chat" title="$NAME$" alt="аватар отсутствует" /> <?endif?> $MESSAGE$ </div> </div>
Форма добавления сообщений:
Code
<?if(!$CAN_ADD$)?> <div class="chat_error" align="center"> <?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?> </div> <?else?> <div class="cell_chat_os transparency_i"> <?if(!$USER_LOGGED_IN$)?>$FLD_NAME$<?endif?> <div class="left"><?if($SMILES_URI$)?><script src="http://new-info.ucoz.net/imghost/c-dm/smiles2.js"></script><?endif?></div> <div class="right"> $LENGTH_COUNTER$ <?if($SMILES_URI$)?> <a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://s59.ucoz.net/img/fr/mcs.gif" width="13" height="15"></a><?endif?> <?if($MSGCTRL_URI$)?><a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" align="absmiddle" src="http://s59.ucoz.net/img/fr/mcm.gif" width="15" height="15"></a><?endif?> <a href="$RELOAD_URI$" title="Обновить"><img alt="Обновить" align="absmiddle" src="http://s105.ucoz.net/img/fr/mcr.gif" width="16" height="16"></a> $FLD_AUTOUPD$ </div> $FLD_MESSAGE$ <div id="chat_niz"> <div class="left"><?if($FLD_SECURE$)?>$FLD_SECURE$ $IMG_SECURE$<?endif?></div> <div class="right">$SUBMIT$</div> </div> </div> <?endif?>
Smiles2.js который отвечает за отображения смайлов, чтобы установить свои смайлы вам следует отредактировать именно этой файл:
Code
document.writeln("<div width=\"100%\">"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\':laugh: \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/laugh.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/happy.gif" border="0" align="absmiddle" alt="happy" /> \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/happy.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/unsure.gif" border="0" align="absmiddle" alt="unsure" /> \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/unsure.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/dry.gif" border="0" align="absmiddle" alt="dry" /> \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/dry.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/sad.gif" border="0" align="absmiddle" alt="sad" /> \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/sad.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/yes.gif" border="0" align="absmiddle" alt="yes" /> \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/yes.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/cool.gif" border="0" align="absmiddle" alt="cool" /> \';return false;\"><img src=\"http://s37.ucoz.net/sm/1/cool.gif\" border=\"0\"><\/a>"); document.writeln("<a href=\"javascript:void(\'Apply to\')\" onclick=\"parent.window.document.getElementById(\'mchatMsgF\').focus();parent.window.document.getElementById(\'mchatMsgF\').value+=\' <img src="http://s105.ucoz.net/sm/1/blink.gif" border="0" align="absmiddle" alt="blink" /> \';return false;\"><img src=\"http://s105.ucoz.net/sm/1/blink.gif\" border=\"0\"><\/a>"); document.writeln("<\/div>");
Шаг 2 - Установим CSS: 1 - установить в css стили my.css следующий код: Светлый вариант:
Code
/*------------------- General styles start ---------------------*/ body { margin:0; padding:0; font:11px Verdana,Arial,Helvetica,sans-serif; color: #555; background: #F4F5F6; } a {outline: none; text-decoration:none;} a:link, a:visited {color:#2C68A6;} a:hover {color:#5CB703;} img {border:0px;} /*--------------------- General styles end ---------------------*/ /* Вид комментарий в чате ------------------------------------------*/ .cBlock1, .cBlock2 { text-align:left!important; width:372px!important; padding: 5px!important; border-top: 1px solid #fff!important; border-bottom: 1px solid #D0D0D0!important; } .cBlock1 {background: #fff!important;} .cBlock2 {background: #f6f6f6!important;} .cnat_name {float:left;} .cnat_tame { float:right; font:9px Verdana,Arial,Helvetica,sans-serif!important; color: #999; } .cnat_message { clear:left; overflow: hidden; padding-top: 5px; width:100%; } .avatar_chat { float:right; width:35px; height:35px; border:1px solid #D6D6D6; padding: 3px; margin: 0px 0px 5px 15px; background:#fff; }
Тёмный вариант:
Code
/*--------------------- General styles start ---------------------*/ body { margin:0; padding:0; font:11px Verdana,Arial,Helvetica,sans-serif; color: #ddd; background: #454a50; } a {outline: none; text-decoration:none;} a:link, a:visited {color:#9ae592;} a:hover {color:#92d4e5;} img {border:0px;} /*--------------------- General styles end ---------------------*/ /* Вид комментарий в чате ------------------------------------------*/ .cBlock1, .cBlock2 { text-align:left; width:372px; padding: 5px!important; border-top: 1px solid #6a6f74; border-bottom: 1px solid #2f3333; } .cBlock1 {background: #454A50;} .cBlock2 {background: #595f66;} .cnat_name {float:left;} .cnat_tame { float:right; font:9px Verdana,Arial,Helvetica,sans-serif!important; color: #999; } .cnat_message { clear:left; overflow: hidden; padding-top: 5px; width:100%; } .avatar_chat { float:right; width:35px; height:35px; border:1px solid #2f3333; padding: 3px; margin: 0px 0px 5px 15px; background:#616467; }
2 - установить css стили в style.css следующий код: Светлый вариант:
Code
/* Мини Чат ------------------------------------------*/ #center_dm_ru_chat { position:fixed; right:65px; bottom:0px } #ichat_open { cursor:pointer; width:400px; height:18px; background:url(http://new-info.ucoz.net/imghost/c-dm/chat_open.png) no-repeat top right; } #ichat_closed { position:absolute; cursor:pointer; top: -18px; right: 0; width:400px; height:18px; background:url(http://new-info.ucoz.net/imghost/c-dm/chat_open.png) no-repeat; background-position: right -18px; } #dm_chat_closed { overflow: hidden; border:1px solid #a1a1a1; border-bottom: none; width:400px; background:#F6F6F6; padding-bottom: 15px; display:none; } #mchatIfm2 { border-bottom:1px solid #D0D0D0 } .cell_chat_os { overflow: hidden; width:370px; margin:10px 15px 0px 15px } #mchatNmF { width:370px!important; margin: 0px 0px 5px 0px; } #mchatMsgF { width:370px!important; height:60px!important; margin: 5px 0px 10px 0px; } #secuCodeMc3 { margin: 0px!important; } #mchatNmF, #mchatMsgF, #secuCodeMc3 { font:11px Verdana,Arial,sans-serif; color:#555!important; padding:5px; background:#fff!important; border:1px solid #D0D0D0!important; } #mchatNmF:focus, #mchatMsgF:focus, #secuCodeMc3:focus { background:#fff url(http://new-info.ucoz.net/imghost/c-dm/fon_ten_pola_1.png) repeat-x top!important; } #chat_niz { float:left; width:370px!important; } #chat_niz .right div { width:60px!important; } #mchatBtn { float:right!important; font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold!important; color:#229125!important; text-shadow:1px 1px 1px #fff!important; background:#b7ebaf!important; border:1px solid #84c28b!important; padding: 8px 20px!important; margin: 0!important; cursore:pointer!important; } #mchatBtn:hover { background:#ccf5c6!important; } .chat_error { font: 13px Verdana,Arial,Helvetica, sans-serif;font-weight: bold!important; margin: 15px 0px 5px 0px; } .transparency_i a:hover img { filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50); } .left {float:left;} .right {float:right;} .clear {clear:left;}
Тёмный вариант:
Code
/* Мини Чат ------------------------------------------*/ #center_dm_ru_chat { position:fixed; right:65px; bottom:0px } #ichat_open { cursor:pointer; width:400px; height:18px; background:url(http://new-info.ucoz.net/imghost/c-dm/chat_open.png) no-repeat top right; } #ichat_closed { position:absolute; cursor:pointer; top: -18px; right: 0; width:400px; height:18px; background:url(http://new-info.ucoz.net/imghost/c-dm/chat_open.png) no-repeat; background-position: right -18px; } #dm_chat_closed { overflow: hidden; border:1px solid #333; border-bottom: none; width:400px; background:#454a50; padding-bottom: 15px; display:none; } #mchatIfm2 { border-bottom:1px solid #333 } .cell_chat_os { overflow: hidden; width:370px; margin:10px 15px 0px 15px } #mchatNmF { width:370px!important; margin: 0px 0px 5px 0px; } #mchatMsgF { width:370px!important; height:60px!important; margin: 5px 0px 10px 0px; } #secuCodeMc3 { margin: 0px!important; } #mchatNmF, #mchatMsgF, #secuCodeMc3 { font:11px Verdana,Arial,sans-serif; color:#ddd!important; padding:5px; background:#595F66!important; border:1px solid #333!important; } #mchatNmF:focus, #mchatMsgF:focus, #secuCodeMc3:focus { background:#646a72!important; } #chat_niz { float:left; width:370px!important; } #chat_niz .right div { width:60px!important; } #mchatBtn { float:right!important; font: 11px Verdana,Arial,Helvetica, sans-serif;font-weight: bold!important; color:#cad7e7!important; text-shadow:1px 1px 1px #555!important; background:#373940!important; border:1px solid #2f3333!important; padding: 8px 20px!important; margin: 0!important; cursore:pointer!important; } #mchatBtn:hover { background:#54565e!important; } .chat_error { font: 13px Verdana,Arial,Helvetica, sans-serif;font-weight: bold!important; margin: 15px 0px 5px 0px; } .transparency_i a:hover img { filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50); } .left {float:left;} .right {float:right;} .clear {clear:left;}
На этом всё...
Полезный материал ? Посетите сайт автора: http://center-dm.ru
Просмотров: 1042 | Загрузок: 147
| Рейтинг: 0.0 /0
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]
New-Info.uCoz.Net / uCoz.co.ua © 2025
Хостинг от uCoz