Сегодня мы поговорим о том, как можно добавить пользовательский стиль для модуля Colorbox. В одном из последних проектов мне потребовалось написать свой стиль и я сразу же подумал, что никаких проблем не будет, ведь у модуля есть страница настроек, на которой можно выбирать стили, а значит должно быть и API для добавления стилей. Я очень сильно ошибался, как оказалось, у модуля нет нормального API. Придется ухищрятся...
Для начала определимся, что стиль в общем случае состоит из двух файлов: CSS и JS. Последний в свою очередь может отсутствовать. Переходим к созданию стиля.
Шаг 1. Создаем в своем модуле директорию colorbox, внутри нее директорию styles. Внутри директории styles создаем директорию, которая будет иметь название стиля, в моем случае это style_example. Далее в этой директории создаем файлы стиля, в моем случае это colorbox_style.css и colorbox_style.js.
Шаг 2. Теперь необходимо, чтобы модуль Colorbox увидел наш стиль в форме настроек. Как я уже писал ранее, для добавления стилей нет никакого API, поэтому альтерим форму настроек:
/**
* Implements hook_form_FORM_ID_alter().
*/
function example_form_colorbox_admin_settings_alter(&$form, &$form_state) {
$path = drupal_get_path('module', 'example') . '/colorbox/styles/style_example';
// Убираем из селекта вариант "None". Потом мы его вернем в самый конец, чтобы
// форма имела эстетический вид.
unset($form['colorbox_custom_settings']['colorbox_style']['#options']['none']);
// Добавляем в селект свой стиль.
$form['colorbox_custom_settings']['colorbox_style']['#options'][$path] = t('Style example');
// Возвращаем в селект вариант "None".
$form['colorbox_custom_settings']['colorbox_style']['#options']['none'] = t('None');
}
Шаг 3. Необходимо подключить файлы стиля, для этого имплементируем hook_colorbox_settings_alter():
/**
* Implements hook_colorbox_settings_alter().
*/
function example_colorbox_settings_alter(&$settings, &$style) {
if ($style == drupal_get_path('module', 'example') . '/colorbox/styles/style_example') {
drupal_add_js($style . '/colorbox_style.js');
drupal_add_css($style . '/colorbox_style.css');
// Мы можем альтернуть настройки колорбокса.
$settings['fixed'] = FALSE;
$settings['reposition'] = FALSE;
}
}