Казалось бы — банальный вопрос «Как добавить CSS в тему Drupal», однако многих он ставит в тупик. Поскольку желательно делать это не прост так, чтобы работала, а еще и правильно. То есть согласно стандартам кодирования Drupal.
Собственно есть два способа правильного добавления есть два самых распространенных стандартных способа: добавление CSS в тему через .info файл, или же добавление с помощью функции drupal_add_css(). Функция drupal_add_css() подробно описана в API Drupal и, как правило, используется если нам необходимо не просто добавить CSS в тему а сделать это с определенными условиями, например применить условные комментарии для Internet Explore. Ниже мы детально рассмотрим оба способа.
Использование .info файла для добавления CSS
Это самый простой способ — все, что вам нужно сделать, это объявить стили и путь к ним относительно вашей темы, и все готово. Вы можете также объявить тип носителя, например, print, screen или all. В примере ниже CSS будут запрошены из базового каталога темы, если же вам нужно использовать вложенные каталоги, то просто укажите путь относительно базового каталога темы.
stylesheets[all][] = all.css stylesheets[screen][] = screen.css stylesheets[print][] = print.css |
Добавляем CSS в тему с использованием drupal_add_css()
Для того чтобы использовать функцию drupal_add_css() вам нужно иметь некоторые знания PHP. Однако только эта функция позволит добавить вам CSS в тему с применением определенных условий. Все тонкости использования этой функции вы можете изучить в документации. А ниже мы рассмотрим базовые приемы использования этой функции для добавления CSS в тему Drupal 7.
Для того чтобы добавить CSS в вашу тему с использованием функции drupal_add_css() вам нужно начать с добавления функции в template.php файл вашей темы. Ниже приведен простой пример кода для добавления:
drupal_add_css(drupal_get_path('theme', 'имя_вашей_темы') . '/стили-темы.css', array('group' => CSS_THEME, 'type' => 'file')); |
Где имя_вашей_темы и стили-темы.css заменяем, соответственно, на нужное вам.
Также можно добавить некоторые стили инлайн, они будут отображены в <head> непосредственно с использованием тега <style>:
drupal_add_css('body {background: #000;}', array('group' => CSS_THEME, 'type' => 'inline')); |
C помощью этой функции вы можете добавить и внешний файл стилей, например из Google Fonts API:
drupal_add_css('http://fonts.googleapis.com/css?family=Cookie', array('group' => CSS_THEME, 'type' => 'external')); |
Добавление CSS с условными комментариями для Internet Explore
Есть два способа это сделать — вы можете использовать drupal_add_css() с указанием параметров типа браузера, или пойти более простым путем и использовать модуль Conditional Styles, который позволит вам добавлять CSS-файлы через .info файл вашей темы.
Для того чтобы использовать первый способ вы должны использовать drupal_add_css() внутри функции themename_preprocess_html(), которая должна быть определена в template.php темы:
<?php function my_groovy_theme_preprocess_html(&$vars) { drupal_add_css(drupal_get_path('theme', 'имя_вашей_темы') . '/lte-ie-8.css', array( 'group' => CSS_THEME, 'browsers' => array( 'IE' => 'lte IE 8', '!IE' => FALSE ), 'preprocess' => FALSE )); } ?> |
Основным в данной констукции является определение правил для условных комментариев, с которыми вы можете экспериментировать в зависимости от ваших потребностей.
'browsers' => array( 'IE' => 'lte IE 8', '!IE' => FALSE ), |
Второй способ, с использованием модуля Conditional Styles значительно проще.Установив и активировав этот модуль вы сможете добавлять условные комментарии непосредственно в .info файл вашей темы с использованием конструкции типа:
stylesheets-conditional[lte IE 8][all][] = lte-ie-8.css |
Владимир
Есть еще модуль для ленивых
Hiway
Спасибо, да, действительно есть!