Продолжаем изучать шаблоны Blogger. Мы уже рассмотрели следующие темы:
- Структура шаблонов и специальные теги Blogger
- Теги виджетов в шаблонах Blogger
- Теги доступа к данным в шаблонах Blogger
Сегодня у нас еще одна небольшая, но интересная тема - переменные цветов и шрифтов в шаблонах Blogger.
Если Вы знакомы с HTML и CSS, то Вы можете настраивать шрифты и цвета прямо в исходном коде шаблона блога. Но в Blogger также есть возможность делать это более удобным способом - с помощью панели управления цветами и шрифтами блога («Дизайн» > «Шрифты и цвета»). Для того чтобы определенные цвета и шрифты стали доступны для редактирования в панели «Шрифты и цвета», нужно соблюсти несколько простых правил. Особенно рекомендуется добавлять в шаблон поддержку панели настройки шрифтов и цветов, если Вы собираетесь заняться разработкой и распространением шаблонов Blogger.
В разделе <head> кода шаблона нужно добавить два специальных тега - <b:skin> и </b:skin>. Между этими тегами описываются стили CSS, а также специальные теги переменных, которые и делают возможным наглядную настройку шрифтов и цветов в панели управления «Шрифты и цвета». Прежде чем углубиться в детали, рассмотрим небольшой пример:
<head>
...
<b:skin>
<style type='text/css'>
/*
* Описания переменных:
* <Variable name='bgcolor' description='Цвет фона страницы'
type='color' default='#fff' value='#fff'>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>
Первая часть кода CSS, заключенная в теги комментариев /* */, - это описания переменных. В блоге этот код не показывается, но используется для внутренних целей платформы Blogger. Каждая переменная Variable описывает цвет или шрифт, доступные для редактирования в панели «Шрифты и цвета». Теги Variable должны иметь следующие обязательные параметры:
- name - Уникальное имя переменной, состоящее из буквенно-цифровых символов.
- description - Описание переменной. Описание может быть более содержательным, чем имя; в описании допускаются пробелы. Именно описание представляет переменную в панели «Шрифты и цвета».
- type - Тип переменной; может иметь значения «font» (шрифт) или «color» (цвет).
- default - Значение переменной по умолчанию.
- value - Текущее значение переменной.
- Правила записи параметров default и value аналогичны. Значение цвета записывается в виде шестнадцатеричного кода, например, #FF0066. Для шрифта значение записывается в виде списка следующего формата: font-style font-weight font-size font-family.
Остальной код внутри тега b:skin выглядит как стандартный CSS с одним лишь исключением. Каждый раз, когда Вы используете цвет или шрифт, который Вы определили с помощью переменной, Вы пишите $variable_name вместо реального значения цвета или шрифта. В рассмотренном выше примере мы создали переменную bgcolor и присвоили ей значение #fff (белый цвет). Далее в таблице стилей, вместо того чтобы непосредственно определить белый цвет в качестве фона шаблона, мы просто сделали запись: background: $bgcolor. Тем самым мы также сделали фон страницы белым, с той разницей, что теперь мы легко можем его поменять в панели «Шрифты и цвета».
Работая над шаблоном, Вы можете добавлять сколько угодно переменных для шрифтов и цветов различных элементов дизайна (однако, не переусердствуйте), которые Вы хотите настраивать с помощью панели шрифтов и цветов. Для других типов параметров CSS нет нужды создавать переменные. Их записывают непосредственно в определениях параметров CSS как обычно (параметры margin: и padding: в приведенном выше примере).
Источник: Fonts and Colors Tags for Layouts.
Комментариев нет:
Отправить комментарий