Как сделать заголовок вкладки и нижний колонтитул на всю ширину BLOGGER

Всем доброго времени суток. Сделаем заголовок блога, навигацию и нижний колонтитул на всю ширину блога. Так что сегодняшний пост в продолжении темы которую подняла здесь. Убирали отступы и поля, правили шаблон на свой вкус. Оказалось, что некоторые изменения ещё не затронуты.

Ничего, шаблон Блоггер по умолчанию настолько пластичен, что достаточно просто вносить изменения в него.

Изменения нужно будет делать во вкладке тема. Но пусть вас это не пугает. Все действия будем производить в коде CSS. Это не так уж и сложно. Просто сделайте заранее резервную копию шаблона или потренируйтесь на тестовом блоге если что пойдёт не так. Вот так обычно выглядит шапка. Красными линиями отмечено пустое пространство.

Чтобы его убрать найдите в шаблоне вот такой фрагмент кода. Раскройте все коды  CSS в шаблоне (читаем здесь).

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

и замените отмеченное красным на

padding: 0px;

Дальше нам нужен вот этот участок. Ищите его где - то рядом с предыдущим.

.content-inner {
padding: $ (content.padding) $ (content.padding.horizontal); 
}

и так же замените на

padding: 0px;

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

Можно уже так и оставить, а можно ещё немного поиграться. Центральная колонка у меня имеет белый цвет и 2 боковые отдельный. У кого - то установлена в качестве заднего фона картинка. Рассмотрим на примере фонового изображения для наглядности.

Найдите там же

$ (content.background.color.selector) {
background-color: $ (content.background.color); 
}

и замените строку красного цвета на

background-color: $ (body.background);

Сейчас перед знакомой уже ]]></b:skin> вставьте этот код

.main-outer {  background: $ (content.background.color);  }

Сохраните шаблон и посмотрите результат. Примерно такого вида общий вид вашего блога. 

Мы сделали и шапку по всей ширине элемента и одинаковый фон всего содержимого.

Остаются по бокам центральной части еле заметные разделители. Я пробовала разные темы с картинками и на некоторых, скажу я вам, такой вариант очень интересно смотрится. Если он не нужен, тогда просто уберите эти разделите.  Удалите в шаблоне участок кода

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

На этом тоже можно остановиться. Но если уж очень руки чешутся или хочется поэкспериментировать, можно сделать весь шаблон на всю ширину. Чтобы всё содержимое отображалось одинаково на мониторах с разным разрешением экрана.

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

Обычно все элементы, занимают третью часть страницы. По бокам остаются отступы и поля. Ну вот хочется некоторым блогерам и это исправить. Что же, личное дело каждого. Кому - то нравиться узкая полоска блога, кому широкая. У меня уже была статья, как сделать шаблон блога на всю ширину экрана.

А теперь предлагаю вам перейти по этой ссылке и посмотреть как примерно это будет выглядеть. Всё зависит от выбранного вами шаблона.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email