Перейти к содержимому


Изменение Внешнего Вида Виджетов Вконтакте


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 74

#1 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 22 Октябрь 2012 - 12:53

Добрый день. Подскажите, как можно изменить внешний вид виджетов вконтакте. Насколько я понимаю, стили меняются при помощи !important . Но как их прописать. Хочу, чтобы виджет сообщества с новостями на главной моего сайта имел рамку, как у товаров в блоках "Хиты продаж" и "Новинки", т.е. другой цвет рамки и округлые углы. Как это сделать?

#2 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 22 Октябрь 2012 - 13:24

Просмотр сообщения551 (22 Октябрь 2012 - 12:53) писал:

Добрый день. Подскажите, как можно изменить внешний вид виджетов вконтакте. Насколько я понимаю, стили меняются при помощи !important . Но как их прописать. Хочу, чтобы виджет сообщества с новостями на главной моего сайта имел рамку, как у товаров в блоках "Хиты продаж" и "Новинки", т.е. другой цвет рамки и округлые углы. Как это сделать?

Пожалуйста, пришлите код вашего виджета.

#3 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 22 Октябрь 2012 - 14:36

Просмотр сообщенияKoderhan (22 Октябрь 2012 - 13:24) писал:

Пожалуйста, пришлите код вашего виджета.

Вот код:

<div style="padding-left:20px">
<script type="text/javascript" src="//vk.com/js/api/openapi.js?55"></script>

<!-- VK Widget -->
<div id="vk_groups2"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups2", {mode: 2, wide: 1, width: "660", height: "500"}, 30526083);
</script>

</div>


#4 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 22 Октябрь 2012 - 17:34

Просмотр сообщения551 (22 Октябрь 2012 - 14:36) писал:

Вот код:

<div style="padding-left:20px">
<script type="text/javascript" src="//vk.com/js/api/openapi.js?55"></script>

<!-- VK Widget -->
<div id="vk_groups2"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups2", {mode: 2, wide: 1, width: "660", height: "500"}, 30526083);
</script>

</div>

Внешний вид виджета от VK.com, вы можете изменить на панели администратора, Сайт-Редактор тем, открыть файл main.csstemplate и в конец файла вставить следующие строки:
#vkwidget2 {
	border-radius: 10px;/*радиус закругленных углов*/
	border: 1px solid #E5E5E5 !important;/* толщина, вид выделения, цвет рамки*/
	
}

.community_head {
	background-color: #DAE2E8; /*цвет фона заголовка */
	color: #45688E; /*цвет текста заголовка*/
}


#5 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 22 Октябрь 2012 - 18:53

Так не работает. Помимо этого виджета вконтакте с новостями, на сайте есть такой же виджет с участниками. Эти два виджета очень долго не хотели работать, вот тема, в которой все описано. Код второго виджета в правой колонке такой:

<div>
<!-- VK Widget -->
<div id="vk_groups1"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups1", {mode: 0, width: "200", height: "290"}, 30526083);
</script>
<div style="clear:both;"></div>
</div>

После того как в стилях прописал то, что вы написали закругленные углы появились именно у виджета с участниками, а у виджета с новостями нет (все видно на сайте). Фон и цвет заголовка при этом не меняется ни в одном, ни в другом виджетах.

#6 Vaccina

Vaccina

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

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

Отправлено 23 Октябрь 2012 - 13:55

Фон и цвет внутри виджетов изменить не получиться, так как виджет отрабатывается внутри фрейма(iframe). Задавать стили для фрейма(iframe) можно только внутри фрейма(iframe). Можно задать только внешнее оформление блоков. У вас есть блоки с id vk_groups1, vk_groups2 вам необходимо тогда использовать класс

#vk_groups1, #vk_groups2 {
	border-radius: 10px;/*радиус закругленных углов*/
	border: 1px solid #E5E5E5 !important;/* толщина, вид выделения, цвет рамки*/
}

Использовать класс

.community_head {
	background-color: #DAE2E8; /*цвет фона заголовка */
	color: #45688E; /*цвет текста заголовка*/
}

не получиться по той причине, что данный элемент находиться внутри фрейма.

#7 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 23 Октябрь 2012 - 14:02

А вот здесь же так сделано http://privetatlet.ru/ (слева внизу)

#8 Vaccina

Vaccina

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

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

Отправлено 24 Октябрь 2012 - 11:57

В данном случае(тот что вы указываете) - шапка виджета сделана отдельно, т.е её вручную вставили перед виджетом, а самому виджету задали размеры, и скрыли стандартное отображение шапки. Это можно сделать задав жесткие размеры для блока с виджетом, так же установить свойство overflow:hidden; и поднять виджет вверх через margin-top: -15px;

#9 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 24 Октябрь 2012 - 12:27

Просмотр сообщенияVaccina (24 Октябрь 2012 - 11:57) писал:

В данном случае(тот что вы указываете) - шапка виджета сделана отдельно, т.е её вручную вставили перед виджетом, а самому виджету задали размеры, и скрыли стандартное отображение шапки. Это можно сделать задав жесткие размеры для блока с виджетом, так же установить свойство overflow:hidden; и поднять виджет вверх через margin-top: -15px;

