Как сделать "socialbar" шаблона Finch для других Warp 7 шаблонов

В шаблоне YOO Finch есть интересная функция для связи с социальными аккаунтами пользователей - "socialbar", который находится справа внизу окна и может быть открытым и отражать соц. сети:

Чтобы добавить подобную функцию в других Warp 7 шаблонах — это не работат на Warp 6 — пожалуйста, выполните следующие действия:

• Убедитесь, что ваш Warp 7 пакет шаблона в актуальном состоянии.
  
  Чтобы применить обновление, пожалуйста, выполните "[FAQ] полное руководство для обновления искривления 7 шаблон/тему".
  
  
• Если вы еще не сделали этого: создать пользовательский стиль, как описано
  в "[FAQ] создание пользовательского стиля для искривления 7 шаблон".
  Это должно занять не более 5 минут.
  
  Ради аргумента я сошлюсь на собственный стиль, с именем THESTYLE в последующих шагах.
  Замените на Ваш пользовательский стиль
  
  
• Доступ к корню вашего сайта через FTP.
  
  
• Для того, чтобы переопределить скопируйте файл
  templates/yoo_master2/css/custom.css в
  templates/yoo_master2/styles/THESTYLE/css/custom.css ( Joomla)
  
  wp-content/themes/yoo_master2_wp/css/custom.css в
  wp-content/themes/yoo_master2_wp/styles/THESTYLE/css/custom.css (для WordPress)
  
  
• Используйте текстовый редактор, поддерживающий кодировку utf-8, открыть
  templates/yoo_master2/styles/THESTYLE/css/custom.css (Joomla) или
  wp-content/themes/yoo_master2_wp/styles/THESTYLE/css/custom.css (WordPress)
  и в самом конце вставить именно в CSS:

Код:

/* Begin: CSS for the "socialbar": */

.tm-socialbar { 
position: fixed; 
top: 20%; 
right: 0; 
z-index: 2; 
} 
.tm-social-icons { 
display: none; 
} 
.uk-open > .tm-social-icons { 
display: block; 
} 
.uk-open > .tm-social-icons > li { 
-webkit-animation: uk-fade-top 0.2s ease-in-out; 
animation: uk-fade-top 0.2s ease-in-out; 
} 
.tm-social-toggle { 
position: relative; 
width: 40px; 
height: 40px; 
z-index: 3; 
} 
.tm-social-toggle:before { 
content: '+'; 
font-family: Arial,Helvetica,"sans-serif"; 
font-size: 30px; 
line-height: 40px; 
color: #ffffff; 
} 
.uk-open > .tm-social-toggle:before { 
content: '–'; 
line-height: 36px; 
} 
.tm-icon-google-plus:hover, 
.tm-icon-google-plus:active, 
.tm-icon-google-plus:focus { 
background-color: #dd4b39; 
} 
.tm-icon-facebook:hover, 
.tm-icon-facebook:active, 
.tm-icon-facebook:focus { 
background-color: #3b5998; 
} 
.tm-icon-youtube-play:hover, 
.tm-icon-youtube-play:active, 
.tm-icon-youtube-play:focus { 
background-color: #bb0000; 
} 
.tm-icon-instagram:hover, 
.tm-icon-instagram:active, 
.tm-icon-instagram:focus { 
background-color: #125688; 
} 
.tm-icon-twitter:hover, 
.tm-icon-twitter:active, 
.tm-icon-twitter:focus { 
background-color: #40b4df; 
}

.tm-socialbar .uk-icon-button { 
border-radius: 0; 
height: 40px; 
line-height: 40px; 
width: 40px; 
}

.tm-socialbar .uk-icon-button:hover, 
.tm-socialbar .uk-icon-button:focus { 
color: #ffffff; 
}

/* End: CSS for the "socialbar": */

• Сохранить изменения.

• В Joomla : в административной панели переключить по умолчанию на редактор CodeMirror:
  Site > Global Configuration > Site > Site Settings > Default Editor >Editor - CodeMirror>редактор - CodeMirror
  
  Это очень важно, потому что WYSIWYG-редакторы имеют тенденцию изменить и "исправить" источник при сохранении.
  
  
• Создать новый "Custom" (ранее "Custom HTML") модуль (для Joomla) или "Text" виджет (на WordPress).
  
  
• Вставьте следующий HTML-код (markup):

HTML:

<div class="tm-socialbar uk-hidden-small"> 
    <div class=""> 
        <div data-uk-dropdown="{dropdownClass:'tm-social-icons', mode:'click'}"> 
            <a class="uk-button uk-button-primary tm-social-toggle"></a> 
            <ul class="tm-social-icons uk-list uk-margin-remove"> 
                <li> 
                    <a href="#" class="uk-icon-button uk-icon-google-plus tm-icon-google-plus"></a> 
                </li> 
                <li> 
                    <a href="#" class="uk-icon-button uk-icon-facebook tm-icon-facebook"></a> 
                </li> 
                <li> 
                    <a href="#" class="uk-icon-button uk-icon-youtube-play tm-icon-youtube-play"></a> 
                </li> 
                <li> 
                    <a href="#" class="uk-icon-button uk-icon-instagram tm-icon-instagram"></a> 
                </li> 
                <li> 
                    <a href="#" class="uk-icon-button uk-icon-twitter tm-icon-twitter"></a> 
                </li> 
            </ul> 
        </div> 
    </div> 
</div>

• Повторное предупреждение для Joomla пользователей: Вы должны в Joomla вставить HTML-разметку но в TinyMCE или JCE в HTML / код a-элементы, [ + ] будут вырезаны при сохранении.
  
  
• Заменить #URL-адреса, указывающие на ваши аккаунты в facebook, Twitter, Google+, YouTube ... такого вида:

Код:

<a href="http://www.twitter.com/my-twitter-account" class="uk-icon-button uk-icon-twitter tm-icon-twitter"></a>

• Если вы хотите, чтобы "socialbar" будет показан на маленьких экранах, удалите класс uk-hidden-small из внешнего div.
  
  
• Установить "Show Title >Hide (Скрыть)
  
  
• Установить в Position > Footer или Position > Debug
  
  Важно: если ваш Warp 7 шаблон поставляется с "Smoothsroll" положение (как "Joy", например) использующийся для точечной навигации, опубликуйте этот "socialbar" модуль в положение "Smoothscroll".
  
  Если нет "Smoothscroll" позиции, то пробуйте Footer или Debug
  
  
• Нажмите кнопку "Сохранить и закрыть" в панели инструментов.
  

Перезагрузите страницу на сайте и проверьте результат.
Вы должны увидеть кнопку "неподвижный квадрат" в правой части окна браузера, которую пользователи сайта могут открыть и закрыть:

(На скриншоте показаны настройки в шаблоне Мастер-2. Цвет и другие аспекты могут различаться)

Важно: указанная выше процедура будет работать только с Warp 7 шаблонами/темами, которые являются актуальными..