Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.97/34: Рейтинг темы: голосов - 34, средняя оценка - 4.97
7 / 9 / 0
Регистрация: 09.11.2012
Сообщений: 399
1

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

21.02.2016, 07:14. Просмотров 6414. Ответов 3
Метки нет (Все метки)

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

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

Добавлено через 19 минут
Кстати, сайт на Вордпрессе.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.02.2016, 07:14
Ответы с готовыми решениями:

Перебиваются стили виджета Nav::widget при подключении виджета \yii\jui\Dialog::widget
Добрый день. Возникла следующяя проблема при подключении виджета \yii\jui\Dialog::widget в yii2 ...

Как навести мышку на x,y внутри виджета относительно 0,0 виджета (левого верхнего угла виджета)?
Как навести мышку на x,y внутри виджета относительно 0,0 этого виджета (левого верхнего угла...

Отредактировать стили виджета vk
есть код виджета <div id="vk_groups"></div> <script type="text/javascript">...

Как изменить название класса виджета на другой странице?
Есть список который выводиться виджетом на главной странице. от так я зарегистрировал виджет--с...

3
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
21.02.2016, 13:30 2
Javascript
1
2
3
4
5
<!-- 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
1
2
3
4
5
<!-- 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) - последним параметром.
0
431 / 268 / 176
Регистрация: 20.05.2015
Сообщений: 562
21.02.2016, 17:13 3
smit1987, давайте зададим виджету ширину и высоту в 100% при помощи js:

Javascript
1
2
3
4
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
0
7 / 9 / 0
Регистрация: 09.11.2012
Сообщений: 399
22.02.2016, 09:51  [ТС] 4
Цитата Сообщение от skolm Посмотреть сообщение
Заведите переменые через js которая будет хранить в себе размеры блока в котором находится
Было бы проще, если бы я разбирался в js..

Добавлено через 8 часов 1 минуту
Цитата Сообщение от evikza Посмотреть сообщение
Вот пример получаем на выходе c адаптивным блоком:
Неа. Блок опустел.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.02.2016, 09:51

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Программно изменить стили для всех заголовков
Приветствую всех! Прошу помощи! Для оптимизации работы, необходимо с помощью VBA изменить заголовки...

Как обвести виджет или изменить фон самого виджета?
Есть виджет MyWidget, внутри него подвиджеты. Если я делаю: myWidget-&gt;setStyleSheet(&quot;border : 1px...

Как изменить размер фонта у виджета и всех его детишек?
QDialog *mw = new QDialog(); mw-&gt;font().setPixelSize(16); Дает error: passing `const QFont'...

Не применяются стили виджета jQuery Vertical Accordion Menu в теме WP
Здравствуйте! Помогите найти ошибку. Делаю дополнительное вертикальное меню в виджете. Установила...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.