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

Вопрос с которым сталкиваются многие, кто впервые решил сделать дизайн Blogger блога самостоятельно, это как растянуть шаблон на всю ширину экрана - сделать его, как бы резиновым, чтобы на всех мониторах с разными расширениями блог был на весь экран и смотрелся одинаково. Делается это очень просто - необходимо изменить, а если быть совсем точным, добавить три значения свойств в код шаблона. И дело сделано. Но чтобы заполнить кое-какие пробелы разберем немного подробнее.

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

 Итак проясним ситуацию основательно. У нас обычный (стандартный) шаблон, и на широких мониторах смотрится он примерно вот так:

 А мы хотим сделать чтобы он смотрелся вот так - одинаково на всех мониторах:

 Для этого, как всегда в подобных случаях, идем в админку (панель управления) своего Blogger блога, открываем "Шаблон" -> "Изменить 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);
      }

Наши действия просты как никогда: изменяем $(content.width) на 100%. Должно получится так

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

Теперь всё - сохраняем и радуемся.

При внесении данных изменений, возможно потребуется также подогнать ширину других блоков блога, таких как: левая колонка - column-left-outer, правая колонка - column-right-outer и центральная часть - column-center-outer, а возможно и других, указывая величину ширины этих блоков также в процентном выражении.
По-этому делая шаблон "резиновым" не забывайте о всех блоках.

©http://magentawave.com