Как оформить виджеты разным фоновым цветом



Виджеты блога blogspot с разным цветовым фоном 


Здравствуйте дорогие посетители. Сегодня продолжим тему оформления виджетов боковых колонок наших блогов. Хочу обратить внимание, что информация только для блогов Blogspot. За другие платформы ручаться не могу, так как у меня нет возможности протестировать работу кода, все мои блоги и основные, и демо на платформе blogspot.

Я уже писала в своих постах, как изменить фон  боковых панелей блога и как выделить виджеты блога разделителем. В этом посте мы научимся оформлять виджеты в блоге разным фоном, с использованием стилей CSS. Пример можете посмотреть в тестовом блоге.

Обратите внимание на первый и второй виджет справа, бирюзовый фон+оформление в рамку снизу+справа. Об этом так же будет информация. 

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

Нашли строку, слева нажимаем на черную стрелочку, медленно спускаемся вниз, находим строку ]]></b:skin> и выше вставляем стиль CSS

#HTML18{
background: #FCDFFF;
}

HTML18-это ID виджета. Как узнать ID виджета Вы прочтете в посте как изменить фон боковых панелей блога Blogspot. Ссылку я дала выше; background: #FCDFFF;-это фон виджета.

Как Вы поняли, это оформление фона только одного виджета. Может кому то надо будет выделить супер важный виджет в блоге, чтобы посетители сразу обратили на него внимание. 

Если же Вы захотите оформить все виджеты разным фоном, тогда вставляем стиль CSS для каждого ID виджета:

#HTML12{
background: #E89905;
}
#HTML3{
background: #00868B;
}
#PopularPosts1 {
background: #4CFEEE;



Можно оформить виджет в рамку, без фона и с фоном. Так же можно добавить стиль границы рамки border-bottom:7px ridge #96e8a4; (граница снизу, размером 7 рх, форма окантовки выпуклая-ridge, цвет зеленый); border-right:7px ridge #96e8a4; (граница справа). CSS будет выглядеть так:


#HTML3{
background: #00868B;
border-bottom:7px ridge #96e8a4; 
border-right:7px ridge #96e8a4;
}

Если хотите без фона, выделенное красным удалить. Вариантов оформления много, можно комбинировать: border-bottom:-граница снизу+border-top:-граница сверху; border-right:-граница справа+border-left;-граница слева. Так же можно менять форму окантовки (ridge, groove, dotted, dashed, solid, inset, double). Подробнее о формах рамок читайте как выделить часть текста в рамку


Чтобы сделать одинаковые формы границ, добавляем в код границу border:

#HTML3{
background: #00868B;
border: 2px dashed #b561ff;
}

Если есть желание закруглить фон или границы рамки, добавьте в код  border-radius:15px;

#HTML3{
background: #00868B;
border: 2px dashed #b561ff;
border-radius:15px;
}


Это стиль CSS с настройкой фона, форм, размеров и радиуса углов окантовки рамки

#HTML3{
background: #00868B;
border-top:7px ridge #96e8a4; 
border-bottom:7px ridge #96e8a4; 
border-right:7px ridge #96e8a4;
border-left:7px ridge #96e8a4; 
border-radius:15px;
}


У меня на сегодня все. Оформляйте, комбинируйте, настраивайте, фантазируйте. Будут вопросы, задавайте. Не стесняйтесь делиться с друзьями. Всем всего доброго.


Автор статьи ✎ Olga Protasova Выпуск ✹ 6/10/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *