Как сделать фон|рамку боковой панели с помощью CSS.

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

Дизайнер шаблонов Blogger.

Самый простой способ - перейти в "Дизайнер шаблонов".

Войти в Дизайнер шаблонов Blogger.
Войти в "Дизайнер шаблонов" Blogger.
Здесь можно подобрать нужный вариант вида блога. Но изменение группы шаблонов, например, "Простая" на "Путешествие", повлечёт за собой удаление ваших индивидуальных настроек.

Обрамление гаджетов боковой панели.

Далее поработаем с CSS стилем виджетов боковой панели. Для этого переходим на вкладку "Дизайн"-"Изменить HTML" и нажав CTRL+F ищем нужный фрагмент. Нас интересуют элементы:
.post-outer {}поле сообщения
.sidebar .widget{}поле гаджетов
Они в зависимости от шаблона могут и присутствовать, или нет. Если вы их не найдете, то они включаются до:
]]></b:skin>

В скобки можно добавить такие свойства, как:
border:2px solid #d2bf94;ширина и цвет рамки
padding: 10px;отступ от рамки
margin:1em 0 1em;расстояние до рамки
background: #e9dec4;цвет фона
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
закруглённые края, не работает в Internet Explorer
-moz-box-shadow:0 0 30px #a28b53 inset;
box-shadow:0 0 30px #a28b53 inset;
-webkit-box-shadow:0 0 30px #a28b53 inset;
тень, не работает в Internet Explorer
Некоторые из них уже могут присутствовать в элементе, поэтому существующие параметры этих свойств нужно удалить.

Результатом будет (картинка является ссылкой на другой блог-образец):
Как сделать фон|рамку боковой панели с помощью CSS.
Как сделать фон|рамку боковой панели с помощью CSS.

Вид гаджета "Архив" при использовании тени, например, может быть таким (картинка является ссылкой на другой блог-образец):
Тень у гаджетов Blogger.
Тень у гаджетов Blogger.

Также мне понравился вот этот зрительный эффект (картинка является ссылкой на другой блог-образец, стили к сообщению прилагаются):
Интересный край у элемента.
Интересный край у элемента.

Фон можно задать изображением:
background: url(адрес_рисунка);
Это даёт нам возможность сделать более сложные элементы:
.sidebar .widget {
  background:url(http://i883.photobucket.com/albums/ac37/Deizee/sidebartop1.jpg)center top no-repeat; 
  margin-top:10px; 
  padding-top:30px }

.sidebar .widget-content {
  background:url(http://i017.radikal.ru/0911/24/ec2188d07750.jpg) center bottom no-repeat;
  padding:0px 0px 15px 10px; }

.sidebar .widget h2 {
  position:relative;
  font:bold 16px "Trebuchet MS"; 
  color:#602600; 
  margin:0px; 
  text-align:center;
  background:url(http://i883.photobucket.com/albums/ac37/Deizee/sidebarh21.jpg) center bottom no-repeat; 
  padding:0px 0px 18px 10px;}
Данный код корректно отображается для двухколоночного стандартного шаблона, что связано с длиной поля гаджета. Также хочу отметить, что либо нужно уметь пользоваться Фотошопом, либо подгонять цвета блога к палитре выбранного изображения. А большое количество фоновых рисунков увеличит загрузку страницы. Но результат очень симпатичный (картинка является ссылкой на другой блог-образец):
Изменить дизайн гаджета.
Изменить дизайн гаджета.

Здесь на блоге для сообщений применён следующий стиль:
текст
Поменять фон и рамку сообщения Blogger.
box-shadow, goog-ms-box-shadow, -webkit-box-shadow указывать не нужно. Они были сформированы платформой Blogger и я не стала их удалять.

В конце шаблона можно увидеть ID каждого отдельного гаджета.
ID отдельного гаджета
Если вы хотите разнообразить вид блога и использовать разные стили для элементов боковой панели, то значения CSS можно задавать вида
#ID-гаджета {}
Стиль для одного гаджета Blogger
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

78 комментариев:

Ell_Kat
дааа, я конечно быстро все схватываю, но с этим вообще беда. мне хотя бы не то что фон изменить, а просто достаточно было бы разграничить боковые панели рамочкой))))
начну с того, что я не нашла этих .sidebar .widget{}
а до ]]> у меня куча всего. вот именно что:

/* Mobile
----------------------------------------------- */
body.mobile {
padding: 0;
}

.mobile .content-inner {
padding: 0;
}

.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 $(content.shadow.spread);
}
... (там еще много обзацев)
.mobile .footer-outer {
border-top: none;
}

.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}

.mobile-link-button {
background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(content.background.color);
}
]]>
я формулу для гаджетов должна вставить до этой надписи ]]> ?

Заранее благодарна за ответ))
NMitra
С Наступающим! )))

Немного выше есть фрагмент:
/* Widgets
--------------------------------------------- */

После него можно указать, скажем, так:

.sidebar .widget{
padding: 10px;
margin: 1em 0 1em;
border: 1px ridge #fff;
}

Фон и тени можно накладывать любые, в том числе менять значение свойства border.

Как правило, потом возникает необходимость разделения и сообщений блога. Чтобы не запутаться в шаблоне, перед
/* Posts
--------------------------------------------- */

можно добавить аналогичное

.post-outer {
padding: 15px 20px;
margin: 0 0 20px;
border: 1px ridge #fff;
}
Photographer
А как сделать чтобы фон был прозрачным.
NMitra
background: transparent;

Но для того, чтобы фон гаджетов совпадал с фоном сообщения скопируйте предложенные значения background из .post-outer.

Если я не ошибаюсь в вашем случае будет:

.sidebar .widget{
padding: 10px;
margin: 1em 0 1em;
border: dotted 1px #d0c9a2;
background: transparent url(http://www.blogblog.com/1kt/watermark/post_background_birds.png) repeat scroll top left;
_background-image: none;
}
Photographer
Спасибо большое,все получилось.
NMitra
Отлично!
Вика
Спасибо огромное! Написано доступно, и понятно. Я попробовала, все получилось. Ура!!!
NMitra
Меня всегда радуют слова про доступность изложения)))
Vesnyana
Вот спасибки огроменные! Весь интернет перерыла, когда искала, а не нашла. Вот случайно наткнулась - РАДОСТИ!!!! Спасибо! :)
NMitra
Рада слышать))
совесть
Наташа, здравствуйте.
Подскажите, а можно сделать один гаджет из боковой панели, чтобы он не был в ширину общей боковой панели.
Я умудрился обесцветить фон. Теперь видно выпадающую панель, но она все равно прячется под невидимый слой гаджета панели и поэтому не функционирует.
http://myrussiammm.blogspot.com/
NMitra
Моя вина. Надо было больше внимания на этот вопрос уделить. Замени

ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

на

ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
z-index: 20;
}

И всё будет работать даже без изменений других гаджетов. И я бы цвет фона меню изменила на более подходящий по гамме.
совесть
Красота!
Заработало!
Наташенька, ты просто чудо.
Надумаешь вступать в систему, обращайся.

Нати, а какой цвет фона порекомендуешь?
NMitra
Ох, боюсь, что у меня с творчеством и фантазией большие проблемы...
совесть
Наташа посмотрите может найдете что нибудь для себя.
http://sergey-mavrodi.com/?p=5312
совесть
Наташа, тут у меня еще проблема.
Когда новые статьи выкладываю у них у всех буквы печатаются толстым шрифтом и именно "обычный" размер, хотя я его жирным не делал. Видимо где то я изменил в настройках, а где не могу разобраться.
NMitra
Спасибо, конечно. Но боюсь, что навыков у меня не хватит.
NMitra
В этом фрагменте "bold" говорит, что текст всего блога делаем жирным:

body {
font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #333333;
background: #c06a54 url(http://3.bp.blogspot.com/-CHJqW0asWHw/TZ3vkq3tfyI/AAAAAAAABJo/RHrgxzrcJE0/s0/%25D0%25BF%25D0%25B0%25D0%25BD%25D0%25BE%25D1%2580%25D0%25B0%25D0%25BC%25D0%25B0.jpeg) no-repeat scroll top center;
}
совесть
Благодарю, Наташенька.
Evgeniy
Я ничего не понял из того, что здесь написано)))
Подскажите как сделать фон прозрачным.
http://mir-hiphopa.blogspot.com/
NMitra
Фон всей страницы? Самый простой способ: "Дизайн"-"Дизайнер шаблонов"-"Дополнительно"-"Фоны"-"Основной фон"-"Прозрачная". См. скриншот

http://1.bp.blogspot.com/-kVurQV76kpA/TfuQpRsONZI/AAAAAAAAB_k/sB3fE81Ej04/s1600/cvet-fona.png
Twist of Mind
Извиниье, но я не понял как изменить фон боковой панели, то есть как найти ее в таблице стилей?
Hell
Меня интересовало чуть другое похоже как в этом блоге, но хочу сам
NMitra
Перед ]]></b:skin> добавить:

