Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Настройка Позиционирования Виджета Вконтакте

Автор evros, 20 июня 2015 17:51

Авторизуйтесь для ответа в теме

Сообщений в теме: 9

#1 evros

Активный участник

Пользователи
284 сообщений

ГородМосква

Отправлено 20 Июнь 2015 - 17:51

Нужна помощь в настройке расположения виджета в контакте. При переходе в раздел Статьи виджет наползает на подвал сайта

Прикрепленные изображения

Наверх

#2 Cupuyc

Активный участник

Пользователи
747 сообщений

Отправлено 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 evros

Активный участник

Пользователи
284 сообщений

ГородМосква

Отправлено 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 %}>

Виджет приподнялся на подвалом сайта, но все равно залез на новости.

скрин

Прикрепленные изображения

Наверх

#4 RayLi

Активный участник

Модераторы
2 864 сообщений

Отправлено 23 Июнь 2015 - 11:38

evros (22 Июнь 2015 - 21:28) писал:

Виджет приподнялся на подвалом сайта, но все равно залез на новости.

скрин

Здравствуйте.
Попробуйте сделать следующее:
В шаблоне main.css добавьте данный код:

div#vk_groups {
  float: left;
}

Наверх

#5 evros

Активный участник

Пользователи
284 сообщений

ГородМосква

Отправлено 24 Июнь 2015 - 00:28

RayLi (23 Июнь 2015 - 11:38) писал:

Здравствуйте.
Попробуйте сделать следующее:
В шаблоне main.css добавьте данный код:

div#vk_groups {
float: left;
}

Отлично! Благодарю Вас за помощь!

Наверх

#6 Den1992

Продвинутый пользователь

Пользователи
60 сообщений

Отправлено 04 Сентябрь 2015 - 02:02

Как вообще сделать виджет вк ??? желательно что бы он был свернут в правой стороне экрана и при нажатии выдвигался

Наверх

#7 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 04 Сентябрь 2015 - 05:00

В шаблоне HTML перед </body> вставьте:

<!-- Виджет сообществ -->
	<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 Den1992

Продвинутый пользователь

Пользователи
60 сообщений

Отправлено 05 Сентябрь 2015 - 01:18

Vaccina (04 Сентябрь 2015 - 05:00) писал:

В шаблоне HTML перед </body> вставьте:

<!-- Виджет сообществ -->
<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 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 05 Сентябрь 2015 - 02:38

Попробуйте сам код виджета удалить

   <!-- 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 Den1992

Продвинутый пользователь

Пользователи
60 сообщений

Отправлено 06 Сентябрь 2015 - 02:11

Vaccina (05 Сентябрь 2015 - 02:38) писал:

Попробуйте сам код виджета удалить

<!-- 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 анонимных

Настройка Позиционирования Виджета Вконтакте

Прикрепленные изображения

Прикрепленные изображения

Прикрепленные изображения

Количество пользователей, читающих эту тему: 0

Войти

Google поиск