Сообщение оставлено 21.02.2011 в 21:48:45 | Сообщение #
1
Постоянный Постоянный пользователь проекта. Имеет широкие привилегии на сайте.
К сожалению, пользователь данные о WMID не указал.
Особенности: 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
Сообщение оставлено 21.02.2011 в 21:48:45 | Сообщение #
1
Poker*Chudo*
Сообщения: 2111
Особенности: 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 Подпись пользователя:
Сообщение оставлено 22.02.2011 в 00:05:13 | Сообщение #
2
Пользователь Пользователь проекта, который не имеет никаких привилегий.
К сожалению, пользователь данные о WMID не указал.
Прикольно
Сообщение оставлено 22.02.2011 в 00:05:13 | Сообщение #
2
Прикольно