Опубликовано автор в категориях CMS, Drupal, Верстальщику.


Казалось бы — банальный вопрос «Как добавить 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

2 комментария к записи “Правильное добавление CSS в темы Drupal 7”

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

  • (не будет показан)