- для всех гаджетов боковой панели в отдельности

.sidebar .widget{}

для удобства понимания посмотрите вид в рамке по кнопке "Просмотр", не нажимая "Сохранить шаблон"

.sidebar .widget{
border: 1px solid #000;
}

Для всей боковой панели:

.fauxcolumn-left-outer{}

Для отдельного гаджета

#ID-гаджета {}

Они могут отсутствовать в таблице стилей конкретного шаблона, но классы (например, <div class='column-left-outer'>...</div>
) присваиваются всем элементам одинаково, поэтому это распространяется на все стандартные шаблоны.
Евгения
Спасибо. Жаль, что мой шаблон не позволяет в рамочку сделать гаджеты..
NMitra
Почему? Должно работать. Сделай, как написано в комментарии 24, отпишись, я посмотрю.
Якушевская Юлия Сергеевна
Подскажите пожалуйста, как можно оформить гаджеты "Текст" и "Список" в рамочку (1-й пример)? Чтобы к картинкам это не распространялось?
NMitra
#Text1, #LinkList1 {......здесь стиль......}
Анонимный
А как сделать рамку типа, как "цитата".
Тип рамка с подсветкой вокруг, прям в блоге.
Анонимный
Да, как сделать, вот такое?
http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html
тут в рамке Слово Оптимизация.
NMitra
Да, я поняла что вы имеете ввиду. В ближайшее время опубликую статью.
Анонимный
А когда ждать и где искать?
NMitra
Сегодня-завтра. Искать здесь - http://shpargalkablog.ru/2011/06/css-box-shadow.html
NMitra
Статья готова, немного подкорректировать осталось - http://shpargalkablog.ru/2011/09/cytata-html.html.
Хозяин Лягушатника
Добрый день! Скажите, а как просто вставить просто картинку фоном, в определенное место? В смысле какой код надо вставлять, чтобы при нажатии на картинку правой кнопкой не было "открыть изображение".
Спасибо.
NMitra
Доброго! Воспользуйтесь скриптом:

<img src="URL" oncontextmenu="return false" ondragstart="return false"/>
Хозяин Лягушатника
Ага спасибо! А еще можно сделать чтобы она не выделялась в тексте?
NMitra
На свой вкус - вариант 1 - http://shpargalkablog.ru/2011/04/css-nalozhenie.html.

Вариант 2 - http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html (теория)

<div style="background: transparent url(адрес_изо) no-repeat; ">
какой-
нибудь
текст</div>

Конкретный пример (второй) посмотрите здесь - http://shpargalkablog.ru/2011/09/cytata-html.html
Хозяин Лягушатника
Что-то пока не разобрался. Столько много всего в одном, а я просто хочу вставить картинку фоном без текста внутри.
NMitra
Что-то совсем туплю, вариантов реализации можно найти и правда немало. Это нужно для одной определённой картинки или для всех? Фон в сообщении или гаджетах? И что значит: "чтобы она не выделялась в тексте"? Возможно у вас есть пример для подражания?
Хозяин Лягушатника
Это я торможу, не могу правильно объяснить. =)
Я хочу вставить несколько картинок в разные места для дизайна блога (что-то можете у меня на блоге посмотреть), чтобы они были как фон, на примере картинок кавычек в вашей статье про цитаты, но текст внутрь не надо вставлять.

Я тут у вас еще не по теме спрошу.
Хочу вставить приветствие в блоге. Как лучше реализовать?
Опубликовать сообщение и дату поставить вперед, или добавить гаджет и там написать.
Спасибо.
Хозяин Лягушатника
И еще хотел у вас спросить, что сделать с комментариями, которых очень много на странице, как-то неудобно. Например у меня на странице Гостевая их уже за 50. Можно как-нибудь их скрывать? Или может что другое посоветуете. Как-то на блогспоте комментарии не очень продуманы.
NMitra
Существуют классы. Если заглянуть в шаблон их можно увидеть. Например, чтобы добавить картинку перед заголовком статьи посередине, нужно до ]]></b:skin> внести

.post{
background: url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s50/background.jpg) no-repeat 50% 0%; padding-top: 30px;
}

Откуда взято именно post? В шаблоне (CTRL+U на страницах блога, не в редакторе) есть строка

<div class='post hentry'>

