10 ноября 2009 г.

Теги шрифтов и цветов в шаблонах 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.

Комментировать в ВКонтакте

Комментировать в Facebook

Комментировать в Blogger

Комментариев нет:

Отправить комментарий