При изменении внешнего вида блога с помощью кода CSS следуйте описанным ниже правилам.
Настройка переменных
В разделе кода <head>
необходимо установить теги <b:skin> </b:skin>
.
Между этими тегами располагаются объявления стилей CSS, а также названия переменных, благодаря которым ваш дизайн будет совместим со страницей "Шрифты и цвета".
<head>
...
<b:skin>
<style type='text/css'>
/*
* Определения переменных:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>
В блоге не показывается код CSS, заключенный в теги комментариев /* и */.
Здесь перечисляются переменные (по одной для каждого шрифта или цвета с вкладки "Шрифты и цвета"), каждая из которых должна содержать информацию, представленную в примере выше.
- name – может содержать буквы или цифры. Названия переменных в шаблонах не должны повторяться.
- description – добавление описания, которое появится в разделе "Шрифты и цвета".
- type – font (шрифт) или color (цвет).
- default – значение по умолчанию. Для цветов следует использовать шестнадцатеричные коды, например #FF0066. Для шрифтов используется набор атрибутов font-style (стиль), font-weight (насыщенность), font-size (размер) и font-family (семейство шрифтов).
Использование переменных
Чтобы использовать значение заданной переменной, укажите ее название в виде $variable_name
в фрагменте кода CSS b:skin
.
В дизайнере шаблонов можно редактировать заданные вами типы переменных CSS. Руководствуйтесь следующими правилами:
- переменные цветов позволяют выбрать цвет из палитры в дизайнере шаблонов;
- переменные шрифтов позволяют задать шрифт и его размер, а также выбрать полужирное или курсивное начертание.
В приведенном выше примере переменная под названием bgcolor
задает белый цвет (#fff). В коде далее есть следующий фрагмент: background: $bgcolor.
В результате фон становится белым, и вы можете изменить его в разделе "Шрифты и цвета".
Примечание. Создавать переменные для других типов атрибутов CSS не нужно. Их можно включать в код CSS обычным образом (как атрибуты margin:
и padding:
в примере выше).
Подробнее о CSS…