Ширина шаблона Blogger

«Ну-ка, морда, шире тресни!»

Как увеличить ширину шаблона Blogger

Тяжело будет впихивать третью колонку в шаблон, предварительно не расширив страницу. Добавить блогу ширины можно с помощью несложного тюнинга стилей CSS шаблона.

Разные шаблоны спроектированы по-разному, и основные блоки в них могут называться и задаваться по-разному. Хорошее правило: увеличивать ширину тех блоков, где она задана с использованием свойства width.

Я объясню на примере стандартного шаблона Minima. По-умолчанию этот шаблон составляет 660 пикселей в ширину. Я увеличу его до 1000 px.

Элементы шаблона Blogger

Я специально раскрасил их в попсовые цвета в стиле «вырви глаз» для пущей наглядности :).

Элементы шаблона Blogger “Minima”

В общем случае, нужно будет увеличить следующие элементы:

«Обертка» страницы

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}

Меняю ширину с 660px на 1000px:

#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}

Здесь и далее изменяется только свойство width; все остальное остается без изменений.

Заголовок

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

Меняю:

#header-wrapper {
  width:1000px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

«Подвал»

#footer {
  width:660px;
  /* ... */
}

тоже увеличивается до 1000 пикселей в ширину

#footer {
  width:1000px;
  /* ... */
}

Теперь нужно сохранить шаблон.

После этого появится место для дополнительной колонки в блоге.

Пост скриптум

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

В шаблоне «Минима» это блок #content-wrapper, но ширина для него задается «автоматически» и тут ничего менять не надо.