А можно поподробнее? У меня сейчас виджет имеет размеры - width: "660", height: "500" . Остальное как прописать?

#10 Vaccina

Vaccina

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

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

Отправлено 25 Октябрь 2012 - 13:38

Примерно будет выглядеть это так

<div>
  <div style="color: #fff; background: #ccc; border-radius: 6px 6px 0 0; text-align: center; height: 16px; line-height: 16px;">Заголовок</div>
  <div style="width: 660px; height: 484px; overflow: hidden;">
	<div style="margin-top: -16px;">код виджета</div>
  </div>
</div>


#11 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 25 Октябрь 2012 - 15:08

Просмотр сообщенияVaccina (25 Октябрь 2012 - 13:38) писал:

Примерно будет выглядеть это так

<div>
  <div style="color: #fff; background: #ccc; border-radius: 6px 6px 0 0; text-align: center; height: 16px; line-height: 16px;">Заголовок</div>
  <div style="width: 660px; height: 484px; overflow: hidden;">
	<div style="margin-top: -16px;">код виджета</div>
  </div>
</div>


Спасибо большое. Пришлось конечно еще повозиться с кодом, чтобы все встало как надо) Но, по-моему, получилось круто)

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

  • Интернет магазин BabyLook. Детские шапки Chobi. Детская одежда Artigli  To Be Too  Pelican  Noble People. Аксессуары для детей. Детское нижнее белье..png


#12 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 23 Май 2013 - 23:22

Хелп ми, пожалуйста! Хочу вставить виджет комментариев в левый сайдбар ИМ, шаблон "Пластик". Виджет имеет минимальную ширину в 300 px. Блок не поддерживает такую ширину, из-за чего виджет выступает за пределы отведенного ему места. Можно ли принудительно виджету зажать ширину меньше 300 px? Если нет, то буду признательна за вариант решения этой траблы, желательно словами, понятные новичку :). Спасибо.

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

  • виджет вконтакте_cr.jpg


#13 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 24 Май 2013 - 01:50

Добавьте в ваш файл стилей main.css

#vk_comments, #vk_comments iframe {
   width: 223px !important;
}


#14 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 24 Май 2013 - 05:45

Просмотр сообщенияСake (24 Май 2013 - 01:50) писал:

Добавьте в ваш файл стилей main.css

#vk_comments, #vk_comments iframe {
width: 223px !important;
}

Супер! Спасибо!

#15 000-00-00

000-00-00

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 01 Июль 2013 - 18:53

Здравствуйте, уважаемые гуру! Подскажите, пожалуйста, как на сайте Максидрома  http://www.maxidrom.ru/page/history/ удалось перекрасить виджет вКонтакте? Заранее спасибо за ответ!

#16 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 01 Июль 2013 - 18:56

Просмотр сообщения000-00-00 (01 Июль 2013 - 18:53) писал:

Здравствуйте, уважаемые гуру! Подскажите, пожалуйста, как на сайте Максидрома  http://www.maxidrom.ru/page/history/ удалось перекрасить виджет вКонтакте? Заранее спасибо за ответ!

Будьте добры, укажите номер аккаунта Вашего сайта, чтобы мы смогли Вам помочь

#17 000-00-00

000-00-00

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 01 Июль 2013 - 19:48

Просмотр сообщенияsupport 2.0 (01 Июль 2013 - 18:56) писал:

Будьте добры, укажите номер аккаунта Вашего сайта, чтобы мы смогли Вам помочь

apiId: ********  (не уверен, верно ли я посмотрел в коде). Виджет "Комментарии".

#18 Vaccina

Vaccina

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

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

Отправлено 02 Июль 2013 - 02:07

мы имели ввиду адрес вашего магазина или номер аккаунта от вашего магазина, чтобы просмотреть виджет установленный и проконсультировать по стилизации

#19 000-00-00

000-00-00

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 03 Июль 2013 - 01:53

Просмотр сообщенияVaccina (02 Июль 2013 - 02:07) писал:

мы имели ввиду адрес вашего магазина или номер аккаунта от вашего магазина, чтобы просмотреть виджет установленный и проконсультировать по стилизации

Еще раз здравствуйте! Страница, на которой размещен виджет "Комментарии" — *******************

Большое спасибо, что тратите время на этот вопрос.

#20 Vaccina

Vaccina

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

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

Отправлено 03 Июль 2013 - 06:35

Сайт - Редактор шаблонов - main.css - пробуем следующее, в самом конце файла вставляем:
/* Отвечает за блок в целом */
#vk_comments{
}
/* Шапка, где указывается количество комментариев и логотип */
.wcomments_head{
}
/* Блок, куда пишем комментарий */
#wcomments_form{
}
/* Ответы на комментарий */
.post_table{
}
и уже их стилизуем, я вам прописала комментарии к каждому блоку, чтобы было понятно что мы стилизуем и самое главное, к каждому стилю прописываем !important
Пример:

/* Отвечает за блок в целом */
#vk_comments{
background: #000000 !important;
}

А сами стили вы можете поизучать тут: http://htmlbook.ru/




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

0 пользователей, 0 гостей, 0 анонимных