Меняем цвет фона sidebar в блоге с использованием CSS стилей
Здравствуйте дорогие гости и читатели. Сегодня наша тема о боковых колонках наших блогов. Уверена, каждый владелец хочет оформить свой блог индивидуально, внести какую то изюминку, чтобы запомнился посетителям и желательно надолго.
Вариантов оформления много-это внешний фон, индивидуально оформленная шапка блога, шрифт, дизайн и.т.д. Я хочу предложить для Ваших блогов оформление боковых колонок, а именно расскажу, как в родных шаблонах blogspot изменить фон боковой колонки.
В нестандартных шаблонах этот вариант не пойдет. Во всяком случае, у меня после вставки стилей CSS ничего не изменилось. В этих шаблонах уже есть возможность изменить фон. Надо в шаблоне найти sidebar и меняйте, что хотите.
Итак, экспериментировала на своем тестовом блоге, шаблон "простой". Кстати, можете сходить в этот блог и посмотреть для примера на боковые колонки. И обратите внимание на заголовок гаджета (пример слайдера), так как информация об изменении заголовка так же будет в этом посте.
Поехали дальше: идем в шаблон-изменить шаблон. Делаем резервную копию шаблона. Дальше нажимаем изменить шаблон и находим строку <b:skin....</b:skin>. Кто не знает где искать, почитайте мой пост как быстро и красиво оформить текст в блоге. Прокручиваем вниз и сверху строки ]]></b:skin> вставляем стиль CSS
#sidebar-right{
background:#ffefdb;}
background:#ffefdb;}
Этот код для изменения фона в правой боковой колонке. У кого колонка слева, вместо right впишите left. Чтобы задать границы, нужно в код дописать border: 7px (размер границ) и groove # 2db3e9; (форма и цвет границ) и код будет выглядеть так:
HTML15-это ID виджета; выделенное синим-URL адрес изображения; красным-настройте ширину и высоту; фиолетовым-размер шрифта; border-radius: 15px;-размер округления границ; padding-top:5px;-расположение текста заголовка (верх-низ).
Вот и все. Комментируйте, делитесь с друзьями. Всего Вам доброго. Почитайте по теме красивое оформление основного фона и всех страниц блога.
#sidebar-right{
background:#ffefdb;
border:7px groove #2db3e9;}
background:#ffefdb;
border:7px groove #2db3e9;}
Здесь так же, у кого колонка слева измените right на left. Теперь, если в блоге две боковые панели, то необходимо вставить стили CSS и правой и левой панели
#sidebar-right{
background:#ffefdb;
border:3px groove #2db3e9;
border:3px groove #2db3e9;
}
#sidebar-left{
background:#ffefdb;
border:3px groove #2db3e9;
border:3px groove #2db3e9;
}
Настраивайте, меняйте цвета и размеры. Кому не нужны границы, удалите строку, у меня выделено. Далее, на заголовок виджета в тестовом блоге обратили внимание. Чтобы изменить стиль заголовка, нам надо узнать ID виджета.
Можно посмотреть по заголовку виджета в шаблоне, но есть способ проще. В дизайне нажимаете изменить гаджет, смотрите скриншот
Можно посмотреть по заголовку виджета в шаблоне, но есть способ проще. В дизайне нажимаете изменить гаджет, смотрите скриншот
Когда откроется вкладка с кодом виджета, вставьте курсор мыши в адресную строку, прокрутите стрелкой вправо (на клавиатуре) и в самом конце адреса увидите ID виджета. Выше строки ]]></ b:skin> вставляем стиль CSS
#HTML15 h2 {
background: url(адрес изображения);
height:30px;
width: 230px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-goog-ms-border-radius: 15px;
margin-left: 0px;
padding-top:5px;
font-family: Sans-serif, Arial;
font-size: 13px;
text-align: center;
}
HTML15-это ID виджета; выделенное синим-URL адрес изображения; красным-настройте ширину и высоту; фиолетовым-размер шрифта; border-radius: 15px;-размер округления границ; padding-top:5px;-расположение текста заголовка (верх-низ).
Вот и все. Комментируйте, делитесь с друзьями. Всего Вам доброго. Почитайте по теме красивое оформление основного фона и всех страниц блога.
Рекомендуемый контент:
А как поменять фон у названий этих колонок? Типа "подписчики" или "популярные сообщения"?
ОтветитьУдалитьХочу чтоб была только черная полосочка фоном к названию гаджетов, а содержание было также без цвета, не подскажите?:)
Виктория, я так понимаю, Вам надо изменить фон заголовка виджета:
Удалитьhttp://www.bdblogov.ru/2014/06/asissue-header-widget-background-color.html
Вот еще изображения для заголовков виджетов
http://www.bdblogov.ru/2015/04/image-for-headers-widget.html
Если неправильно Вас поняла, пишите.
Да, спасибо большое!!! Все получилось!
УдалитьПожалуйста Виктория, заходите еще за информацией.
ОтветитьУдалить