Блок Соцсетей
#1
Отправлено 24 Февраль 2016 - 15:47
1. Как сделать кнопки блока соц. сетей немного побольше, а отзывы о товаре немного ниже блока (файл 1);
2. Как вставить в страницу "мастер-классы" и закрепить внизу монитора блок соц. сетей (чтобы страница прокручивалась, а блок сетей оставался внизу монитора пример: файл 2, файл 3)
Аккаунт SL-261332
#2
Отправлено 24 Февраль 2016 - 16:37
Ася (24 Февраль 2016 - 15:47) писал:
1. Как сделать кнопки блока соц. сетей немного побольше, а отзывы о товаре немного ниже блока (файл 1);
2. Как вставить в страницу "мастер-классы" и закрепить внизу монитора блок соц. сетей (чтобы страница прокручивалась, а блок сетей оставался внизу монитора пример: файл 2, файл 3)
Аккаунт SL-261332
Здравствуйте.
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.ya-share2__container_size_m .ya-share2__icon { height: 30px !important; width: 30px !important; background-size: 30px 30px !important; }
2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Страница, найдите код:
<!-- Контент страницы --> <div class="htmlDataBlock"> {PAGE_CONTENT} </div>
Замените на:
<!-- Контент страницы --> <div class="htmlDataBlock"> {PAGE_CONTENT} </div> {% IF PAGE_NAME=Мастер-Классы %} <div class="social-buttons-block-fixed social-buttons-block"> <div class="box"> <script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,pinterest" data-image="http://larinarium.ru/" data-counter=""></div> </div> </div> {% ENDIF %}
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.social-buttons-block-fixed { position: fixed; bottom: 0; margin-bottom: 0px; border-radius: 6px 6px 0 0; } .social-buttons-block { width: 678px; height: 50px; z-index: 999; } .social-buttons-block .box { position: relative; padding: 12px 16px; margin-bottom: 20px; background-color: rgba(232,240,246,0.6); border-radius: 6px; text-align:center; }
#3
Отправлено 25 Февраль 2016 - 17:18
1. По 1 вопросу всё проделала как написано в п.1, но ничего не изменилось. Размер у блока остался тот же и расстояние между блоком и нижестоящей строчкой не увеличилось... Что можно ещё попробовать? Кэш чистила.
2. По второму вопросу наверное некорректно объяснила. После манипуляций описанных в п.2 у меня получилась как во вложении "мастер-класс" (блок на самой странице "мастер-класс"), а мне нужно, чтобы блок был в самих мастер-классах, пример во вложенном файле "мастер-класс_2", кнопочки желательно побольше и чтобы блок был по центру и при прокрутке страницы оставался внизу монитора, как здесь http://www.livemaste...-tsvety-solntsa .
Firefly (24 Февраль 2016 - 16:37) писал:
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.ya-share2__container_size_m .ya-share2__icon { height: 30px !important; width: 30px !important; background-size: 30px 30px !important; }
2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Страница, найдите код:
<!-- Контент страницы --> <div class="htmlDataBlock"> {PAGE_CONTENT} </div>
Замените на:
<!-- Контент страницы --> <div class="htmlDataBlock"> {PAGE_CONTENT} </div> {% IF PAGE_NAME=Мастер-Классы %} <div class="social-buttons-block-fixed social-buttons-block"> <div class="box"> <script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,pinterest" data-image="http://larinarium.ru/" data-counter=""></div> </div> </div> {% ENDIF %}
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.social-buttons-block-fixed { position: fixed; bottom: 0; margin-bottom: 0px; border-radius: 6px 6px 0 0; } .social-buttons-block { width: 678px; height: 50px; z-index: 999; } .social-buttons-block .box { position: relative; padding: 12px 16px; margin-bottom: 20px; background-color: rgba(232,240,246,0.6); border-radius: 6px; text-align:center; }
#4
Отправлено 26 Февраль 2016 - 12:44
Ася (25 Февраль 2016 - 17:18) писал:
1. По 1 вопросу всё проделала как написано в п.1, но ничего не изменилось. Размер у блока остался тот же и расстояние между блоком и нижестоящей строчкой не увеличилось... Что можно ещё попробовать? Кэш чистила.
2. По второму вопросу наверное некорректно объяснила. После манипуляций описанных в п.2 у меня получилась как во вложении "мастер-класс" (блок на самой странице "мастер-класс"), а мне нужно, чтобы блок был в самих мастер-классах, пример во вложенном файле "мастер-класс_2", кнопочки желательно побольше и чтобы блок был по центру и при прокрутке страницы оставался внизу монитора, как здесь http://www.livemaste...-tsvety-solntsa .
Здравствуйте, сейчас у Вас блок соцсетей крупный, чтобы добавить отступ снизу к ним, в конце main.css добавьте код:
.ya-share2 { margin-bottom: 25px; }
Чтобы добавить в самих мастер-классах блок соц-сетей, в шаблоне Страница код:
замените на код:
{% IF PAGE_NAME=Делаем кудель кардером || PAGE_NAME= Прядение собачьей шерсти на деревянной прялке %}
если у Вас появится еще страницы с мастер-классами, то в этом коде нужно будет добавлять кода вида:
|| PAGE_NAME= название страницы
следующим образом:
{% IF PAGE_NAME=Делаем кудель кардером || PAGE_NAME= Прядение собачьей шерсти на деревянной прялке || PAGE_NAME= название страницы %}
#5
Отправлено 26 Февраль 2016 - 13:45
1. Код добавила, отступ не появился
Юля123 (26 Февраль 2016 - 12:44) писал:
.ya-share2 { margin-bottom: 25px; }
2. Кто-то код заменил, но ничего не изменилось, в самих мастер-классах блок не появился. Что делать???
Юля123 (26 Февраль 2016 - 12:44) писал:
Чтобы добавить в самих мастер-классах блок соц-сетей, в шаблоне Страница код:
замените на код:
{% IF PAGE_NAME=Делаем кудель кардером || PAGE_NAME= Прядение собачьей шерсти на деревянной прялке %}
если у Вас появится еще страницы с мастер-классами, то в этом коде нужно будет добавлять кода вида:
|| PAGE_NAME= название страницы
следующим образом:
{% IF PAGE_NAME=Делаем кудель кардером || PAGE_NAME= Прядение собачьей шерсти на деревянной прялке || PAGE_NAME= название страницы %}
#6
Отправлено 26 Февраль 2016 - 14:28
Ася (26 Февраль 2016 - 13:45) писал:
1. Код добавила, отступ не появился
[/font][/color]
2. Кто-то код заменил, но ничего не изменилось, в самих мастер-классах блок не появился. Что делать???
1) На данный момент отступ присутствует(см. скриншот)
2) Изменения Вам произвели, виджет появился в мастер классах, но он прикреплен к нижней части экрана.
Если хотите изменить расположение виджета, то укажите на скриншоте, область в которой он должен отображаться.
#7
Отправлено 26 Февраль 2016 - 15:02
Danil (26 Февраль 2016 - 14:28) писал:
1) На данный момент отступ присутствует(см. скриншот)
Screenshot_7.jpg
2) Изменения Вам произвели, виджет появился в мастер классах, но он прикреплен к нижней части экрана.
Если хотите изменить расположение виджета, то укажите на скриншоте, область в которой он должен отображаться.
#8
Отправлено 26 Февраль 2016 - 17:04
Ася (26 Февраль 2016 - 15:02) писал:
Чтобы изменить размер иконок соц. сетей, нужно по новой сгенерировать виджет с другими параметрами, а после произвести изменения в коде html:
в html найдите код(встречается 2 раза)
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="icon" data-yashareQuickServices="vkontakte,twitter,odnoklassniki,moimir"></div>и замените на новый.
#9
Отправлено 26 Февраль 2016 - 17:10
Danil (26 Февраль 2016 - 17:04) писал:
Чтобы изменить размер иконок соц. сетей, нужно по новой сгенерировать виджет с другими параметрами, а после произвести изменения в коде html:
в html найдите код(встречается 2 раза)
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="icon" data-yashareQuickServices="vkontakte,twitter,odnoklassniki,moimir"></div>и замените на новый.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных