Интеграция с модулем Color

Модуль Color позволяет управляющему сайтом изменять цветовую схему темы не занимаясь ручной правкой кода. Смена цветовой схемы осуществляется на странице настройки темы из 5-цветной палитры. Для того, чтобы такая возможность была доступна на странице настройки темы, тема должна содержать определённые хуки, которые позволяют это сделать. Этот документ объясняет основы работы с темами, в которых будет возможна смена цветовой схемы.

Разработка в теории

Важно понимать, что в результате работы модуля Color, не для любой темы будет доступна возможность смены её цветов. Мы возьмём прозрачное изображение дизайна (основу), затем мы наложим это изображение поверх фона, чтобы получить цветную версию. И наконец, мы разрежем скомпонованное изображение на части, и сохраним их в качестве отдельных файлов.

Мы также обработаем стили и изменим все цвета основывающиеся на изменяемых. Модуль плавно изменяет цвета используя палитру в качестве основы своих действий. Цвета, которые не определены явно в палитре, согласованы с ближайшими цветами, которые определены явно (будь это ссылка, текст или фон).

Таким образом, наш макет будет содержать несколько слоёв, цвета которых смешиваясь будут давать итоговую картину. При сохранении итогового изображения и объединении слоёв, будет сохранена их прозрачность. В качестве примера можно посмотреть на файл base.png темы Garland (чтобы увидеть прозрачность, откройте его в графическом редакторе).

Файлы стилей, которые генерируются при смене цветовой схемы, записываются в папку [системная-папка]/css. Это означает, что тема сохранит изменённые цвета и в случае отключения модуля Color. Файл стилей в папке самой темы не изменяется.

Разработка на практике

Давайте возьмём в качестве примера стандартную тему Garland. Файлы работающие с модулем Color можно найти в папке themes/garland/color. В этой папке находятся 4 файла:

• base.png — базовый дизайн темы, который был скомпонован и нарезан на части
• color.inc — содержит все необходимые параметры для раскрашивания темы. Его код будет подробно рассмотрен ниже
• preview.css — стили, которые используются для генерации картинки предварительного просмотра (показывается на странице настройки темы)
• preview.png — изображение, которое используется для генерации картинки предварительного просмотра (показывается на странице настройки темы)

Наличие файла color.inc делает доступной пипетку для выбора цвета на странице настройки темы. Это обычный PHP-файл, который содержит массив $info со следующими значениями:

Цветовые схемы

В этой секции содержится массив записей о предопределённых цветовых схемах. Каждая запись содержит 5 цветов (в порядке записи — основной цвет, цвет ссылок, фон верхней колонки, фон нижней колонки, цвет текста) и название схемы.

Первая схема используется в качестве ссылки на схему, которая используется по умолчанию, поэтому она должна содержать записи о цветах, которые соответствуют используемым по умолчанию.

<?php
array('schemes' => array(
    '#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
    '#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
    '#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
    '#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
    '#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'),
    '#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'),
    '#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'),
    '#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'),
    '#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'),
    '#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'),
    '#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'),
    '#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'),
    '#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'),
    '#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'),
    '#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'),
  ));
?>

Копируемые изображения

Эта секция содержит массив со списком изображений, которые должны быть скопированы. Они будут скопированы в папку со сгенерированными изображениями и стилями новой цветовой схемы.

<?php
  array('copy' => array(
    'images/menu-collapsed.gif',
    'images/menu-expanded.gif',
    'images/menu-leaf.gif',
  ));
?>

Заливка областей и градиенты

Для раскрашивания изображения, нужно создать новое изображение, соответствующее базовому изображению и применить к нему заливку областей и градиент. Для более точной работы, размещение этих областей определяется указанием координат (x, y, ширина, высота):

<?php
  array('gradient' => array(0, 37, 760, 121));
?>

Можно определить вертикальный градиент с двумя цветами.

<?php
  array('fill' => array(
    'base' => array(0, 0, 760, 568),
    'link' => array(107, 533, 41, 23),
  ));
?>

Кроме того, можно определить цвет для каждой области и указанная область будет залита выбранным цветом. Доступные области: base, link, top, bottom и text.

Нарезка изображения

Затем, вам нужно определить области базового изображения для того, чтобы нарезать его на части. Определите координаты (x, y, ширина, высота) для каждого файла. Логотип и скриншот являются особенными изображениями и к ним применяются особые правила. Во-первых, изображение логотипа должно всегда называться logo.png, а изображение скриншота screenshot.png. Во-вторых, размер скриншота будет изменён до 150x90 пикселей.

<?php
  array('slices' => array(
    'images/body.png'                      => array(0, 37, 1, 280),
    'images/bg-bar.png'                    => array(202, 530, 76, 14),
    'images/bg-bar-white.png'              => array(202, 506, 76, 14),
    'images/bg-tab.png'                    => array(107, 533, 41, 23),
    'images/bg-navigation.png'             => array(0, 0, 7, 37),
    'images/bg-content-left.png'           => array(40, 117, 50, 352),
    'images/bg-content-right.png'          => array(510, 117, 50, 352),
    'images/bg-content.png'                => array(299, 117, 7, 200),
    'images/bg-navigation-item.png'        => array(32, 37, 17, 12),
    'images/bg-navigation-item-hover.png'  => array(54, 37, 17, 12),
    'images/gradient-inner.png'            => array(646, 307, 112, 42),

    'logo.png'                             => array(622, 51, 64, 73),
    'screenshot.png'                       => array(0, 37, 400, 240),
  ));
?>

Файлы

Эта секция определяет расположение файлов темы. В этой секции необходимо определить файл изображения и файл стилей, которые будут использоваться для предварительного просмотра, а также базовое изображение:

<?php
array(
  'preview_image' => 'color/preview.png',
  'preview_css' => 'color/preview.css',
  'base_image' => 'color/base.png',
);
?>

Стили

Модуль Color считывает содержание файла style.css, а также других файлов, которые импортируются из этого файла при помощи правила @import. После этого, создаётся новый файл style.css, который содержит изменённые нужным образом цвета, для чего используется одна из цветовых схем. Это зависит от контекста:

• Links: the 'link' color is used, for rules that apply to a elements
• Text: the 'text' color is used, for rules that appear in color: styles
• Base: the 'base' color is used for everything else.

However, if a color in the stylesheet matches one of the reference colors exactly, the context will be ignored, and the matching replacement color will be used instead.

For example, suppose your reference color is dark blue by default, but you change it to red. Your default stylesheet contains both light blue and gray purple, both relative to this reference color.

The resulting colors (mauve and brown) are similarly different from red as the original colors were from blue. In technical terms: the relative difference in hue, saturation and luminance is preserved.

If you find color.module is using the wrong reference color, try separating the different pieces into separate CSS rules, each in their own selector { ... } section, so there is no confusion about the context.

Если редактируете стили после того, как была сохранена цветовая схема сайта, то вам нужно пересохранить цветовую схему, чтобы в сгенерированный модулем Color файл style.css были внесены сделанные вами изменения в файле style.css, который расположен в папке темы.

Если вы хотите, чтобы определённые цвета в файле стилей не заменялись, то в файл style.css нужно добавить следующий маркер:

Этот маркер можно использовать только один раз. Маркер применяется глобально, таким образом если есть стили которые импортируются из других файлов, их цвета также не будут тронуты.

Making colors match

Важно, чтобы сгенерированные изображения совпадали с новыми цветами определёнными стилем. В противном случае, вы получите резкие некрасивые углы в местах смены цветов.

Чтобы это сделать, пиксели основного изображения должны использовать один цвет в тех областях, где они будут совпадать с цветами определёнными в CSS-файле. Так как мы не знаем, где определённые стилем цвета будут показываться в базовом изображении, мы используем глобальный смешивающий цвет, который быть таким же во всё дизайне. Тема Garland использует белый. Отметьте, что базовое изображение темы Garland не включает серые и чёрные пиксели, кроме областей где используются в качестве фона изображения (например в заголовке сайта). Кроме белого, хорошими претендентами могут быть чёрный или серый цвета.

<?php
  array('blend_target' => '#ffffff');
?>

Мазохисты могут посмотреть внутренности файла color.module, в особенности функцию _color_shift(), если вы интересуетесь как применяются изменения PHPTemplate.

И наконец, нужно добавить хук модуля Color в темы. Для этого, можно использовать следующий сниппет:

<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function _phptemplate_variables($hook, $vars) {
  if ($hook == 'page') {

    // Hook into color.module
    if (module_exists('color')) {
      _color_page_alter($vars);
    }
    return $vars;
  }
  return array();
}
?>

Эти сниппеты позволят модулю переопределять логотип, стили и скриншот темы. Если вы используете и другие сниппеты для _phptemplate_variables, то разумеется их будет нужно объединить с этим сниппетом.

В видеозаписи можно посмотреть, как сделать аналогичный файл в Adobe Photoshop.