0
Настройка Позиционирования Виджета Вконтакте
Автор evros, 20 июня 2015 17:51
Сообщений в теме: 9
#1
Отправлено 20 Июнь 2015 - 17:51
Нужна помощь в настройке расположения виджета в контакте. При переходе в раздел Статьи виджет наползает на подвал сайта
#2
Отправлено 20 Июнь 2015 - 19:41
evros (20 Июнь 2015 - 17:51) писал:
Нужна помощь в настройке расположения виджета в контакте. При переходе в раздел Статьи виджет наползает на подвал сайта
Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML найдите код:
<!-- Товары на главной, Хиты продаж, Новинки --> <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 yt-tab-listing" id="main_right">
Замените его на:
<!-- Товары на главной, Хиты продаж, Новинки --> <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 yt-tab-listing" id="main_right" {% IF PAGE_NAME = Акции магазина %} style="height: 920px;" {% ENDIF %}>
#3
Отправлено 22 Июнь 2015 - 21:28
Cupuyc (20 Июнь 2015 - 19:41) писал:
Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML найдите код:
Замените его на:
<!-- Товары на главной, Хиты продаж, Новинки --> <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 yt-tab-listing" id="main_right">
Замените его на:
<!-- Товары на главной, Хиты продаж, Новинки --> <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 yt-tab-listing" id="main_right" {% IF PAGE_NAME = Акции магазина %} style="height: 920px;" {% ENDIF %}>
Виджет приподнялся на подвалом сайта, но все равно залез на новости.
скрин
#6
Отправлено 04 Сентябрь 2015 - 02:02
Как вообще сделать виджет вк ??? желательно что бы он был свернут в правой стороне экрана и при нажатии выдвигался
#7
Отправлено 04 Сентябрь 2015 - 05:00
В шаблоне HTML перед </body> вставьте:
вставьте id группы
Далее в main.css добавьте:
В конец main.js вставьте:
<!-- Виджет сообществ --> <div id="community_widget_right"> <div class="community-widget"> <span class="community-widget-button"><i class="fa fa-vk"></i></span> <div class="community-widget-content"> <!-- VK Widget. Замените id(20003922) на id Вашей группы --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922); </script> </div> </div> </div>
вставьте id группы
Далее в main.css добавьте:
/* Виджет сообществ */ .community-widget {width: 260px;background: #FFF;padding: 0px;z-index: 998;border: 1px solid #cecece;border-right: none;position: fixed;right: 0px;top: 100px;-webkit-border-radius: 0 0 0 8px;-moz-border-radius: 0 0 0 8px;border-radius: 0 0 0 8px;} .community-widget .community-widget-button {position: absolute;top: -1px;right: 100%;height: 50px;width: 50px;font-size: 20px;cursor: pointer;line-height: 46px;background: #fff;text-align: center;border: 1px solid #ddd;-webkit-border-radius: 8px 0 0 8px;-moz-border-radius: 8px 0 0 8px;border-radius: 8px 0 0 8px;} .community-widget .community-widget-button i {text-align: center;vertical-align: middle;} .community-widget .community-widget-content {padding: 12px 20px;} .community-widget .community-widget-content .block .block-title {padding: 0px 0px 10px;border-bottom: 1px solid #DDD;font-family: Open Sans, sans-serif;font-weight: 300 !important;color: #666666;font-size: 150%;text-transform: uppercase;} .community-widget .community-widget-content .block .block-content {padding: 10px 0px 5px;} .community-widget:hover .community-widget-button .fa-vk {color: #537599;}
В конец main.js вставьте:
// Виджеты групп в правой части $(document).ready(function(){ $i=0; $('#community_widget_right .community-widget').each(function(){ $(this).css({ 'right' : - $(this).outerWidth(), 'top' : 100 + $i*60 }); $i++; $(this).mouseenter(function(el){ $(this).stop().animate({ 'right':'0px', 'z-index':'999' }, 600); }).mouseleave(function(el){ $(this).stop().animate({ 'right': - $(this).outerWidth(), 'z-index':'998' }, 600); }); }); });
#8
Отправлено 05 Сентябрь 2015 - 01:18
Vaccina (04 Сентябрь 2015 - 05:00) писал:
В шаблоне HTML перед </body> вставьте:
вставьте id группы
Далее в main.css добавьте:
В конец main.js вставьте:
<!-- Виджет сообществ --> <div id="community_widget_right"> <div class="community-widget"> <span class="community-widget-button"><i class="fa fa-vk"></i></span> <div class="community-widget-content"> <!-- VK Widget. Замените id(20003922) на id Вашей группы --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922); </script> </div> </div> </div>
вставьте id группы
Далее в main.css добавьте:
/* Виджет сообществ */ .community-widget {width: 260px;background: #FFF;padding: 0px;z-index: 998;border: 1px solid #cecece;border-right: none;position: fixed;right: 0px;top: 100px;-webkit-border-radius: 0 0 0 8px;-moz-border-radius: 0 0 0 8px;border-radius: 0 0 0 8px;} .community-widget .community-widget-button {position: absolute;top: -1px;right: 100%;height: 50px;width: 50px;font-size: 20px;cursor: pointer;line-height: 46px;background: #fff;text-align: center;border: 1px solid #ddd;-webkit-border-radius: 8px 0 0 8px;-moz-border-radius: 8px 0 0 8px;border-radius: 8px 0 0 8px;} .community-widget .community-widget-button i {text-align: center;vertical-align: middle;} .community-widget .community-widget-content {padding: 12px 20px;} .community-widget .community-widget-content .block .block-title {padding: 0px 0px 10px;border-bottom: 1px solid #DDD;font-family: Open Sans, sans-serif;font-weight: 300 !important;color: #666666;font-size: 150%;text-transform: uppercase;} .community-widget .community-widget-content .block .block-content {padding: 10px 0px 5px;} .community-widget:hover .community-widget-button .fa-vk {color: #537599;}
В конец main.js вставьте:
// Виджеты групп в правой части $(document).ready(function(){ $i=0; $('#community_widget_right .community-widget').each(function(){ $(this).css({ 'right' : - $(this).outerWidth(), 'top' : 100 + $i*60 }); $i++; $(this).mouseenter(function(el){ $(this).stop().animate({ 'right':'0px', 'z-index':'999' }, 600); }).mouseleave(function(el){ $(this).stop().animate({ 'right': - $(this).outerWidth(), 'z-index':'998' }, 600); }); }); });
#9
Отправлено 05 Сентябрь 2015 - 02:38
Попробуйте сам код виджета удалить
Если ошибка из-за него, то верните обратно код виджета, а в шаблоне HTML после тега <head> пропишите:
<!-- VK Widget. Замените id(20003922) на id Вашей группы --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922); </script>
Если ошибка из-за него, то верните обратно код виджета, а в шаблоне HTML после тега <head> пропишите:
<script type="text/javascript" src="//vk.com/js/api/openapi.js?117"></script>
#10
Отправлено 06 Сентябрь 2015 - 02:11
Vaccina (05 Сентябрь 2015 - 02:38) писал:
Попробуйте сам код виджета удалить
Если ошибка из-за него, то верните обратно код виджета, а в шаблоне HTML после тега <head> пропишите:
<!-- VK Widget. Замените id(20003922) на id Вашей группы --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922); </script>
Если ошибка из-за него, то верните обратно код виджета, а в шаблоне HTML после тега <head> пропишите:
<script type="text/javascript" src="//vk.com/js/api/openapi.js?117"></script>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных