Перейти к публикации
.V.I.P.

Анимированные кнопки 'Смайлики' в чате

Рекомендованные сообщения

1111.png

1212.png

  • Перейти  Admin CP -> Look & Feel -> Select Template -> skin_shoutbox_hooks -> hookGlobalShoutbox и найти :
<if test="$this->settings['shoutbox_allow_smilies']"> <input type='button' id='shoutbox-smilies-button' value='{$this->lang->words['smilies']}' class='input_submit alt' data-clicklaunch="populateSmilies" data-scope="shoutbox" /></if>
  • Замените его с этим кодом:
<if test="$this->settings['shoutbox_allow_smilies']"> <li type='button' id='shoutbox-smilies-button' data-clicklaunch="populateSmilies" data-scope="shoutbox"  class="cool"> Смайлики <span><i></i></span></li></if>
  • Переходим в Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Select Template
  • Нажмите кнопку Добавить CSS-файл.
  • Назовите его cool
  • Поместите следующий код в него:
.cool {
position: relative;color: #FFF;
background: #314153;
font-size: 14px;
font-family: Avenir,"Avenir Pro",Helvetica,Arial,sans-serif;
padding: 0 5px 0 30px;
line-height: 24px;
border-radius: 3px;display: inline-block;
cursor: pointer;
}
.cool span {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
left: 0;
top: 0; }
.cool span:before, .cool span:after {  
content: "";  
position: absolute;  
width: 4px;  
height: 4px;  
top: 7px;  
border-radius: 50%;  
display: block;  
background: #fff;  
-webkit-transition: all 300ms cubic-bezier(0.5, 1, 0.8, 1.6);          
transition: all 300ms cubic-bezier(0.5, 1, 0.8, 1.6); 
}
.cool span:before {  
left: 25%; 
}
.cool span:after {  
right: 25%; 
}
.cool span i {
display: block;
position: absolute;
width: 13px;height: 8px;
top: 9px;
border-bottom: 2px solid #fff;
border-radius: 130%;left: 50%; 
}
.cool:hover span:after, .cool:hover span:before {  
background: #fff;  
top: 10px; 
}
.cool:hover span:before {  
left: 60%;  
width: 15px;  
height: 2px;  
border-radius: 2px;  
margin-top: 1px;  
-webkit-transform: rotate(135deg);      
-ms-transform: rotate(135deg);          
transform: rotate(135deg); 
}
.cool:hover span i {  
opacity: 0; 
}
.cool:hover span:after {  
right: 60%;  
margin-right: -10px;  
width: 15px;  
height: 2px;  
border-radius: 2px;  
margin-top: 1px;  
-webkit-transform: rotate(-135deg);      
-ms-transform: rotate(-135deg);          
transform: rotate(-135deg); 
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Guest
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.


  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

Чат форума

Чат форума

Пожалуйста, введите ваше отображаемое имя

×
×
  • Создать...