Редактирование кода CSS

При изменении внешнего вида блога с помощью кода 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

Эта информация оказалась полезной?
Как можно улучшить эту статью?