Слоеный заголовок Blogger

Продолжаю серию постов о тюнинге заголовка Blogger. В этот раз картинка – фоновое изображение под Названием и Описанием блога.

Напомню, что в Blogger существуют три варианта виджета Заголовок. Этот – второй и в терминах «Блоггера» обозначен как

Изображение после названия и описания

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

Для своих бесчеловечных экспериментов я снова выбрал стандартный шаблон Minima.

Этап первый: Загрузка и настройка изображения

1. В первую очередь подготовь фоновое изображение заданной ширины. Для шаблона Minima по-умолчанию это 660 пикселей.


2. Загрузи изображение и настрой размещение с помощью стандартной формы виджета «заголовок»

Настройка виджета «заголовок»

Получится примерно такой вид:

Этап 1: Загрузка и настройка виджета «заголовок»

Тут же всплыли недостатки вычислимого выражения в виджете, о которых предупреждал разработчик:

1. Вместо самолета получился паровоз;
2. ненужный отступ сверху, над изображением;
3. изображение «вылазит» за пределы рамки.

Совет «после сборки обработать напильником» по-прежнему работает. Поэтому, напильник в руки и вперед!

Этап второй: Тюнинг виджета

Перво-наперво на странице настроек шаблона (Дизайн – Изменить HTML) отметь Расширить шаблоны виджета.

Две вещи, которые должны будут подвергнуться тюнингу – это стили CSS шаблона и, собственно, сам код виджета. Точнее – тот его фрагмент, который отвечает за отображение «Изображение после названия и описания».

Полный код виджета заголовка (с комментариями) можно посмотреть здесь.

Листинг 1: Фрагмент виджета «Заголовок»

    <b:else/>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;
+ &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot;
+ data:widthStyleStr
+ &quot;min-height: &quot; + data:height + &quot;px;&quot;
+ &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>

Листинг 2: Фрагмент стилей CSS шаблона

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Теперь нужно избавиться от комментариев и вычислимого выражения в коде виджета, а результат вычислимого выражения перенести в стили. Как это сделать показано в листинге 3.

Чтобы узнать адрес фонового изображения, просмотри исходный код страницы и найди в нем элемент div с id="header-inner".

# Листинг 3: Измененный фрагмент виджета «Заголовок»

    <b:else/>
      <div id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>

Результат вычисленного выражения style, подсмотренный в исходном коде страницы, нужно перенести в стили шаблона, предварительно выкинув из него вычисленное значение width (чтобы избавиться от «вылезания» изображения за пределы рамки).

Листинг 4: Измененный фрагмент стилей CSS шаблона

#header-inner {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXZB8wP6Yb8ap5nAtJPwHLNqNX3imohvUp9e3xY76MwJUfjX9yIqq-sKQq4ybE1faTdm-s2Dzy0KOYppcjlwDzSvFNUCVWZKdeb2I7C7ZhRGpyAiMvh8vmLZ8G2eNSYq9y4XFK4prODOnE/s1600-r/polet-ekzuperi-banner-660px.jpg);
  min-height: 153px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid $bordercolor;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  text-align: center;
  color:$pagetitlecolor;
}

Замечание: правило для бордюра («рамки») я перенес из свойств стилей элемента #header в элемент #header-inner. Это сделано для того, чтобы избавиться от отступа сверху.

Не забудь сохранить шаблон.

Итогом всех этих манипуляций должно стать следующее:

Этап 2: «Обработка напильником» виджета «заголовок»

Успехов!

Бонус для RSS-подписчиков: Анекдот про напильник.

Украли американцы у русских чертежи истребителя. Собрали — паровоз. Разобрали, собрали — паровоз! Что делать, выкрали русского специалиста. Спец берёт чертёж, смотрит, смотрит и говорит: «Там же внизу маленьким шрифтом: после сборки обработать напильником».

Статьи «в тему»

• SEO-friendly заголовок блога
• Виджет заголовка Blogger
• Ширина шаблона Blogger

© 2010 dotrb.blogspot.com