Создаю виджет для подключения на сторонние сайты.
Виджет делаю на bootstrap широким, чтобы можно было вставлять под новости на сайтах и чтобы при необходимости он сам уменьшался до нужного размера, к примеру, если вставить его в боковую панель сайта.
Столкнулся с проблемой конфликта стилей, при встраивании в сторонние сайты, стили основного сайта портятся, сайт съезжает и становится кривым.
Как правильно создать виджет со своими стилями, чтобы они не портили основной сайт?
Вызываю виджет так:
<div id="wrgsv" class="yashare-auto-init"></div>
<script src="http://site.com/widget/widget.js" type="text/javascript"></script>
<script type="text/javascript">wrgsv.init();</script>
Добавил к блоку класс
yashare-auto-init
Далее в подключаемом файле стилей пишу стили так:
.yashare-auto-init body {
color: #666666;
font-size: 13px;
line-height: 23px;
background: #fff;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
.yashare-auto-init h1,
.yashare-auto-init h2,
.yashare-auto-init h3,
.yashare-auto-init h4,
.yashare-auto-init h5,
.yashare-auto-init h6 {
color: #666;
т.е. данные стили влияют только на блок
yashare-auto-init - то, что нужно.
Можно как-то в этот блок подключить сторонние стили? Чтобы они работали только для данного блока.
Подключаю так:
@import "http://selection-studio.com/downloads/Razrabotka/mega-elements-bootstrap/ui/css/bootstrap.min.css";
@import "http://selection-studio.com/downloads/Razrabotka/mega-elements-bootstrap/ui/css/font-awesome.min.css";
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600');
стили портят основной сайт, как приспособить их для блока
yashare-auto-init не знаю.
Направьте в нужном направлении )
Спасибо!
Простой
