1. Доступ к загрузкам имеют пользователи со статусом КЛИЕНТЫ (заказчики сайта)
    Для обновления одного шаблона необходимо оплатить услугу Техническая поддержка (500 руб. - Яндекс-деньги или банковский перевод) модуль справа-внизу, сообщить {admin_forum} контактный e-mail
  2. У наших подписчиков ВКонтакте появилась возможность скачать первую версию любого шаблона для ознакомления абсолютно бесплатно. Вступаем и заказываем нужный шаблон на странице группы - https://vk.com/yootheme
    Скрыть объявление

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

Тема в разделе "YOO Finch", создана пользователем admin_forum, 22 май 2016.

  1. admin_forum
    Оффлайн

    admin_forum Администратор Команда форума

    В шаблоне YOO Finch есть интересная функция для связи с социальными аккаунтами пользователей - "socialbar", который находится справа внизу окна и может быть открытым и отражать соц. сети:
    Finch.png
    Чтобы добавить подобную функцию в других 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

    • Нажмите кнопку "Сохранить и закрыть" в панели инструментов.
    Перезагрузите страницу на сайте и проверьте результат.
    Вы должны увидеть кнопку "неподвижный квадрат" в правой части окна браузера, которую пользователи сайта могут открыть и закрыть:
    Finch2.png
    (На скриншоте показаны настройки в шаблоне Мастер-2. Цвет и другие аспекты могут различаться)

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

Поделиться этой страницей