за туториал спасибо Альберт Вескер с форума ТП
Чтобы оформить виджеты необычным образом (сделать округлённым, с картинкой на фоне и т. д.) следуйте следующим инструкциям. Живой пример похожего использования кода у нас на главной странице, блок "Активно".
Шаг 1.
ПА - Модули - Виджеты форума - Создать персональный виджет.
В окне создания виджета:
Имя виджета : Виджет 1
Использовать стандартный шаблон : Нет.
Содержание виджета:
- Код:
<div class="viget">Сюда добавляете содержимое виджета: текст, ссылки и т.п. Оформляете всё в HTML<div>
_______________________________________________
Шаг 2.
ПА - Оформление - Цвета - Каскадная таблица стилей CSS
Добавляете:
- Код:
.viget {
background: url('ссылка на картинку фона'); /*фоновое изображение виджета*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; /*привязка фона к краям виджета*/
background-color: #E6A9AD; /*цвет фона*/
-moz-border-radius: 14px;
-webkit-border-radius: 15px;
-moz-box-shadow: 5px 5px 15px 5px;
-webkit-box-shadow: 5px 5px 15px 5px;
border-radius: 15px; /*округление углов виджета*/
font-size: 13px; /*размер шрифта в фиджете*/
width: 100%; /*ширина виджета*/
}
Моё примечание: При таком способе название виджета не будет отображаться, поэтому его лучше написать в самом содержании блока.