Как выделить виджеты блога разделителем

---

Разделители для виджетов боковых панелей

Здравствуйте дорогие читатели. Продолжаем тему об оформлении боковых панелей блогов blogspot. В своем предыдущем посте я написала, как выделить фоновым цветом боковые колонки. Кто еще не читал, прошу перейти по ссылке. 

Эта информация о разделителях для виджетов в форме просто фона и в форме изображения, с использованием CSS стилей. Так же, как и для изменения фона, стиль CSS вставляем чуть выше строки ]]></b:skin> в шаблоне блога. 

Как и где искать эту строку-подробно можно ознакомиться в сообщении как быстро и красиво оформить текст блога. Итак, кому интересна информация, переходим в шаблон-изменить шаблон. Делаем на всякий случай резервную копию шаблона. Далее находим строку ]]></b:skin> и выше вставляем скопированный код:

.sidebar .widget  {

border-bottom:7px ridge #b561ff;

border-radius:15px;

margin:0 0 1.5em;

padding:0 0 1.3em;

}

Выделенное красным-цвет и размер границ разделителя, здесь меняйте 7рх на свое значение, ridge-это формы границ, как в рамке; синим-размер закруглений границ; Пример можете посмотреть в демо блоге, разделители гаджетов выделены лиловым фоном с радиусом закругления 15 рх;

А этот стиль CSS для разделителя с изображением (картинкой)

.sidebar .widget {

margin:0 0 1.5em;

padding:0 0 50px;

background-image: url(url адрес изображения);

background-position: bottom;

background-repeat: no-repeat; 

}

Здесь выделенное красным-URL адрес изображения. Как узнать адрес картинки читайте здесь. Второй способ-можно кликнуть по картинке правой кнопкой мыши и нажать копировать URL картинки (изображения).

Вы можете посмотреть разделитель в форме изображения в тестовом блоге. Тестировала для примера. Я думаю, подобрав соответствующее изображение можно сделать красиво, конечно же зависит от тематики блога.

На сегодня у меня все, оформляйте боковые панели в своем индивидуальном стиле, фантазируйте, всем пока. Пишите, делитесь с друзьями. Почитайте информацию красивое оформление основного фона и всех страниц блога

Рекомендуемый контент: