Оригинальная чат-комната 1.0 by Apocalypse для uCoz


Оригинальная чат-комната 1.0 by Apocalypse для uCoz

1960
6 из 10
Проголосовало: 3




Особенности:

1) Неповторимый оригинальный дизайн
2) Интересная панель списка онлайн пользователей с возможностью обновления в реальном времени
3) Возможность проверки ЛС на лету
4) Возможность задания своего цвета подложки сообщений для нескольких пользователей
5) Отображение аватаров пользователей
6) Оригинальный, приятный глазу, стиль
7) Простая установка и адаптация под любой дизайн (Нужно разбираться в css и html)
8) Выведены основные смайлы
9) Вынесены стрелочки "Вверх", позволяющие быстро переместиться в самый верх сообщений (Плавный скролл)
10) Выведены оригинальные ВВ-Коды (ВВ коды открываются при выделении текста)

Установка:

Для начала давайте оформим наш чат

1) В самый верх вашего css:

Code
/* ВВ Коды для чата */  
#menu {display:none;margin:15 0 15 0;}  
#menu:hover {}  
#menu a {}  
#menu a:hover {}  
.bb {cursor:pointer;padding: 5 10 5 10;background: #444444;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.grey {cursor:pointer;background:grey; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.olive {cursor:pointer;background:olive; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.green {cursor:pointer;background:green; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.blue {cursor:pointer;background:blue; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.purple {cursor:pointer;background:purple; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.red {cursor:pointer;background:red; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.orange {cursor:pointer;background:orange; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.pink {cursor:pointer;background:pink; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
.yellow {cursor:pointer;background:yellow; width:15px; height:15px;border:0;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 10;-webkit-border-radius: 10;-moz-border-radius: 10;}  
/* Конец ВВ кодов для чата */  

/* Новые стили */  
.cBlock1 {text-shadow: black 1px 1px 2px;background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}  
.cBlockzloi {text-shadow: black 1px 1px 2px;background:url('http://www.apo-ucoz.com/images/main/blank_blue.png');padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}  
.cBlockadmin {text-shadow: black 1px 1px 2px;background:url('http://www.apo-ucoz.com/images/main/blank_red.png');padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}  
.cBlockmoder {text-shadow: black 1px 1px 2px;background:url('http://www.apo-ucoz.com/images/main/blank_green.png');padding: 10px 5px 10px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}  
.mchat {text-shadow: black 1px 1px 2px;background: #454545;padding: 2px 5px 2px 5px;color:ddd;-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5x; border-radius: 5px;border-top: solid 1px #565656; border-left: solid 1px #565656; border-bottom: solid 1px #343434; border-right: solid 1px #343434;}  
.mchat_i {opacity:1;}  
.reg1 {text-align:left;padding:3px;}  
.reg2 {clear:left;float:left;width:160px;}  
.reg1 input[type='text'], .reg1 input[type='password'] {width:160px;}  
#rCode {width:160px; height: 35px; text-align:center; font-weight:bold; font-size:13px; margin-top: 2px;}  
#rRes{font-size: 9px; color:red; display:none;}  
.styled_block {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 20 20 20 20;-webkit-border-radius: 20 20 20 20;-moz-border-radius: 20 20 20 20;}  
.styled_block_i {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 20 0 0 20;-webkit-border-radius: 20 0 0 20;-moz-border-radius: 20 0 0 20;}  
.styled_block_s {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 0 20 20 0;-webkit-border-radius: 0 20 20 0;-moz-border-radius: 0 20 20 0;}  
.add {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 0 0 10 10;-webkit-border-radius: 0 0 10 10;-moz-border-radius:0 0 10 10x;padding:10;}  
.com_ava {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 0 20 20 0;-webkit-border-radius: 0 20 20 0;-moz-border-radius: 0 20 20 0;}  
.com_ico {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 0 0 20 20;-webkit-border-radius: 0 0 20 20;-moz-border-radius: 0 0 20 20;}  
.com_q {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;}  
.com_p {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;padding:10;}  
.o_100 {opacity:1}  
.o_95 {opacity:0.95}  
.o_90 {opacity:0.90}  
.o_85 {opacity:0.85}  
.o_80 {opacity:0.80}  
.o_75 {opacity:0.75}  
.o_70 {opacity:0.70}  
.d_btn {width:150;padding:10;background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #555;-moz-box-shadow: 0px 2px 3px #555;border-radius: 20;-webkit-border-radius: 20;-moz-border-radius: 20;}  
.frmBtns {opacity:0.5;}  
.moderOptions {opacity:0.5}  
.fastNav {opacity:0.5}  
.fFastSearchTd {opacity:0.5}  
.zakladki {background:url('http://www.apo-ucoz.com/images/main/blank_glass_444.png');box-shadow: 0px 2px 3px #797979;-webkit-box-shadow: 0px 2px 3px #797979;-moz-box-shadow: 0px 2px 3px #797979;border-radius: 20;-webkit-border-radius: 20;-moz-border-radius: 20;}  
.zakladki_btn {cursor:pointer;background: none !important;border: solid #666 !important;font-weight:bold;color:#fff !important;box-shadow: 0px 2px 3px #555;-webkit-box-shadow: 0px 2px 3px #606060;-moz-box-shadow: 0px 2px 3px #555;}  
.zakladki_btn:hover {cursor:pointer;background: none !important;border: solid #666 !important;font-weight:bold;color:#fff !important;box-shadow: 0px 2px 3px #444;-webkit-box-shadow: 0px 2px 3px #444;-moz-box-shadow: 0px 2px 3px #444;}  
.avatar {width:15;border:0;vertical-align:center;}  
.avatar:hover {width:50;border:0;vertical-align:center;}  
/* Конец новых стилей */

2) Вид материалов Мини-чата:

Code
<div <?if($USER_ID$='1')?>class="cBlockadmin"<?else?><?if($USER_ID$='594')?>class="cBlockmoder"<?else?><?if($USER_ID$='634')?>class="cBlockzloi"<?else?>class="cBlock1"<?endif?>class="cBlock1"<?endif?><?endif?> style="padding:10 0 5 0;margin-bottom:5px;">  
<div style="text-align:left;">  
<a href="$PROFILE_URL$">  

<span class="styled_block_s" style="padding:5 5 5 5;opacity:0.5;">  
<?if($AVATAR_URL$)?>  
<img class="avatar" src="$AVATAR_URL$" style="vertical-align:-3px"/>  
<?else?>  
<img class="avatar" src="http://www.apo-ucoz.com/images/noavatar.png" width="15" border="0" style="vertical-align:-2px"/>  
<?endif?>  
</span>  
</a>  

<span style="padding:0 0 0 10;">  
<a title="Цитировать пользователя $USERNAME$" href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[b]$NAME$[/b], ';return false;" rel="nofollow">  
<b>$NAME$</b></a>  
<b>  
<span class="styled_block_i" style="float:right;padding:7 5 5 7;font-size:10px;" title="$DATE$">  
$TIME$  
<a href="javascript://" onclick="$('body').scrollTo({top:$('body').offset().top, left:0}, 1000);return false;">  
<img width="20" height="10" title="Вверх" src="http://www.apo-ucoz.com/images/icons/arrow_up.png" border="0">  
</a>  
</span>  
</b>  
</span>  

</div>  
<div style="text-align:left;padding:20 10 10 10;font-weight:normal;">$MESSAGE$</div>  
</div>

3) Форма добавления сообщений чата:

Code
<style>  
.pm_1 {  
width:0px;  
height:0px;}  
</style>  

<table style="margin-top:10;" border="0" cellpadding="1" cellspacing="1" width="100%">  
<tr><td>$FLD_AUTOUPD$</td>  
<td width="70%" align="right">  
<a title="Проверить доступность новых сообщений" onclick="javascript:iAjaxPM();" href="javascript://"><img class="pm_1" src="http://www.apo-ucoz.com/images/main/mail.png" border="0" align="absmiddle"></a>  
<a href="javascript://" title="Обновить список онлайн пользователей" onmouseDown="$('#uOnlineClicked').fadeIn(200);" onmouseUp="$('#uOnlineClicked').fadeOut(200);" onmouseout="$('#uOnline').fadeOut(1000);" onmouseover="$('#uOnline').fadeIn(1000);" onclick="$('span#on1').load('# span#on2');"><img class="mchat_i" width="20" border="0" align="absmiddle" src="http://www.apo-ucoz.com/images/mchat/on_refresh.png"></a>  
<a href="$RELOAD_URI$" title="Обновить мини-чат"><img class="mchat_i" width="20" border="0" align="absmiddle" src="http://www.apo-ucoz.com/images/mchat/reload.png"></a>  
<?if($SMILES_URI$)?> <a href="javascript://" title="Показать/Спрятать смайлы" onclick="$('#seesmiles1').slideToggle(500);"><img width="20" class="mchat_i" border="0" align="absmiddle" src="http://www.apo-ucoz.com/images/mchat/smile.png"></a><?endif?>  
<?if($MSGCTRL_URI$)?> <a href="$MSGCTRL_URI$" title="Управление сообщениями"><img class="mchat_i" width="20" border="0" align="absmiddle" src="http://www.apo-ucoz.com/images/mchat/settings.png"></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 style="opacity:0.7;" 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="95%" rowspan="2"><span title="Выделите текст для отображения ВВ-кодов"><textarea name="mcmessage" class="mchat" id="mchatMsgF" onkeyup="countMessLength();" onfocus="countMessLength();" style="height:60px;width:100%;resize:none;"></textarea></span></td>  
<td align="center" valign="top"><div style="font-size:10px;text-shadow: black 1px 1px 2px;">$LENGTH_COUNTER$</div></td>  
</tr><tr><td align="center" valign="bottom">$SUBMIT$</td></tr></table>  

<div id="menu">  
<center>  
<script type="text/javascript" src="http://www.apo-ucoz.com/js/bbcodes.js"></script>  
</center>  
</div>  

<div style="display:none;" id="seesmiles1" align="center">  
<script type="text/javascript" src="http://www.apo-ucoz.com/js/smiles.js"></script>  
<br>  
<a style="color:9c9c9c;" href="$SMILES_URI$" title="Показать все смайлы"><b>==Остальные смайлы==</b></a>  
<br>  
</div>

С чатом, вроде как, разобрались, переходим к созданию и оформлению нашей чат-комнаты

Для начала бежим в ПУ -- Редактор сраниц -- Управление страницами сайта -- Добавить страницу

Задаём имя страницы, к примеру, Мини-чат, в содержимое страницы всталяем:

Code
<center>$CHAT_BOX$</center>

Ставим галочку на пункте "Использовать персональный шаблон для страницы".

Сохраняем результат и бежим в Управление дизайном сайта. И ищите название страницы которое вы написали.

Зайдите в него и замените там есь код на:

Code
<html>  
<head>  
<noindex>  
<title>Чат-комната</title>  
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />  
</head>  

$GLOBAL_MODAL$  

<style>  
#uOnlineClicked{  
position:absolute;  
left:50%;  
margin-left:-200px;  
width:400px;  
height:100;  
opacity:0.5;  
border-radius:0 0 20 20;  
-moz-border-radius:0 0 20 20;  
display:none;  
background:#444;  
border:3px solid #444;  
text-align:center;  
top:0;  
padding-top:20px;  
z-index:5;  
}  
#uOnline{  
position:absolute;  
left:50%;  
margin-left:-200px;  
width:400px;  
height:100;  
opacity:0.7;  
border-radius:0 0 20 20;  
-moz-border-radius:0 0 20 20;  
display:none;  
background:#333;  
border:3px solid #444;  
text-align:center;  
top:0;  
padding-top:20px;  
z-index:4;  
}  
#back1{  
height:100%;  
width:100%;  
position:<?if($USER_AGENT$='ie')?>absolute<?else?>fixed<?endif?>;  
z-index:-2;  
top:0;  
left:0;  
}  
#back1 img{  
height:100%;  
width:100%;  
position:<?if($USER_AGENT$='ie')?>absolute<?else?>fixed<?endif?>;  
z-index:-2;  
top:0;  
left:0;  
}  
#mchatIfm2{  
height:70% !important}  
#mchatMsgF{  
height:100px !important;opacity:0.7 !important}  
#mchatRSel{  
opacity:0.7;}  
</style>  

