Как изменить цвет сайдбара в Simple шаблоне?
01.06.12
Один из стандартных шаблонов для Blogger, который пользуется большой популярностью, — это Simple. Недавно нашел в интернете интересный «рецепт» по его модификации, который может многим пригодится. Там, конечно, есть свои нюансы и в итоге все получилось не очень гладко с установкой, но в общеобразовательных целях, думаю, в сегодняшним посте все это можно рассмотреть. Речь пойдет об изменении цвета фона и сайдабре, похожие «цветовые хаки» я уже однажды рассматривал в посте про то как изменить цвет заголовка постов в новых шаблонах.
Но сейчас речь пойдет не о заголовках, а о расцветке боковых колонок блога — что если вы захотите вдруг их изменить для шаблона Simple? Решение этой задачи займет считанные минуты. Итак:
Шаг 1
Заходим в админку Blogger в раздел Шаблон, где кликаем по ссылке «Изменить HTML» и открываем редактор кода (кнопка Продолжить). Далее находим следующий фрагмент кода:
/* Variable definitions
====================<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
Шаг 2
Добавляем сразу после этого фрагмента следующие строки:
<Group description="Sidebar Background" selector="body">
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
</Group>
В результате у нас должно получится что-то вроде:
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
<Group description="Sidebar Background" selector="body">
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
</Group>Шаг 3
Далее находим ]]></b:skin> и вставляем перед этой строкой стили оформления для только что созданного блока сайдбара:
.column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }
Шаг 4
Сохраняем код, после чего вы сможете увидеть изменения в фоне сайдбара на самом сайте. Чтобы изменить цвет фона идем в дизайнер шаблона (Template Designer). Он находится в том же разделе админки «Дизайн», но уже кликаем по кнопке «Настроить».
Добавленные цвета вы найдете в пункте меню «Дополнительно» — Sidebar Background (Фон боковой панели). Причем здесь будет 2 значения — для правого и левого сайдбара. Если у вас в шаблоне только один, то изменение второго значения ни на что влиять не будет.
В принципе, сам хак на этом можно считать завершенным, но, как я уже сказал в начале, есть тут небольшая проблемка. Шаблон Simple устроен таким образом, что высота его боковой колонки (height) является фиксированной и зависящей от количества элементов / контента в сайдбаре. То есть, если, например, основная область контента будет слишком длинной, а сайдбар «покороче», то фон не будет будет растягиваться до низу — выглядеть это все будет достаточно «уныло» и некрасиво. Конечно, можно задать для соответствующего стиля высоту:
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); height: 1000px;}
Но вы не можете знать насколько большой по высоте у вас получится сайт в целом. Значение height: 100%, что иногда помогает в таких случаях и выравнивает сайдбар по всех ширине колонки, применить не удается за счет особенностей структуры шаблона Simple. Если внести в его код определенные дополнительные изменения — думаю, задачу можно решить. Хотя, с другой стороны, большинству пользователей, далеких от HTML и CSS проще выбрать иной, подходящий их шаблон.