*/]]> */]]>

С наступающим Новым Годом!

RegionAds

API в соц сетях

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

Я считаю, что одним из самых значимых событий в обновлении системы был запуск Дизайнера Шаблонов 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);
}
Сохраняем шаблон. Результат будет тот же! Нельзя сказать, что хак мега необходимый, но в целом интересно получилось "расширить" стандартные возможности Дизайнера Шаблонов. Помнится когда-то уже такое делали в одном из постов блога, вот что-то вроде повторения, но на более простом примере. Если заказчик блога вдруг спросит мол - все хорошо, но здесь не могу менять цвет заголовков, вы будете знать что и как подправить в коде. 

Fixed top menu logo

Alexandr Ratt
Блог создан для изучения технологии создания и продвижения блогов или сайтов на территории интернета. Наполнения сайта контентом, а также проблемам работы соц сетей и заработка.

gplus facebook twitter vk