<style>  
.pm_1 {  
width:20px !important;  
height:20px !important;}  
</style>  
   
<img id="back1" src="http://www.apo-ucoz.com/images/mchat/chat_bg.jpg">  

<body>  

<?if($USER_LOGGED_IN$)?><script type="text/javascript" src="http://www.apo-ucoz.com/js/apoBB.js"></script>  
<script type="text/javascript" src="http://www.apo-ucoz.com/js/jquery.caret.js"></script>  
$CONTENT$<?else?>  
<center><img title="Гости не могут писать в чате" src="http://www.apo-ucoz.com/images/mchat/no-logged_in.png" border="0" />  
<br><br><br><br>  
<span class="mchat">  
<a name="modal" href="#static1">Вход на сайт</a>  
</span>  
<br><br>  
</span>  
<br><br>  
</center>  
<?endif?>  

<script type="text/javascript">function iAjaxPM(){  
data = 'Здравствуйте, <b>$USERNAME$<\/b><br><br>В этом окне вы можете получить список<br>Новых Личных Сообщений<br><br><a href="$PM_URL$" class="pgSwch">Окно личных сообщений<\/a><hr><div id="kakie"><a onclick="javascript:kakie();" href="javascript://">[Подгрузить]</a><\/div>';  
_uWnd.alert(data,'Личные сообщения',{w:270,h:200,tm:0,icon:'http://www.apo-ucoz.com/img/mail.png'});}// Copyright © forucoz.com - Bogdan4eg //  
function kakie(){$.get('$PM_URL$', function(data){$('b.unread', data).each(function(){var hrfpm = $(this).parent().attr('href'); var txtpm = $(this).html(); $('#kakie').after('<a href="'+hrfpm+'" target="_blank" title="Откроется в новом окне">'+txtpm+'</a><br>');});}); setTimeout("$('#kakie').hide();",500);}  
</script>  

</body>  

<div id="uOnline">  
<span id="on1"><span id="on2">  
$ONLINE_USERS_LIST$  
</span></span>  
</div>  

<div id="uOnlineClicked"></div>  

<center>$POWERED_BY$</center>  

</noindex>  

</html>

После сохранения шаблона и перехода к просмотру готовой страницы.

В прикреплённом архиве находятся все файлы, использованные в данном материале

Автор: Apocalypse

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://www.apo-ucoz.com
  • Всего комментариев: 5

Tones
0
Tones написал: Написано 27 Апреля 2015 в 17:45
Комментарий №4
картинки не выводятся хотя вроде загрузил

Джон-Ли
0
Джон-Ли написал: Написано 21 Февраля 2011 в 15:51
Комментарий №1
Здлеайте такое оформления для етого скрипта http://webo4ka.ru/load/skripty_i_modifikacii_dlja_ucoz/on_line_chat_iz_gostevoj_knigi_dlja_ucoz/46-1-0-771

Вовчик
0
Вовчик написал: Написано 21 Февраля 2011 в 16:48
Комментарий №2
да просто в последний код вставляешь код из гостевой и всё...

Джон-Ли
0
Джон-Ли написал: Написано 22 Февраля 2011 в 01:13
Комментарий №3
А подродней

master0568
0
master0568 написал: Написано 26 Июля 2015 в 15:08
Комментарий №5
да да, можно подробнее? wacko

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 4
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: