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

  • Страница 1 из 1
  • 1
Форум » Мусорка » Корзина [архив] » Переработанный всплывающий мини-чат для uCoz
Переработанный всплывающий мини-чат для uCoz
serferДата: Четверг, 09.10.2014, 15:36 | Сообщение # 1
Сержант
Группа: Пользователи
Сообщений: 12
Награды: 0
Репутация: 2
Статус: 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>


Сохраняете и радуетесь своему новому мини чату!

Да и чуть не забыл такой фон как на скриншоте у мини чата может появится не сразу после установки вами мини чата,а после написания первого сообщения в мини чат и нажатия клавиши обновить мини чат smile


Сообщение отредактировал serfer - Воскресенье, 28.12.2014, 10:03
 
serferДата: Четверг, 23.10.2014, 21:20 | Сообщение # 2
Сержант
Группа: Пользователи
Сообщений: 12
Награды: 0
Репутация: 2
Статус: 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
Награды: 0
Репутация: 2
Статус: 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
Награды: 0
Репутация: 2
Статус: 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
Награды: 0
Репутация: 0
Статус: Offline
Здравствуйте!
Вот интересно, можно ли изменить расположение чата, с лева перенести на право и на оборот?
 
serferДата: Суббота, 14.02.2015, 10:29 | Сообщение # 6
Сержант
Группа: Пользователи
Сообщений: 12
Награды: 0
Репутация: 2
Статус: 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
Награды: 0
Репутация: 0
Статус: Offline
Цитата serfer ()
Можно, для этого нужно немного изменить код мини-чата в "Нижней части сайта", чтобы изменить его позиционирование с left на right (с лева на право).

Я не нашёл.

Если можно, укажите строчку.
Спасибо за рание.
 
serferДата: Воскресенье, 15.02.2015, 08:49 | Сообщение # 8
Сержант
Группа: Пользователи
Сообщений: 12
Награды: 0
Репутация: 2
Статус: 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
 
Форум » Мусорка » Корзина [архив] » Переработанный всплывающий мини-чат для uCoz
  • Страница 1 из 1
  • 1
Поиск:
Навигация
Главная страница Форум сайта Создание сайтов на uCoz Заработок в интернете Уроки Photoshop Автомобиль от А до Я Электроника Всё для смартфонов Браузерные игры Музыка Последние комментарии Статистика
Развлечения
Сегодня день рождения у: Описание сайта
Новое на форуме
Опрос
Опрос сайта
Какой у вас браузер?
javascript:; javascript:;
Всего ответов: 176

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


Друзья сайта
Возможен баннерообмен 81х31.Писать ЛС.