Как сделать заголовок вкладки и нижний колонтитул на всю ширину 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


6 комментариев:

  1. Виктория, всегда интересно читать твои посты! Спасибо! Сегодня опять перестали открываться мои блоги. Я зашла на форум, ссылку на который ты мне давала. Написала, опубликовала. Нашла ответ на мой вопрос. Мне уже тоже прислали ответ. И убрала несколько гаджетов. Жалко, но убрала. Блоги еще жальче. Теперь все у меня в порядке. Я очень рада! Спасибо тебе! Я и не знала, что есть такой замечательный форум.

    ОтветитьУдалить
  2. Ирина, про форум это замечательно. Сколько веду блоги тоже всем твержу- куда всё подряд лепить. Нет, никто не слышит. У меня и статья была по этому поводу. Пока гром не грянет.
    http://www.shpargalochki.ru/2014/05/gorkij-opyt-tozhe-opyt.html

    ОтветитьУдалить
  3. Классно. Вик, а у Вас есть урок и рекомендации по теме вставки на блог политики конфиденциальности и пользовательского соглашения? Нужно ли это? У Вас на блоге, заметил, все это установлено.

    ОтветитьУдалить
    Ответы
    1. Семён, не думаю что в блоггер нужно это ставить. Ведь мы же не собираеи подписную базу. Всё идёт через фидбурнер у них должна быть политика. И у блоггер. Но у меня настолько перекроен шаблон, что пойди знай. постраховалась. можно зделать здесь, не думаю что лишним будет https://xn--152-1dd8d.xn--p1ai/?utm_source=widget&utm_medium=cpc&utm_campaign=copyright&utm_content=free

      Удалить
  4. Виктория, я уже 2 дня не могу написать тебе комментарий на блоге "Дела домашние" в посте про ядовитые комнатные растения. Комментарий не пишется, что-то там внизу, где комментарии не может загрузится, кнопочка крутится, хотя блог быстро загружается. Не знаю, что такое. Пробовала я и на работе вчера и сегодня, и сейчас дома. Блог легко открывается, а комментарии написать нельзя.

    ОтветитьУдалить
  5. Вика, спасибо тебе за ответ.

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

Пользовательский поиск
Foto Saya
My Photo