Blogger: Цвета из шаблона выносим на вкладку Шрифты и цвета!

Здравствуйте!

Как вы поняли из картинки сегодня мы будем строить Цветное Счастье своими руками!

Все началось с маленького поста про Цвета и шрифты в шаблоне Blogger: Изменяем размер шрифта где я хотела рассказать для новичков как работать с вкладкой Шрифты и цвета в разделе Дизайн на Панели инструментов, после которого я получила множество писем с просьбой помочь изменить шаблон, чтобы изменение цветов стало доступно с вкладки Цвета и шрифты.

Да я знаю, что у многих шаблонов, найденных на просторах интернета изменить Цвета и Шрифты на этой вкладке невозможно или они даже просто отсутствуют. Я вообще-то не очень высокого мнения об этих шаблонах обычно красивого дизайна, но очень слабого технического исполнения. (Лично нам с Кайлом пришлось дорабатывать несколько десятков самых разнообразны шаблонов.)

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

Это совсем не сложно, даже если вы ничего не знаете об Html/Xml и CSS, это все равно очень просто сделать. Единственное, что от вас потребуется это определенное усердие. Давайте я сначала расскажу вам как это сделать, а потом наиболее робкие смогут посмотреть 10-минутный ролик где я произвожу все описанные мной процедуры "в прямом эфире".

Открываем Блокнот (или любой другой текстовый редактор) и копируем туда этот код:

/* Определяем переменные для цветов и шрифтов
<Variable name="a0" description="Цвет 0"
type="color" default="#FFFFFF">
<Variable name="a1" description="Цвет 1"
type="color" default="#FFFFFF">
<Variable name="a2" description="Цвет 2"
type="color" default="#FFFFFF">
<Variable name="a3" description="Цвет 3"
type="color" default="#FFFFFF">
<Variable name="a4" description="Цвет 4"
type="color" default="#FFFFFF">
<Variable name="a5" description="Цвет 5"
type="color" default="#FFFFFF">
<Variable name="a6" description="Цвет 6"
type="color" default="#FFFFFF">
<Variable name="a7" description="Цвет 7"
type="color" default="#FFFFFF">
<Variable name="a8" description="Цвет 8"
type="color" default="#FFFFFF">
<Variable name="a9" description="Цвет 9"
type="color" default="#FFFFFF">
<Variable name="a10" description="Цвет 10"
type="color" default="#FFFFFF">
<Variable name="a11" description="Цвет 11"
type="color" default="#FFFFFF">
<Variable name="a12" description="Цвет 12"
type="color" default="#FFFFFF">
<Variable name="a13" description="Цвет 13"
type="color" default="#FFFFFF">
<Variable name="a14" description="Цвет 14"
type="color" default="#FFFFFF">
<Variable name="a15" description="Цвет 15"
type="color" default="#FFFFFF">
<Variable name="a16" description="Цвет 16"
type="color" default="#FFFFFF">
<Variable name="a17" description="Цвет 17"
type="color" default="#FFFFFF">
<Variable name="a18" description="Цвет 18"
type="color" default="#FFFFFF">
<Variable name="a19" description="Цвет 19"
type="color" default="#FFFFFF">

<Variable name="a20" description="Фон 20"
type="color" default="#FFFFFF">
<Variable name="a21" description="Фон 21"
type="color" default="#FFFFFF">
<Variable name="a22" description="Фон 22"
type="color" default="#FFFFFF">
<Variable name="a23" description="Фон 23"
type="color" default="#FFFFFF">
<Variable name="a24" description="Фон 24"
type="color" default="#FFFFFF">
<Variable name="a25" description="Фон 25"
type="color" default="#FFFFFF">
<Variable name="a26" description="Фон 26"
type="color" default="#FFFFFF">
<Variable name="a27" description="Фон 27"
type="color" default="#FFFFFF">
<Variable name="a28" description="Фон 28"
type="color" default="#FFFFFF">
<Variable name="a29" description="Фон 29"
type="color" default="#FFFFFF">

Конец определения переменных ------- */

Ничего сложного в этом коде нет, здесь я описала 20 переменных для цветов шрифта и 10 переменных для цвета фона.

Описатель переменной берется в угловые скобочки, т.е. значки меньше и больше < > а внутри определяется имя переменной (Variable name). Имена переменных должны быть уникальны и я за отсутствием богатой фантазии дала им имена от a0 до a29, далее идет описание переменной (description) это та текстовая строка, которую вы видете напротив цвета на вкладке Цвета и шрифты. Далее идет тип переменной (type) в настоящий момент Blogger допускает только два типа переменных color (что значит цвет) и font (что значит шрифт). Сегодня мы с вами работаем только с цветами. И наконец, так сказать цвет по умолчанию (default) я пока поставила белый #FFFFFF.

Теперь открываем на Панели инструментов в разделе Дизайн вкладку Изменить Html. Галочку расширить шаблоны виджета НЕ СТАВИМ.

0) Делаем резервную копию нашего шаблона: Сохраняем и восстанавливаем шаблон на Blogger(е)!

1) Если в вашем шаблоне уже есть описатели цветов, но они не работают: Ищем (CtrlF) строчки начинающиеся с <Variable и удаляем их чтобы не мешали нашей работе.

2) Ищем описатели цвета color в нашем шаблоне.

Это будет выглядеть примерно так:
color: #cccccc;
или значение цвета может быть записано в сокращенном трехсимвольном виде:
color: #ccc;

меняем значение цвета вместе с символом # на имя очередной переменной, а вот перед именем переменной надо будет поставить знак $

т.е. вместо color: #cccccc; мы получим color: $a0; а чтобы не потерять значение цвета, мы в описании переменной a0 (в Блокноте) поставим #cccccc как значение цвета по умолчанию.

Итак, в шаблоне вместо строчки color: #cccccc;
У нас будет строчка color: $a0;

А в Блокноте вместо такого описания переменной a0
<Variable name="a0" description="Цвет 0"
type="color" default="#FFFFFF">
У нас будет такое описание
<Variable name="a0" description="Цвет 0"
type="color" default="#cccccc">

Так и будем продолжать, только не забывайте последовательно менять имена переменных $a1, $a2, $a3 и т.д.

3) Далее проделываем ту же процедуру с описателем фона background, т.е. ищем в нашем шаблоне вхождение описателя background и точно так же меняем числовое значение цвета на имя очередной переменной желательно с описателем "Фон nn" (чисто из эстетических соображения чтобы отделить переменные описывающие цвет шрифта, от переменных описывающих шрифт фона, хотя это не так уж важно).

4) Из блокнота удаляем лишние (не использованные нами) описатели переменных.

5) Теперь в Html-коде нашего шаблона ищем такую строчку
<b:skin><![CDATA[

И сразу после неё вставляем из Блокнота получившийся у нас код с описаниями переменных. Нажимаем ПРОСМОТР и если ничего плохого не случилось нажимаем СОХРАНИТЬ.

6) Идем на вкладку Шрифты и цвета в разделе Дизайн и пытаемся понять какой цвет чему в нашем шаблоне соответствует. Меняем описания переменных в нашем Блокноте с Цвет 1, Цвет 2,... на осмысленные.

7) Заменяем описатели переменных цветов в нашем шаблоне, на новые с осмысленными описаниями из блокнота или просто правим описания (description) переменных. Опять же ПРОСМОТР и СОХРАНИТЬ.

А теперь видео - немного нудное... но что сделать это вот такая нудная работа вытаскивать цвета на вкладку Шрифты и цвета, зато потом становится очень удобно.

Смотрим видео, а я с вами прощаюсь!

Всем хороших выходных!