Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Сворачивающийся ЧАТ под кнопкой

Предыдущая тема Следующая тема Перейти вниз

Сворачивающийся ЧАТ под кнопкой

Сообщение автор Xan_Kriegor в Чт 16 Янв - 19:18

Помогите решить плиз.

Xan_Kriegor
 

Сообщения : 973
Возраст : 33
Регистрация : 2013-09-18
Благодарности : 13

Без предупреждений

http://www.residentevilarena.com

Вернуться к началу Перейти вниз

Re: Сворачивающийся ЧАТ под кнопкой

Сообщение автор Dana Domirani в Вт 21 Янв - 15:05

Для начала включите стандартный чат

Па > Модули > Чат - Конфигурация > Активировать ЧАТ : да
Показ ЧАТа : не показывать


1. В шаблон overall_footer_end перед строкой

Код:
</body>
</html>

добавьте код

Код:
<div style="clear:both;"></div>

<div class="slide_panel_chat">
          <div class="chatboxins">
             <iframe src="/chatbox/index.forum" id="chatbox_ret" name="chatbox_ret" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="width: 100%; height: 400px"></iframe>
     </div>
            <p class="openchat">МиниЧат</p>
</div>

<div style="clear:both;"></div>

Сохраните, опубликуйте (!)



2. В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, чатподкнопкой
Расположение: на всех страницах
Код:

Код:
$(document).ready(function(){  
 $("div.slide_panel_chat p.openchat").toggle(function(){
 $("div.chatboxins").animate({width:'550px', opacity: 1},100);}, function() {
 $("div.chatboxins").animate({width: "0", opacity: 0},100);
 });

$('p.openchat').click(function(){
    $(this).toggleClass('opened').toggleClass('closed');
    if($(this).hasClass('opened')) {
        $(this).html('Свернуть');
    }
    else {
        $(this).html('МиниЧат');
    }
});

});

Сохраните.

3. Добавьте в CSS:

Код:
/* чат */

.chatboxins {
 margin: 10px 0 10px;
}

#chatbox_ret {
border: 1px solid #666;  
}

#chatbox_messenger_form {
margin: 10px 0px;
padding: 0 0 20px;
}

#chatbox_members, #chatbox {
bottom: 79px;
}

#chatbox_ret, p.openchat {
-webkit-box-shadow: -9px 0px 9px 0px rgba(0, 0, 0, 0.85);
-moz-box-shadow: -9px 0px 9px 0px rgba(0, 0, 0, 0.85);
box-shadow: -9px 0px 9px 0px rgba(0, 0, 0, 0.85);  
}

/* высплывающий блок чата */
.slide_panel_chat {
position:fixed;
left: 5px;
bottom: 0px;
z-index: 999;
}

.chatboxins {
width: 0;
opacity: 0
}

#chatbox_members {
width: 120px;
font-size: 10px;
border-right: 1px solid #666;
}

#chatbox_footer {
border-top: 1px solid #666;
}


#chatbox {
left: 121px;
background: transparent url("http://i56.servimg.com/u/f56/15/82/36/69/grunge10.png") repeat 0% 0% !important;
}

/* поле ввода текста в чате */
#message {
background-color: #eee !important;
border: 1px solid #666;
color: #999;
outline: transparent !important;
}

/* размер текста в чате */
.chatbox_row_1, .chatbox_row_2 {
font-size: 12px;
}

/* нечетные ответы */
.chatbox_row_1 {
background-color: transparent !important;
}

/* четные ответы */
.chatbox_row_2 {
background: transparent url("http://i56.servimg.com/u/f56/15/82/36/69/20670510.png") repeat center;
}

/* кнопки чата */
#chatbox_messenger_form .right {
background-color: #ddd !important;
border-bottom: none !important;
margin: 3px !important;
padding: 3px;
color: #666 !important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* кнопки чата */
#chatbox_messenger_form .fontbutton {
background-color: transparent;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #666;
}

/* кнопки чата - подсветка + выделение */
#chatbox_messenger_form .fontbutton:hover, #chatbox_messenger_form .fontbutton_selected {
background-color: #00AEFF !important;
border: 1px solid #00A4FF !important;
}

/* убрать надпись ЧАТ */
.chatbox-title {
width: 0;
font-size: 0px;
padding-top: 10px;
}

/* Обновить | Архив | Автоматическое обновление | Выход | Вход  */
.chatbox-options a, .chatbox-options label {
color: #00c4ff !important;
}

/* поставить надпись Миничат*/
.chatbox-title:before {
content: "МиниЧат";
width: 80px;
font-size: 10px;
padding-top: 10px;
color: #00A4FF !important;
}

/* Кнопка МиниЧат (открывающая / закрывающая) */
p.openchat {  
margin: 0 0 20px;
display: block;
border: 2px solid rgb(71, 71, 71);
background-color: #1a1a1a;
padding: 8px;
width: 80px;
float: left;
color: #00a6ff !important;
text-align:center;
cursor: pointer;
}

/* кнопка Отправить в чате */
#chatbox_messenger_form #submit_button {
background-color: transparent;
border: 1px solid #00A4FF;
color: #00A4FF;
font-size: 11px;
padding: 2px 5px;
border-radius: 3px;
}

#chatbox_messenger_form #submit_button:hover {
background-color: #00A4FF;
border: 1px solid #00A4FF;
color: #000;
}



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22098
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8880

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения