
В этой статье был рассмотрен вариант, как выровнять заголовок в шапке блога по центру. Но когда хочется вставить свою фоновую картинку, то вся красота нарушается. И давайте смотреть, как это можно исправить. Использую стили CSS можно легко центрировать картинку и описание, даже если у вас пока нет опыта. И всё же на всякий случай сделайте резервное копирование шаблона или потренируйтесь на тестовом блоге.
Вариант, кода вставили картинку с описанием и название блога в разделе дизайн.
Заходим во вкладку шаблон изменить HTML. Находим строку ]]></b:skin> и над ней устанавливаем следующий код.
#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
Результат. Картинка, заголовок и описание получились строго по центру.

Если вы хотите чтобы изображение было во всю ширину шапки, тогда вместо этого, вставьте следующий код. Возможно, в этом случае придётся подкорректировать размеры изображения, чтобы смотрелось аккуратно.
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
Чтобы описание блога было слева, то пишем это-
#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
Справа-
#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
При изменениях нажимайте кнопку просмотр, чтобы видеть результат. И если всё нравится - сохранить.
Используя стили можно сделать картинку слева или справа на фоне.

#header-inner h1 {
overflow: hidden;
line-height: 150px; /* блок с текстом по вертикали */
text-align: center; /* текст по центру по горизонтали */
position: relative;
}
#header-inner h1:before {
content: url(адрес картинки);
}
overflow: hidden;
line-height: 150px; /* блок с текстом по вертикали */
text-align: center; /* текст по центру по горизонтали */
position: relative;
}
#header-inner h1:before {
content: url(адрес картинки);
}
Многие делают шапку для блога в различных редакторах и потом уже сохраняют как картинку в разделе дизайн. Часто появляется вопрос, как узнать ширину и высоту шапки блога.
Подведите курсор на шапку блога и щёлкните правой кнопкой мыши. Выберете опцию ПРОСМОТРЕТЬ КОД. Откроется окно, где в левой части можно увидеть этот размер.

Некоторые начинающие блогеры, когда загружают готовую картинку в разделе дизайн - гаджет HEDER, делают ошибку. Не прописывают название и описание блога. Потому что они не красиво накладываются на изображение. Это не очень хорошо для оптимизации, так как получается, что не название title не описание блога description поисковик не видит. В этом случае оптимальным вариантом будет опять использовать CSS.
Задать прозрачность тексту и указать размер 0.
.Header h1 {
font: normal normal 0 sans-serif;
color: transparent;
}
font: normal normal 0 sans-serif;
color: transparent;
}
Если вы уже более или менее разбираетесь в стилях в шаблоне блога , то всё что необходимо можно устанавливать именно там. Стили CSS шапки обычно под этой строкой в шаблоне.
/* Header
----------------------------------------------- */
Коль пошла такая тема, позволю себе немного разобрать, что к чему, чтобы понятнее было.
В стандартном шаблоне, шапка блога - это специальный виджет .Header., где по умолчанию имеются вот такие вот контейнеры -
- .header-outer - общий, внешний контейнер;
- .header-inner - внутренний контейнер;
- .titlewrapper - блок названия;
- .Header h1 - название блога;
- .descriptionwrapper - контейнер блока описания;
- .Header .description - блок описания;
Обычно в них и добавляются стили CSS.
Используя свойства CSS вы можете кардинально менять внешний вид всего блога.
А у меня сегодня всё. Спасибо всем. Увидимся.
👇
здесь можно оформить подписку на новые шпаргалки
Виктория, замечательный пост! Интересно! У меня описания блогов не по центру, но пусть так останется. Больше не буду в шапках ничего переделывать.
ОтветитьУдалитьСпасибо, Ирина. В последнее время уже неоднократно задавали этот вопрос. решила вот в отдельном сообщении всё это изложить.
УдалитьСпасибо, Вика. Внесла поправку, благодаря твоей полезной подсказке.
ОтветитьУдалитьДевчата, спасибо вам за комментарии. Приятно слышать, что пригодилась информация.
ОтветитьУдалитьВ свое время намучилась я с выравниванием фото с шапке. Ничего не получалось, съезжало в сторону. Пришлось само изображение шаманить.
ОтветитьУдалитьНужная шпаргалка.. думаю, многим пригодится.
Наташа, все наверное с этой проблемой сталкивались. Да ещё когда по началу и с фоторедакорами не дружишь. Хотелось бы верить что информация пригодится.
УдалитьСпасибо большое!очень помогли!
ОтветитьУдалитьОльга, так приятно слышать, когда читателям статья оказывается полезной.
УдалитьЗдравствуйте!
ОтветитьУдалитьСегодня первый раз за всё время почему-то съехала шапка... Никогда раньше проблем не было. Статья спасла! Спасибо Вам за ценную информацию. Сам бы тоже выровнял, но пришлось бы помучаться. А Вы прямо спасли!
Благодарю!
Вадим, бывает такое, что начинаешь в шаблоне копать так напортачишь. Ладно, когда помнишь всё. Хорошо что всё получилось и статья подвернулась к стати.
УдалитьСупер, огромное спасибо))
ОтветитьУдалитьАнна, спасибо и Вам, за эмоции и внимание.
ОтветитьУдалить