Шаблон блога на всю ширину экрана

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

Подгоним шаблон блога на всю ширину экрана, растянем его, сделаем резиновым (так это называется), чтобы на мониторах с разным разрешением экрана он смотрелся более презентабельно.

Сразу обращу ваше внимание, что говорить будем о стандартных шаблонах Blogspot.
И попрошу оставить все свои страхи про шаблон. А просто сделайте резервное копирование или создайте блог для своих экспериментов по подобию рабочего. Совершенно небольшие изменения будем вносить непосредственно в шаблоне.

Вот так обычно мы видим наше творение.

Чтобы это всё немного растянуть необходимо зайти во вкладку шаблон-изменить HTML и с помощью горячих клавиш CTRL+F (подробнее здесь) находим вот такую строку.

.content-outer, .content-fauxcolumn-outer, .region-inner {

Ниже мы видим свойства стилей, где не указаны никакие значения.

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

Сейчас только добавим в процентном отношении значения ширины 100% для каждого из них. Изменяем просто $(content.width);  чтобы это выглядело вот так.

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 100%;
        max-width: 100%;
        _width: 100%;
      }

Просмотрите шаблон и сохраните. И вот уже совсем другой вид.

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

Для этого нужно, опять же в шаблоне найти вот такой код.

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)
}

И удалить в нём строку, которую я выделила синим цветом.

Лучше бы, конечно, всё это сделать когда только начинаем создавать блог. В некоторых случаях возможно, придётся подгонять ширину боковых колонок и центральной части, указав их нужную ширину в процентах. Это, как вам будет угодно. В стандартных шаблонах Блоггер это строки такого вида.

 .main-inner .column-center-outer{-центральная колонка.
 .main-inner .column-left-outer {-левая колонка.
 .main-inner .column-right-outer {-правая колонка.
     
Вот, пожалуй, и всё по этой теме. Буду рада, если информация окажется для вас полезной. Спасибо, что заглядываете в мои шпаргалки. До новых встреч.

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

Введите Ваш email