за туториал спасибо Альберт Вескер с форума ТП

Чтобы оформить виджеты необычным образом (сделать округлённым, с картинкой на фоне и т. д.) следуйте следующим инструкциям. Живой пример похожего использования кода у нас на главной странице, блок "Активно".

Шаг 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%; /*ширина виджета*/
   }

Сохраняете.

Моё примечание: При таком способе название виджета не будет отображаться, поэтому его лучше написать в самом содержании блока.