Как изменить цвет сайдбара в Simple шаблоне?

пятница, 1 июня 2012 г.
Один из стандартных шаблонов для 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 проще выбрать иной, подходящий их шаблон.
P.S. Мониторинг обменных пунктов позволяет находить самый выгодный курс на обмен wmr - wme и других электронных валют, на больших суммах экономия существенна.
Закажите подарок для своей любимой девушки, лучшая элитная парфюмерия http://makeup.com.ua/ доступна в нашем интернет магазине по доступным ценам с доставкой.
Спортивный покер набирает огромную популярность, на сайте internet poker вы узнаете про секреты и особенности этой игры.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails