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

[Severniy]

• Перейти  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); 
}