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

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


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


Сразу обращу ваше внимание, что говорить будем о стандартных шаблонах 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


23 комментария:

  1. Недавно один знакомый "крутой" вебмастер на мой вопрос почему его сайты такие узенькие и размещается точнёхонько в середине монитора, а по бокам сантиметров по 10 синего фона, "авторитетно" сказал мне, что только такие сайты считаются самыми лучшими :) А ты тут людей учишь шаблоны растягивать :)

    ОтветитьУдалить
    Ответы
    1. Олли, привет. Мне кажется тут дело вкуса. Тут уж кто что предпочитает.

      Удалить
  2. Если обратить внимание, то многие крутые сайты именно такие, например youtube. У меня именно такой вытянутый монитор и многие блогеровские сайты выглядят у меня не очень красиво, т.к. стандартного фона не хватает и по бокам дополнительные полоски, поэтому я советую всем выбирать бесшовные фоны. Не знаю на сколько это решение подходит для блогов. Я боюсь, что если расширю себе поле для творчества, то потом на квадратных мониторах у читателях может не хватить места, будет выглядеть не корректно. А еще люблю менять фоны. Только чего-то у меня сегодня функция настроить шаблон во всех блогах зависает.

    ОтветитьУдалить
    Ответы
    1. Олеся, бесшовные фоны и резиновый шаблон это разные вещи.

      Удалить
    2. Я понимаю, предлагаю как альтернативу.

      Удалить
  3. Вика, у меня действительно широкий монитор, что мне сделать, чтобы сообщения смотрелись хорошо на любых мониторах? Как в этом сообщении или еще как?
    И как установить форму обратной связи?
    Честно - ничего в этом не понимаю, все методом научного тыка...

    ОтветитьУдалить
    Ответы
    1. Мария я Вам отписалась у вас в блоге. Хотя бы пока так сделайте. А форма связи родная от блоггер так. Админпанель-вкладка дизайн-добавить гаджет. Слева-другие гаджеты и выбираем форма связи.

      Удалить
    2. Вика, спасибо большое!

      Удалить
    3. не за что. Удачи Вам.

      Удалить
  4. Как я понимаю, что описанное Вами не подстраивает страничку под монитор, т.е. у кого то блог влезет в монитор целиком, а у кого то, только часть странички.

    ОтветитьУдалить
  5. Нет, Иван. На то он и резиновый. На всех мониторах влезет.

    ОтветитьУдалить
    Ответы
    1. Виктория, на этом блоге у вас так же сделано? Просто позже хочу зайти с другого компьютера и убедиться, что страничка помещается в экран.

      Удалить
    2. Нет, Иван. У меня сторонний шаблон и пока ни как руки не дойдут полностью разобраться. Тут ведь дело не о том входит ли страница. А о том чтобы убрать эти пустые полосы по бокам блога.

      Удалить
    3. Ну а если я хочу что бы отступы у меня были и вся страничка в ширину влезала, то какие мне цифры надо ставить в вашем коде?

      Удалить
  6. Не надо ничего вставлять. И так вся страничка влезет.

    ОтветитьУдалить
    Ответы
    1. Так отступов то не будет.

      Удалить
    2. Иван, я что-то не пойму про какие отступы ты говоришь. В шаблонах по бокам 2 полоски фона. Мы подобным образом увеличиваем поле для контента.
      вместо постоянных пикселей, мы используем относительные - проценты. В этом случае браузер сам рассчитывает ширину окна, принимая ее равной 100%, 100% на большом или 100% на маленьком.

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

      Удалить
    4. Теперь понятно. В этом случае нужно использовать только первый код. где указано процентное отношение. И отступы есть и страница подстроится под любой экран.

      Удалить
    5. А ширину боковых отступов ни как не отрегулировать? Чтоб было так же как на самом первом скриншоте.

      Удалить
  7. Тут можно уменьшить проценты в коде.

    ОтветитьУдалить
  8. Здравствуйте Виктория. Я на вашем блоге недавно, но при помощи некоторых фишек уже преобразил большую часть своих лендингов в лучшую сторону. Спасибо вам за это! Я в основном специализируюсь на рекламных материалах и лендинг страничках, и вот ранее читал других авторов и не находил именно тех вещей которые реально пригодились именно мне.) Притом посмотрев ваш блог выражаю огромное уважение за проделанную работу, информации очень много и самое главное полезной. Успехов Вам!

    ОтветитьУдалить
  9. Jeddak, Спасибо вам за комментарий и очень приятно слышать, что могу чем-то помочь. Удачи и Вам во всём. Заглядывайте.

    ОтветитьУдалить

Пользовательский поиск