Таким образом можно добавить картинки в необходимое место блога и они будут фоном путём прописывания классу (впереди точка, для id - #) определённых стилей. В данном случае background.

Посмотрите вдобавок и эту статью - http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
NMitra
Лучше гаджетом, иначе нужно закрывать от индексации внутреннюю страницу, которая будет постоянно наверху.
NMitra
Скрыть можно. В старом редакторе (не знаю каким пользуетесь): "Настройки"-"Комментарии"-"Размещение формы для ввода комментариев"-"Всплывающее окно".

Можно поднять форму "Отправить комментарии" до списка самих отзывов.

Можно сделать ссылку к окну комментариев. Нажал - перелетел к определенному месту. Наподобие кнопки "Наверх".

Можно сделать так - http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html#comment

Какой вариант больше нравится?
NMitra
Они везде такие. Я думаю, что пользователь уж привык к данному оформлению. В новых шаблонах будет кнопка показать/скрыть.
Angelina
Наталья, добрый день. Подскажите, пожалуйста, нашла у себя
.main-inner .sidebar .widget h2 {
border-bottom: 1px solid $(widget.title.border.bevel.color);
совсем не могу сообразить, что мне нужно сделать, чтобы фон где у меня располагаются все гаджеты сделать, например, fff2a5 (цвет взят из фотошоп). Или может проще картинку вставить?
NMitra
Добрый день, Ангелина.

Попробуйте

.sidebar .widget {
background: #fff2a5 url(адрес_изо) no-repeat;
}

Про фон посмотрите ещё эту статью - http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html
Angelina
Наталья, добрый день! Может я не правильно объяснила. Но дело в том, что у меня гаджеты находятся не в боковой панели, а в низу страницы. http://angel-mans.blogspot.com/ И мне хотелось бы их выделить ярким цветом. Например, вот так http://www.gorchichko.com/p/ssylki.html. Сейчас все значения background выставлены у меня прозрачными. И вставлено фоновое изображение. Подскажите, пожалуйста.
NMitra
Понятно. Для каждого отдельного гаджета

.footer-outer .widget {
background: #fff2a5 url(адрес) no-repeat;
}

Для всего футера

.footer-inner {
background: #fff2a5 url(адрес) no-repeat;
}
Angelina
Наталья, все получилось. Вот, что значит правильно вам объяснить ))). Большое спасибо. Подскажите, пожалуйста, а закладки (главная страница..., те что сверху после заголовка) их как таким же цветом выделить.
Наталья, еще один вопрос. Может у вас есть статья, о том как выделить все картинки в блоге тенью. И еще может их можно обводкой (рамочкой) обрамлять автоматически. Заранее, спасибо.
NMitra
Попробуйте так

.tabs-inner .widget li a {background: #fff2a5;}

или так

.tabs-inner {background: #fff2a5;}

Из стандартного

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;
background: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Посмотрите, возможно какой-то класс удалите, например, ".post-body .tr-caption-container".
Angelina
Спасибо большое.
casualgreen
здравствуйте))
а как сделать фон, например для боковой панели полу-прозрачным? что-то не получается...
с этим кодом

.sidebar .widget{
background:#1d160d; opacity:0.5
}

эффект проявляется, но также прозрачными становятся картинки и текст на виджетах((
NMitra
По видимому вы решили вопрос.

.sidebar .widget{
background:rgba( 29, 22, 13, 0.6);
}

Теория тут - http://shpargalkablog.ru/2011/04/css-nalozhenie.html
Plotegor
Наталья, подскажите как вы сделали чтобы рамка была только вокруг статей, а вокруг списка ссылок и названия сайта оставалось пустое место, чтобы можно было в него поместить рекламный блок.
NMitra
Вы про горизонтальное меню? Я его вписала прямо в шаблон без применения гаджетов.
Plotegor
Нет, я не ето имел ввиду.Вы уж меня простите если ети вопросы столь глупые, просто я еще не во всем разобрался.
Просто на моем блоге все что на нем есть расположено под одной рамкой, а у вас название сайта не имеет рамки вокруг, выпадающее меню-тоже отдельно, блоки справа-в отдельных рамках. Стандартно ето все расположено под одной общей большой рамкой. Подскажите, как ето можно изменить.
И еще такой вопрос: как вы создали ети отдельные блоки "для Blogger";"оптимизация"?
Заранее благодарен.
NMitra
В "Дизайнере шаблонов" подберите необходимый вариант. Например, Корпорация "Чудеса", "Водяной знак". Вкладка "Шаблон".

Второй вопрос: http://shpargalkablog.ru/2011/06/poslednie-soobshcheniya-blogger.html
Анатолий
Подскажите, пожалуйста. В браузере Opera панель с вкладками имеет отступ справа. В то же время в других браузерах этого отступа нет, то есть, его и не должно быть. Как сделать, чтобы и опере этот казус не проявлялся? Посмотрите, пожалуйста: http://tol64.blogspot.com/
NMitra
Я не увидела какой-либо существенной разницы, уродующей блог.
Анатолий
Даже не ожидал, что так быстро будет ответ. )) NMitra, посмотрите, пожалуйста, в броузере Opera. Панель Страницы справа не доходит до конца. Это можно определить по границе рисунка в шапке. Во всех остальных броузерах отображается всё правильно. Спасибо за оперативность!
NMitra
Не вижу проблемы:

