Меняем цвет фона sidebar в блоге с использованием CSS стилей
Обновлено: 26.01.2020 г Здравствуйте дорогие гости и читатели. Сегодня наша тема о боковых колонках наших блогов. Уверена, каждый владелец хочет оформить свой блог индивидуально, внести какую то изюминку, чтобы запомнился посетителям и желательно надолго.
Вариантов оформления много-это внешний фон, индивидуально оформленная шапка блога, шрифт, дизайн и.т.д. Я хочу предложить для Ваших блогов оформление боковых колонок, а именно расскажу, как в родных шаблонах blogspot изменить фон боковой колонки.
В нестандартных шаблонах этот вариант не пойдет. Во всяком случае, у меня после вставки стилей CSS ничего не изменилось. В этих шаблонах уже есть возможность изменить фон. Надо в шаблоне найти sidebar и меняйте, что хотите.
Итак, экспериментировала на своем тестовом блоге, шаблон "простой". Кстати, можете сходить в этот блог и посмотреть для примера на боковые колонки. И обратите внимание на заголовок гаджета (пример слайдера), так как информация об изменении заголовка так же будет в этом посте.
Поехали дальше: вкладка тема-изменить HTML. Делаем резервную копию шаблона. Дальше нажимаем изменить HTML и находим строку <b:skin....</b:skin>. Кто не знает где искать, почитайте мой пост как быстро и красиво оформить текст в блоге. Прокручиваем вниз и сверху строки ]]></b:skin> вставляем стиль CSS
Только фон боковой колонки
.sidebar{
background:#03b4cc;
}
С границей рамки
.sidebar{
background:#03b4cc;
border:3px groove #2db3e9;
}
Если шаблон с одной боковой панелью, изменится цвет фона правой или левой колонки. С двумя, изменится фон обоих. Можно стили CSS вставить дизайн добавить гаджет:
.sidebar{
background:#03b4cc;
border:3px groove #2db3e9;
}</style>
Ниже стили CSS, в некоторых шаблонах уже не работают.
.sidebar-right{
background:#ffefdb;}
background:#ffefdb;}
.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
Если неправильно Вас поняла, пишите.
Да, спасибо большое!!! Все получилось!
УдалитьПожалуйста Виктория, заходите еще за информацией.
ОтветитьУдалитьЗдравствуйте! Скажите, пожалуйста, почему может не меняться цвет боковых панелей, если вставляю представленный код и пытаюсь менять значения цветов? Ошибку не выдает, но и ничего не меняет...
ОтветитьУдалитьVtravelS, здравствуйте. Протестировала во многих шаблонах, действительно, фон не меняется. Нужны небольшие изменения. Статью дописала, пробуйте первые CSS стили, должно получится. Напишите.
Удалить