26 декабря 2009 г.

Добавляем третью колонку в стандартный шаблон Blogger (часть 2)

Часть 2. Как добавить колонку в «резиновый» шаблон

В арсенале встроенных шаблонов у Blogger есть несколько «резиновых» шаблонов. Сегодня мы рассмотрим, как можно добавить третью колонку в «резиновый» шаблон на примере шаблона Minima Stretch. Вообще говоря, «резиновый» макет мало чем отличается от фиксированного макета. Разница лишь в том, что в фиксированном макете размеры блоков указываются в абсолютных единицах, а в резиновом - в относительных единицах (в процентах). Поэтому принципы внесения изменений в шаблон те же самые, а работы здесь даже меньше, чем с фиксированным шаблоном.

Найдите в коде шаблона описание стиля элемента main-wrapper (контейнер для сообщений блога) и установите значение его атрибута width (ширина) 52%:

#main-wrapper {
  margin-$startSide: 2%;
  width: 52%;
  float: $startSide;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  }

Для элемента sidebar-wrapper (контейнер боковой колонки) установите значение атрибута width 20%. Рядом добавьте описание стиля третьей колонки sidebar2-wrapper. Это будет выглядеть вот так:

#sidebar-wrapper {
  margin-$endSide: 2%;
  width: 20%;
  float: $endSide;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebar2-wrapper {
  margin-$startSide: 2%;
  width: 20%;
  float: $startSide;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Теперь осталось добавить код дополнительной колонки с секцией в тело шаблона. Когда я говорю «тело шаблона», я имею в виду код, заключенный в тегах <body></body>. Итак, найдите в теле шаблона код блока main-wrapper с вложенной в него секцией и единственным виджетом «Сообщения блога». При этом будет лучше, если флажок «Расширить шаблоны виджета» в панели администратора останется выключенным - ориентироваться в коде будет значительно проще.

Если Вы хотите, чтобы колонки в шаблоне расположились по схеме «боковая колонка - сообщения блога - боковая колонка», тогда дополнительную колонку нужно добавить перед main-wrapper:

<div id='sidebar2-wrapper'>
    <b:section class='sidebar' id='sidebar2' preferred='yes' />
</div>

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
</div>

Если же Вам больше по вкусу схема «сообщения блога - боковая колонка - боковая колонка», тогда дополнительную колонку нужно добавить, соответственно, после main-wrapper:

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
</div>

<div id='sidebar2-wrapper'>
    <b:section class='sidebar' id='sidebar2' preferred='yes' />
</div>

Вот, собственно, и все. Трехколоночный шаблон Minima Stretch готов.

Я надеюсь, что после эти двух уроков Вам не составит труда сделать подобные изменения в любом из встроенных шаблонов Blogger. А для тех, кто предпочитает использовать готовые шаблоны, в следующих постах будут опубликованы готовые к использованию трехколоночные варианты шаблонов Minima, Minima Stretch, Denim и Denim Stretch.

P. S. Здесь могла бы быть ссылка на Ваш сайт.

Комментировать в ВКонтакте

Комментировать в Facebook

Комментировать в Blogger

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

  1. Вопрос не в тему статьи. Как вы добавили "Одну кнопку закладок" в конец каждой статьи, у меня нестандартный шаблон - кнопка не появляется. Не смотрия на то, что вставлял код по инструкции - нулевой результат.

    ОтветитьУдалить
  2. Может инструкция была неправильная? Давайте сделаем так: ответ на этот вопрос я дам в одном из следующих постов.

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