http://3.bp.blogspot.com/-7of2mo4aKio/T8JskNfCc8I/AAAAAAAAC7k/sotIiu04sB8/s1600/ScreenHunter_01%2BMay.%2B27%2B22.03.bmp
Анатолий
А у меня почему-то вот так: http://fotki.yandex.ru/users/hello-tol/view/520480/?page=0

Не знаете, что можно с этим сделать? Я удивлён, что оказывается у разных пользователей это может отображаться по разному, даже если броузер тот же.
Анатолий
Блин, кажется не ту ссылку дал. )) Вот эту посмотрите, а постом выше удалите. )) http://img-fotki.yandex.ru/get/6212/89740785.0/0_7f120_9d9b1eeb_M.jpg
NMitra
Я в затруднении. Возможно вы не обновили до последней версии. Попробуйте узнать сначала, как у других пользователей Оперы выглядит этот участок.
Анатолий
Наталья. С Вами в любом случае приятно общаться независимо от того получен ответ с помощью или нет. Спасибо за всё, что Вы делаете. )))

В моём случае оказался совсем пустяк. В Opera при нажатии Ctrl+F11 включается/отключается ширина страницы по размеру экрана. Нажал эту комбинацию и всё выравнялось. Наверное нужно сделать поменьше ширину шаблона блога. Но это уже просто. :) Спасибо ещё раз, Вы очень доступно преподносите информацию. Я к Вам ещё зайду много раз.
NMitra
Благодарю на добром слове. Двери всегда открыты)
Rymljanyn
Наташа здравствуйте. Или умаялся (4 час ночи пошел) или просто тупой. Размеры подогна, цвета поставил, контуры блоков никак. Может подскажете. Вот ресурс http://d-nk.com.ua

А вот кусок ЦСС (я так понимаю в нем надо что то подшаманить или дописать)
/*** table styling calendar widget overrides some styling) ***/
table {
border-width: 1px;
border-spacing: 0;
border-color: #180509;
font-style: normal;
font-weight: normal;
font-size: small;
width: 90%
}
table th {
border-width: 1px;
padding: 3px;
border-style: solid;
color: #fffff4;
background: #180509;
}
table td {
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #180509;
}
ins {
background: #ffc;
border: none;
color: #333;
text-decoration: none;
}
Заранее спасибо
NMitra
Здравствуйте, мне ваша мысль не ясна, растолкуйте подробнее, желательно на скриншотах :)

.widget-container widget_text {}
Эльдар М Курукчи
А как настраивать левую боковую панель?
NMitra
Что вы имеете ввиду? Если стили CSS, то:

#sidebar-left-1 {}
Madina
Здравствуйте,Наталья!)
Подскажите пожалуйста как можно увеличить фото профиля на боковой панели и сделать небольшое описание о себе. Так,чтобы не было надписи "просмотреть профиль" и перехода.
Вы так доступно объясняете,надеюсь, и Вам понятно о чем я :)
Анонимный
Cпасибо!, мне очень пригодилось. Объясняете очень понятно и пожалуй это лучший русскоязычный блог по blogger и blogspot, на мой взгляд.
NMitra
Благодарю, очень приятно!
Анонимный
Здравствуйте!
Надеюсь на вашу помощь. Поставила картинку в качестве фона для виджета, и, чтобы она отображалась полностью (не обрезались края), добавила в код значение padding. Получилось добиться нормального вида. Но дело в том, что вместе с фоновой картинкой двигается и содержание виджета, оно как бы съезжает. Никак не могу понять, в чем моя ошибка.. Кстати, та же ерунда и с фоном для даты. Не получается двигать фон и саму дату отдельно друг от друга.

#PopularPosts1 {
background: url(http://s016.radikal.ru/i334/1409/ea/2c72ddc1b9c0.png) no-repeat ;
padding:120px 90px;
position: relative;
}
Анонимный
На счет комментария выше. Разобралась во всем самостоятельно. :)
NMitra
Молодец! Предыдущую неделю не было возможности входа в сеть.