Как изменить стили виджета для сообществ ВК?

@smit1987 · Регистрация: 09.11.2012

Студворк — интернет-сервис помощи студентам

Виджет для сообществ: https://vk.com/dev/Community - новости.

Если из него удалить стили, то он будет подтягивать их из: vk.com.
У меня на сайте адаптивный дизайн. И необходимо подогнать размеры виджета к размерам блока, так чтобы они менялись вместе с ним.
Так же мне необходимо:
Сделать прозрачный фон. Эту настройку я вообще не нашел. Только 2 цвета.
Закруглить углы.

Добавлено через 19 минут
Кстати, сайт на Вордпрессе.

@skolm · 21.02.2016, 13:30

Javascript

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
</script>

Добавлено через 6 минут

Javascript

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
</script>

Заведите переменые через js которая будет хранить в себе размеры блока в котором находится виджет и эти переменные передавайте вместо width: "220", height: "400"

По поводу цвета, могу только посоветовать попробовать указать rgb (222,222,222, 0.1) - последним параметром.

@evikza · 21.02.2016, 17:13

smit1987, давайте зададим виджету ширину и высоту в 100% при помощи js:

Javascript

var widthVk = '100%';
    heightVk = '100%';
 
    VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "widthVk", height: "heightVk"}, 20003922);

Если капнуть чучуть в документацию vk виджеты: Метод VK.Widgets.Group принимает параметра:

color1 — цвет фона виджета в формате RRGGBB.
color2 — цвет текста в формате RRGGBB.
color3 — цвет кнопок в формате RRGGBB.

Вот пример получаем на выходе c адаптивным блоком:

HTML5

<style>
    .block {
        width: 800px;
        height: 350px;
    }
    @media only screen and (max-width : 768px) { 
    .block {
        width: 100%;
        height: 100%;
    }
    } 
</style>
<body>
<div class="block">
<div id="vk_groups"></div>
</div>
</body>
<script type="text/javascript">
var widthVk = '100%';
    heightVk = '100%';
 
    VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "widthVk", height: "heightVk", color3: "000000"}, 20003922);
</script>

@smit1987 · 22.02.2016, 09:51 **[ТС]**

Сообщение от skolm

Заведите переменые через js которая будет хранить в себе размеры блока в котором находится

Было бы проще, если бы я разбирался в js..

Добавлено через 8 часов 1 минуту

Сообщение от evikza

Вот пример получаем на выходе c адаптивным блоком:

Неа. Блок опустел.

@smit1987 7 / 9 / 0 Регистрация: 09.11.2012 Сообщений: 405
		1
	Как изменить стили виджета для сообществ ВК? 21.02.2016, 07:14. Показов 9892. Ответов 3 Метки нет (Все метки) Виджет для сообществ: https://vk.com/dev/Community - новости. Если из него удалить стили, то он будет подтягивать их из: vk.com. У меня на сайте адаптивный дизайн. И необходимо подогнать размеры виджета к размерам блока, так чтобы они менялись вместе с ним. Так же мне необходимо: Сделать прозрачный фон. Эту настройку я вообще не нашел. Только 2 цвета. Закруглить углы. Добавлено через 19 минут Кстати, сайт на Вордпрессе. 0

@smit1987 7 / 9 / 0 Регистрация: 09.11.2012 Сообщений: 405
	22.02.2016, 09:51 [ТС]	4
	Сообщение от skolm Заведите переменые через js которая будет хранить в себе размеры блока в котором находится Было бы проще, если бы я разбирался в js.. Добавлено через 8 часов 1 минуту Сообщение от evikza Вот пример получаем на выходе c адаптивным блоком: Неа. Блок опустел. 0

Опции темы