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

Blogger блог на ширину всю монитораВопрос с которым сталкиваются многие, кто впервые решил сделать дизайн Blogger блога самостоятельно, это как растянуть шаблон на всю ширину экрана - сделать его, как бы резиновым, чтобы на всех мониторах с разными расширениями блог был на весь экран и смотрелся одинаково. Делается это очень просто - необходимо изменить, а если быть совсем точным, добавить три значения свойств в код шаблона. И дело сделано. Но чтобы заполнить кое-какие пробелы разберем немного подробнее.
Применять этот трюк лучше всего в самом начале работы над дизайном блога, чтобы уже на основе такого шаблона подогнать все остальные блоки и элементы.
 Итак проясним ситуацию основательно. У нас обычный (стандартный) шаблон, и на широких мониторах смотрится он примерно вот так:
Шаблон Blogger с фиксированной шириной

 А мы хотим сделать чтобы он смотрелся вот так - одинаково на всех мониторах:
Шаблон 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, а возможно и других, указывая величину ширины этих блоков также в процентном выражении.
По-этому делая шаблон "резиновым" не забывайте о всех блоках.
Маленький бонус. Кому понравилась гимнастка с заглавной картинки могут скачать оригинальную, полноразмерную обоину - 1680х1050 - не отходя от кассы, по прямой ссылке.
Гимнастка.JPG
©http://magentawave.com

21 комментарий:

  1. Как сделать тоже самое для нестандартного шаблона? Т.к. этот способ у меня не работает http://diva106.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Для нестандартного шаблона нужно сначала определить идентификаторы основных блоков. Но я немного подглянул и могу сказать что чтобы растянуть ваш шаблон нужно добавить такой стиль
      #main-wrapper {
      min-width: 100%;
      max-width: 100%;
      width: 100%;
      }
      Однако, в любом случае придется дополнительно отлаживать все блоки по ширине, узнавая их ID и добавляя значения ширины и положения.

      Удалить
  2. Семион20.10.12, 8:38

    Отлично, то что нужно! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста рад что помог :)

      Удалить
  3. Спасибо,у меня всё получилось с первого раза...и,помог мне в этом жук-носорог :)))...шутка,конечно,но так устроен этот Мир!
    Буду рада вашим новым визитам ко мне,в Прованс.

    ОтветитьУдалить
    Ответы
    1. Приятно слышать, обязательно буду к вам заглядывать=) Кстати, не забудьте подправить размеры остальных блоков - левой, центральной и правой колонок.

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

      Удалить
    3. Спасибо, но я также постигал все экспериментальным путем, потихоньку изучая CSS делал дизайн этого блога, это кстати, уже версия 2 измененного дизайна :) Надеюсь что на нем и остановлюсь :) До знающего мне еще далеко, но все равно приятно что оценили.
      Про комментарии есть тоже статейка Изменение формы комментариев в Blogger. Там правда немного другой вариант, (этот я делал уже как авторский), но суть будет ясна и вы уже сделаете на свой вкус.

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

    ОтветитьУдалить
    Ответы
    1. Да, такое возможно, так как при уменьшении разрешения монитора их размер будет оставаться неизменным, по-этому для колонок (основных их блоков) лучше также подобрать размеры в % и сделать это сразу.

      Удалить
    2. Спасибо, понравилось. Просто и проблема скроллинга исчезла

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

    Немного не поняла по этому моменту:
    "подогнать ширину других блоков блога, ..., указывая величину ширины этих блоков также в процентном выражении."
    Тоже ставить 100%?

    ОтветитьУдалить
    Ответы
    1. Это относится к тому, что когда вы делаете шаблон на весь экран (это и есть 100%) а ширина колонок прописана в пикселах, то колонки остаются одинакового размера, т.е. не "тянутся", если же указать в "%", то они также будут менять размер относительно ширины экрана, но это уже адаптивная верстка и тут не все так просто.

      Проценты - это относительная величина и она считается от размеров окна браузера, т.е. 100% - всё окно, если ширина блога указана как 100%, то внутренние его блоки не могут быть тоже 100%, они уже будут частью от этих 100. (30%, 40% и т.п.)

      Удалить
  6. Спасибо за разъяснения, теоретически всё понятно. Стоит ли внедрять на практике - сомневаюсь, боюсь сделать хуже.

    ОтветитьУдалить
  7. Радоваться рано:ни одной рекомендованной Вами записи в коде нет!

    ОтветитьУдалить
    Ответы
    1. Все указанные селекторы у вас в шаблоне есть и вы вполне успешно можете применить к ним рекомендации из статьи. В виду того что вы уже настраивали свой шаблон через "Дизайнер шаблонов" свойства и значения для этих селекторов могут быть иными. В вашем случаи они выглядят так:
      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 1100px;
      max-width: 1100px;
      _width: 1100px;
      }

      Удалить
  8. Здравствуйте!
    Спасибо за урок и ваш труд!
    Все получилось, но теперь у меня такая же проблема с шапкой, на одном екране она нужных размеров, но на другом слишком велика или слишком мала. Можно проделать что-то похожее и для шапки, или как по-другому выйти из ситуации?

    ОтветитьУдалить
    Ответы
    1. Про то, как изменить шапку блога есть отдельная статья, вот ссылка
      http://www.magentawave.com/2012/03/change-header-on-blogger.html
      там вам просто нужно указать необходимые свойства и значения к ним для нужных селекторов.

      Удалить
  9. Картинка в самом начале, меня как самца привлекает больше чем сто процентное отображение и всё дело в шрифтах, которые увы но никак резиновыми не становятся, мне не совсем ясен ход мысли програмёров которые сие всё и устроили но эта именно та капля дёгтя в нашей бочке...
    со шрифтами в принципе можно по играться в css типа

    @media screen and (min-width: 800px)
    {.fnt a, f {font-size: 1.063em;}}

    @media screen and (min-width: 700px) and (max-width: 799px)
    {.fnt a, f {font-size: 1.000em;}}

    Ну и т.д а размеры всё же лучше ограничить и пользоваться предпочтительней em или % но не px

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

Следующее Предыдущее

BestProject