Изменение Внешнего Вида Виджетов Вконтакте
#1
Отправлено 22 Октябрь 2012 - 12:53
#2
Отправлено 22 Октябрь 2012 - 13:24
551 (22 Октябрь 2012 - 12:53) писал:
Пожалуйста, пришлите код вашего виджета.
#3
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 23 Октябрь 2012 - 13:55
#vk_groups1, #vk_groups2 { border-radius: 10px;/*радиус закругленных углов*/ border: 1px solid #E5E5E5 !important;/* толщина, вид выделения, цвет рамки*/ }
Использовать класс
.community_head { background-color: #DAE2E8; /*цвет фона заголовка */ color: #45688E; /*цвет текста заголовка*/ }
не получиться по той причине, что данный элемент находиться внутри фрейма.
#8
Отправлено 24 Октябрь 2012 - 11:57
#9
Отправлено 24 Октябрь 2012 - 12:27
Vaccina (24 Октябрь 2012 - 11:57) писал:
А можно поподробнее? У меня сейчас виджет имеет размеры - width: "660", height: "500" . Остальное как прописать?
#10
Отправлено 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
Отправлено 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>
Спасибо большое. Пришлось конечно еще повозиться с кодом, чтобы все встало как надо) Но, по-моему, получилось круто)
#12
Отправлено 23 Май 2013 - 23:22
#13
Отправлено 24 Май 2013 - 01:50
#vk_comments, #vk_comments iframe { width: 223px !important; }
#15
Отправлено 01 Июль 2013 - 18:53
#16
Отправлено 01 Июль 2013 - 18:56
000-00-00 (01 Июль 2013 - 18:53) писал:
Будьте добры, укажите номер аккаунта Вашего сайта, чтобы мы смогли Вам помочь
#18
Отправлено 02 Июль 2013 - 02:07
#19
Отправлено 03 Июль 2013 - 01:53
Vaccina (02 Июль 2013 - 02:07) писал:
Еще раз здравствуйте! Страница, на которой размещен виджет "Комментарии" — *******************
Большое спасибо, что тратите время на этот вопрос.
#20
Отправлено 03 Июль 2013 - 06:35
/* Отвечает за блок в целом */ #vk_comments{ } /* Шапка, где указывается количество комментариев и логотип */ .wcomments_head{ } /* Блок, куда пишем комментарий */ #wcomments_form{ } /* Ответы на комментарий */ .post_table{ }и уже их стилизуем, я вам прописала комментарии к каждому блоку, чтобы было понятно что мы стилизуем и самое главное, к каждому стилю прописываем !important
Пример:
/* Отвечает за блок в целом */ #vk_comments{ background: #000000 !important; }
А сами стили вы можете поизучать тут: http://htmlbook.ru/
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных