Как изменить цвет заголовка постов в новых шаблонах

Я считаю, что одним из самых значимых событий в обновлении системы был запуск Дизайнера Шаблонов Blogger который позволяет пользователям легко, быстро и без дополнительных знаний настраивать внешний вид своих блогов. Работает там все более-менее хорошо, хотя иногда возникают небольшие замечания. Многие, кто пользуются Дизайнером Шаблонов, вероятно заметили, что в большинстве базовых шаблонов (или во всех, я просто не стал проверять) отсутствует возможность определить цвет заголовка публикаций.

Чтобы вам было понятнее о чем я говоря, приведу скриншот:

Как видите мы может изменить гарнитуру шрифта, его размер и начертания, поменять каким-либо образом цвет не представляется возможным. Но что делать, если вы все-таки хотите его изменить? Тогда вам определенно пригодится наш рецепт.

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

<Group description="Post Title" selector=".post">

<Variable name="post.title.font" description="Font" type="font"

default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

И добавляем внутрь:

<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>

<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>

В результате у нас должно получится следующее:

<Group description="Post Title" selector=".post">

<Variable name="post.title.font" description="Font" type="font"

default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>

<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>

</Group>

Шаг 2.
Двигаемся далее. Находим следующий фрагмент:

.post {

margin: 0 0 25px 0;

}

Добавляем ниже две строки:

.post h3 a, .post h3 a:visited { color: $(post.title.color); }

.post h3 a:hover { color: $(post.title.hover.color); }

В результате получаем:

.post {

margin: 0 0 25px 0;

}

.post h3 a, .post h3 a:visited { color: $(post.title.color); }

.post h3 a:hover { color: $(post.title.hover.color); }

Сохраняем шаблон, возвращаемся в дизайнер шаблонов, вуаля:

Один нюанс, Внимание! — не все шаблоны по структуре идентичны. Некоторые, например, «Венецианское стекло» организованы несколько иначе. Если вы вдруг, не обнаружили указанных выше фрагментов кода, вот рецепт для вас:

Вариант2. Шаг1.
Находим:

<Group description="Post Title" selector="h3.post-title, .comments h4">

<Variable name="post.title.font" description="Title Font" type="font"

default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

и заменяем на:

<Group description="Post Title" selector="h3.post-title, .comments h4">

<Variable name="post.title.font" description="Title Font" type="font"

default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>

<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>

</Group>

Вариант2. Шаг 2.
Находим:

h3.post-title {

margin: 0;

font: $(post.title.font);

}

и заменяем на:

h3.post-title {

margin: 0;

font: $(post.title.font);

}

h3.post-title a {

color: $(post.title.color);

}

h3.post-title a:hover {

color: $(post.title.hover.color);

}

Сохраняем шаблон. Результат будет тот же! Нельзя сказать, что хак мега необходимый, но в целом интересно получилось «расширить» стандартные возможности Дизайнера Шаблонов. Помнится когда-то уже такое делали в одном из постов блога, вот что-то вроде повторения, но на более простом примере. Если заказчик блога вдруг спросит мол — все хорошо, но здесь не могу менять цвет заголовков, вы будете знать что и как подправить в коде.