Любовь к спорту на всю жизнь
Привет, Гость!

  • Страница 1 из 1
  • 1
Форум » Мусорка » Корзина [архив] » Оригинальная чат-комната 1.0 by Apocalypse для uCoz
Оригинальная чат-комната 1.0 by Apocalypse для uCoz
Torres_1_Дата: Понедельник, 18.07.2011, 14:43 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 2124
Награды: 0
Репутация: 12
Статус: Offline
Оригинальная чат-комната 1.0 by Apocalypse для uCoz

чат для ucoz сайта на отдельной странице



Многие из вас уже оценили новую чат-комнату, которую я разработал всего за несколько часов из мини-чата 6.0, используя свои знания (Не удержался, и внедрил парочку нестандартных фишек).
Особенности:

1) Неповторимый оригинальный дизайн
2) Интересная панель списка онлайн пользователей с возможностью обновления в реальном времени
3) Возможность проверки ЛС на лету
4) Все возможности мини-чата 6.0

Установка:

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

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

Код
/* ВВ Коды для чата */    
#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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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.fifagamers.ru/forum/66');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) Вид материалов Мини-чата:

Код
<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.fifagamers.ru/forum/66" 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$, ';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.fifagamers.ru/forum/66" border="0">    
</a>     
</span>    
</b>    
</span>    

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


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

Код
<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.fifagamers.ru/forum/66" 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.fifagamers.ru/forum/66"></a>    
<a href="$RELOAD_URI$" title="Обновить мини-чат"><img class="mchat_i" width="20" border="0" align="absmiddle" src="http://www.fifagamers.ru/forum/66"></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.fifagamers.ru/forum/66"></a><?endif?>    
<?if($MSGCTRL_URI$)?> <a href="$MSGCTRL_URI$" title="Управление сообщениями"><img class="mchat_i" width="20" border="0" align="absmiddle" src="http://www.fifagamers.ru/forum/66"></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.fifagamers.ru/forum/66"></script>    
</center>     
</div>    

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


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

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

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

Код
<center>$CHAT_BOX$</center>


Сохраняем результат и бежим в Управление дизайном сайта. У вас там появился шаблон:

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

Код
<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.fifagamers.ru/forum/66">     

<body>    

<?if($USER_LOGGED_IN$)?><script type="text/javascript" src="http://www.fifagamers.ru/forum/66"></script>     
<script type="text/javascript" src="http://www.fifagamers.ru/forum/66"></script>     
$CONTENT$<?else?>    
<center><img title="Гости не могут писать в чате" src="http://www.fifagamers.ru/forum/66" 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.fifagamers.ru/forum/66'};);}// 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>


После сохранения шаблона и перехода к просмотру готовой страницы, запомните ссылку (У меня это /index/0-19) и пропишите ссылку в удобном вам месте на открытие этой страницы

На этом томительный процесс установки завершён и вы можете наслаждаться вашей чат-комнатой. Надеюсь, оно того стоило
 
Torres_1_Дата: Пятница, 21.03.2014, 00:10 | Сообщение # 2
Генералиссимус
Группа: Администраторы
Сообщений: 2124
Награды: 0
Репутация: 12
Статус: Offline
Ссылки устарели, перемещено в корзину
 
Форум » Мусорка » Корзина [архив] » Оригинальная чат-комната 1.0 by Apocalypse для uCoz
  • Страница 1 из 1
  • 1
Поиск:
Навигация
Главная страница Форум сайта Создание сайтов на uCoz Заработок в интернете Уроки Photoshop Автомобиль от А до Я Электроника Всё для смартфонов Браузерные игры Музыка Последние комментарии Статистика
Развлечения
Сегодня день рождения у: Описание сайта
Новое на форуме
Опрос
Опрос сайта
Что вы делаете на сайте
javascript:; javascript:;
Всего ответов: 119

Общение
Загрузка…
Статистика
Зарег. на сайте
Всего: 267
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Администраторов: 1
Модераторов: 0
Проверенных: 1
Обычных юзеров: 264
Из них
Парней: 234
Девушек: 33
Друзья сайта
Возможен баннерообмен 81х31.Писать ЛС.
Дизайн от Torres_1_ | Хостинг от uCoz
Все материалы размещенные на сайте принадлежат их владельцам.
При копированимм материалов ссылка на источник обязательна!
Администрация не несет ответственности за содержание материала и убытки не возмещает.