Переработанный всплывающий мини-чат для uCoz
| |
serfer | Дата: Четверг, 09.10.2014, 15:36 | Сообщение # 1 |
Сержант
Группа: Пользователи
Сообщений: 12
Статус: Offline
| На мой взгляд получился красивый мини чатик, который будет находится в виде ненавязчивой кнопки в нижнем левом углу экрана вашего сайта, при нажатии на которую будет всплывать непосредственно сам мини чат.
И так перейдем к установке:
1)Активируйте мини чат в ПУ вашего сайта uCoz
2)Заходим в Вид материалов мини чата и заменяем там всё на: Код <?if($NUMBER$='1')?> <style type="text/css"> body{background: url('http://www.wse-online.ru/minichat/fon_mini_chata-1.jpg');} </style><?endif?> <div class="cBlock{background:transparent;}" style="border: 1px solid #B0B0B0; padding:0 4px 5px 2px;margin-bottom:3px;"> <div style="float:right;font-size:10px;" title="$DATE$"><font color="#FFFF00">$TIME$</div> <div style="text-align:left;"> <?if($USERNAME$)?><a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow"><img alt="" <img src="$AVATAR_URL$" width="30px" align="left"> <?endif?> <?if($USER_ID$=1)?><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus(); parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$, ';return false;"> <span style="color:red; font-weight: bold; ">$NAME$</span></a> <?else?> <a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus(); parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$, ';return false;"><b>$NAME$</b></a><?endif?> <?if($EMAIL$)?> <a href="$EMAIL_JS$" title="$STR_EMAIL$">E</a><?endif?> <?if($SITE$)?> <a rel="nofollow" href="$SITE$" target="_blank" title="$STR_URL$">W</a><?endif?> </div> <div class="cMessage" style="text-align:left;"><b><font color="#E0FFFF"></b>$MESSAGE$</font></div> <?if($CUSTOM1$)?><br>$STR_CUSTOM1$: $CUSTOM1$<?endif?> <?if($CUSTOM2$)?><br>$STR_CUSTOM2$: $CUSTOM2$<?endif?> </div>
Сохраняете
3)Далее заходим в Форму добавления сообщений и заменяем всё на: Код <?if(!$CAN_ADD$)?><div align="center"><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?></div><?else?> <table border="0" cellpadding="1" cellspacing="1" width="100%"> <tr><td>$FLD_AUTOUPD$</td> <td width="70%" align="right"> <a href="$RELOAD_URI$" title="Обновить"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_obnovit.jpg" width="13" height="15"></a> <?if($SMILES_URI$)?> <a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_smajla-1.jpg" width="13" height="15"></a><?endif?> <?if($BBCODES_URI$)?> <a href="$BBCODES_URI$" title="BB-Коды"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_b.jpg" width="13" height="15"></a><?endif?> <?if($MSGCTRL_URI$)?> <a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" border="0" align="absmiddle" src="http://www.wse-online.ru/minichat/ikonka_upravlenija.jpg" width="15" height="15"></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 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="65%" rowspan="2">$FLD_MESSAGE$</td> <td align="center" valign="top"><div style="font-size:10px;">$LENGTH_COUNTER$</div></td> </tr><tr><td align="center" valign="bottom">$SUBMIT$</td></tr></table> <?endif?>
Сохраняете
4)И наконец заходите в "Дизайн" - "Управление дизайном (CSS)" - "нижняя часть сайта" и в самый низ вашего кода вставляете это: Код <style> .chat_box {display:none;position:fixed;bottom:15px;left:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;} .chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://www.wse-online.ru/minichat/ikonka_zakrytija-1.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);} .chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} div.chat_button {display:block;width:75px;height:75px;background:url('http://www.wse-online.ru/minichat/ikonka_chata.png') no-repeat;position:fixed;bottom:15px;left:15px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);} div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} </style> <div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div> <div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div> <div id="chatBox">$CHAT_BOX$</div> </div>
Сохраняете и радуетесь своему новому мини чату!
Да и чуть не забыл такой фон как на скриншоте у мини чата может появится не сразу после установки вами мини чата,а после написания первого сообщения в мини чат и нажатия клавиши обновить мини чат
Сообщение отредактировал serfer - Воскресенье, 28.12.2014, 10:03 |
|
| |
serfer | Дата: Четверг, 23.10.2014, 21:20 | Сообщение # 2 |
Сержант
Группа: Пользователи
Сообщений: 12
Статус: Offline
| Сегодня решил добавить несколько новых фонов к данному мини-чату, так как у всех дизайн сайта разный и на вкус и цвет товарищей нет,поэтому думаю будет полезно. Если решите сменить фон мини чата на один из них,вам нужно будет всего лишь заменить небольшую часть первого кода в "Вид материалов" мини чата. Итак в первом коде ищите строчку (3-я строка) - body{background: url('http://www.wse-online.ru/minichat/fon_mini_chata-1.jpg');}
- и заменяете выделенное красным на код понравившегося фона указанный ниже синим цветом.
1) fon_mini_chata.jpg
2) fon_mini_chata-2.jpg
3) fon_mini_chata-3.jpg
4) fon_mini_chata-4.jpg
|
|
| |
serfer | Дата: Воскресенье, 28.12.2014, 09:16 | Сообщение # 3 |
Сержант
Группа: Пользователи
Сообщений: 12
Статус: Offline
| Была найдена и устранена ошибка, в коде Формы добавления сообщений мини-чата.Теперь мини чат полностью рабочий.
Ну и в связи с тем что Новый год наступит со дня на день, поздравляю всех с наступающим и добавляю несколько новогодних фонов к мини чату. Чтобы сменить фон мини чата на один из них,вам нужно будет заменить небольшую часть первого кода в "Вид материалов" мини чата. В первом коде ищите строчку (3-я строка) - body{background: url('http://www.wse-online.ru/minichat/fon_mini_chata-1.jpg');}
- и заменяете выделенное красным на код понравившегося фона указанный ниже синим цветом.
1) fon_mini_chata-6.jpg
2) fon_mini_chata-7.jpg
3) fon_mini_chata-8.jpg
4) fon_mini_chata-9.jpg
Пример чата смотрите - здесь
Сообщение отредактировал serfer - Воскресенье, 28.12.2014, 10:36 |
|
| |
serfer | Дата: Среда, 14.01.2015, 14:47 | Сообщение # 4 |
Сержант
Группа: Пользователи
Сообщений: 12
Статус: Offline
| Кстате сделать собственный фон мини-чата тоже не так уж и сложно. И чтобы больше не добавлять в эту тему новые фоны чата, расскажу тем кто не знает, как это делать.
1) Существует множество сайтов с широкоформатными обоями, к примеру - "http://oboi.me". Там есть различные обои на различные темы, вам остается выбрать понравившеюся вам картинку ( ну естественно чтобы она вписывалась в дизайн вашего сайта и чтобы текст в чате был читабельным на фоне выбранной картинки).
2) Далее делаете скрин этой картинки, я делаю скрины с помощью бесплатной программки - Clip2Net Итоговая картинка должна быть размером 310х310 - по размеру мини чата. Поэтому делая скрин картинки вымеряйте размер,чтобы в итоге картинку можно было уменьшить до размеров 310х310. То есть можно сделать скрин картинки, выделив область размером 620х620 , после чего получившийся скрин уменьшить в стандартной программе Paint до размера 310х310.
3) После этого, получившеюся картинку заливаете на свой сайт, копируете адрес (путь) до этой картинки. После чего - в Виде материалов мини чата ищите строчку (3-я строка) - body{background: url('http://www.wse-online.ru/minichat/fon_mini_chata-1.jpg');}
- и заменяете выделенный красным адрес на скопированный вами адрес до своей картинки. После этого в вашем мини чате фон изменится на картинку выбранную вами.
Если что то непонятно пишите в этой теме, постараюсь помочь. Удачи !
|
|
| |
andrejj129 | Дата: Пятница, 13.02.2015, 21:42 | Сообщение # 5 |
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
| Здравствуйте! Вот интересно, можно ли изменить расположение чата, с лева перенести на право и на оборот?
|
|
| |
serfer | Дата: Суббота, 14.02.2015, 10:29 | Сообщение # 6 |
Сержант
Группа: Пользователи
Сообщений: 12
Статус: Offline
| Можно, для этого нужно немного изменить код мини-чата в "Нижней части сайта", чтобы изменить его позиционирование с left на right (с лева на право).
Или просто вставьте этот код в нижнюю часть сайта, вместо кода, котрый предлагался в начале темы :
Код <style> .chat_box {display:none;position:fixed;bottom:15px;right:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;} .chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://www.wse-online.ru/minichat/ikonka_zakrytija-1.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);} .chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} div.chat_button {display:block;width:75px;height:75px;background:url('http://www.wse-online.ru/minichat/ikonka_chata.png') no-repeat;position:fixed;bottom:15px;right:15px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);} div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} </style> <div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div> <div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div> <div id="chatBox">$CHAT_BOX$</div> </div>
Сообщение отредактировал serfer - Суббота, 14.02.2015, 15:54 |
|
| |
andrejj1291117 | Дата: Суббота, 14.02.2015, 22:47 | Сообщение # 7 |
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
| Цитата serfer ( ) Можно, для этого нужно немного изменить код мини-чата в "Нижней части сайта", чтобы изменить его позиционирование с left на right (с лева на право). Я не нашёл.
Если можно, укажите строчку. Спасибо за рание.
|
|
| |
serfer | Дата: Воскресенье, 15.02.2015, 08:49 | Сообщение # 8 |
Сержант
Группа: Пользователи
Сообщений: 12
Статус: Offline
| Код который устанавливается в Нижнюю часть сайта:
<style> .chat_box {display:none;position:fixed;bottom:15px;right:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;} .chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://www.wse-online.ru/minichat/ikonka_zakrytija-1.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);} .chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
div.chat_button {display:block;width:75px;height:75px;background:url('http://www.wse-online.ru/minichat/ikonka_chata.png') no-repeat;position:fixed;bottom:15px;right:15px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);} div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} </style> <div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div> <div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div> <div id="chatBox">$CHAT_BOX$</div> </div>
Чтобы чат был с правой стороны экрана я изменил в коде выделенное красным - right. По умолчанию там стояло значение - left
Сообщение отредактировал serfer - Воскресенье, 15.02.2015, 08:53 |
|
| |
|
Навигация |
Всего тем на форуме: 1759/2330 Всего фильмов: 203 Всего файлов: 6 Всего статей: 241 Всего уроков photoshop: 237 Guestbook: 2
|
|
Развлечения |
FIFAGAMERS.DO.AM - это универсальный, нестандартный портал, где вы можете:
1.Скачать софт.
2.Найти полезные скрипты для вашего сайта.
3.Найти красивые шаблоны иконки или кнопки для вашего сайта.
4.Слушать радио на любой вкус онлайн в отличном качестве.
5.Играть в мини игрушки онлайн.
6.Узнать как раскрутить свой сайт.
7.Узнать как заработать на своем сайте или блогах.
8.Найти кисти,фильтры,рамки,текстуры,экшены,стили,градиенты,шрифты,фигуры,шаблоны,иконки,PSD исходники и наконец уроки для Photoshop(Фотошоп)
9.Скачать игры,картинки,ява книги для мобильного телефона на любой экран и любую модель.
10.Узнать всё о проекте www.heroeswm.ru (секреты,прохождение квестов,как обыграть рулетку и др).
11.Узнать всё о проекте www.botva.ru (секреты,таблицы, и др.)
12.Узнать всё о проекте www.overkings.ru (Прохождение квестов)
13.Смотреть ТВ онлайн бесплатно в хорошем качестве.
14.Смотреть фильмы онлайн бесплатно в хорошем качестве.
15.Скопировать нравящиеся вам юзербары.
16.Общаться и задавать вопросы на форуме.
И ещё много разных развлечений есть у нас... стоит только поискать ;)
|
|
Статистика |
Зарег. на сайте Всего: 267 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0 Из них Администраторов: 1 Модераторов: 0 Проверенных: 1 Обычных юзеров: 264 Из них Парней: 234 Девушек: 33
|
|
Друзья сайта |
Возможен баннерообмен 81х31.Писать ЛС.
|
|
|