Изменение стандартной темы для jQuery UI

Библиотека jQuery UI как известно входит в ядро Drupal 7. Но стандартные элементы, создаваемые с помощью этой библиотеки (Dialog, Tabs, Slider, Datepicker), зачастую не сочетаются с дизайном сайта. Для темизации этих элементов не стоит спешить и переопределять стили, описанные в файлах ядра. Проще воспользоваться графическим интерфейсом ThemeRoller для создания своей темы для jQuery UI.

jq-ui1.png

jq-ui2.png

Данный интерфейс позволяет либо выбрать во вкладке Gallery уже предустановленные темы (если конечно же найдутся подходящие под ваш дизайн), либо же создать свою собственную тему. После выбора темы или создания своей нужно ее скачать, нажав на кнопку "Download theme". После нажатия на кнопку откроется страница с выбором нужных компонентов.

jq-ui3.png

Выбираем используемые компоненты и жмем кнопку "Download". Из загруженного архива нам понадобится только папка css. Там лежат используемые изображения и два файла:jquery-ui-xxx.custom.min.css и jquery-ui-xxx.custom.css. Далее нам потребуется подменить файл misc/ui/jquery.ui.theme.css из ядра файлом jquery-ui.custom.min.css. Для этого имплементируем hook_css_alter() в файле template.php, используемой темы.


/**
 * implements hook_css_alter()
 */
function YOURTHEMENAME_css_alter(&$css) {
  if (isset($css['misc/ui/jquery.ui.theme.css'])) {
    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'YOURTHEMENAME') . '/css/jquery-ui.custom.min.css';
  }
}

После очистки кэша все jQuery UI элементы будут темизированы в соответствии с дизайном сайта.