- Використання .info файлу для додавання CSS
- Додаємо CSS в тему з використанням drupal_add_css ()
- Додавання CSS з умовними коментарями для Internet Explore
Здавалося б - банальне запитання «Як додати 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. cssstylesheets [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'));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'));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)); }?><? 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),'Browsers' => array ( 'IE' => 'lte IE 8', '! IE' => FALSE),
Другий спосіб, з використанням модуля Conditional Styles значно проще.Установів і активувавши цей модуль ви зможете додавати умовні коментарі безпосередньо в .info файл вашої теми з використанням конструкції типу:
stylesheets -conditional [lte IE 8] [all] [] = lte -ie - 8 .cssstylesheets-conditional [lte IE 8] [all] [] = lte-ie-8.css
Com/css?Com/css?
8.css', array ( 'group' => CSS_THEME, 'browsers' => array ( 'IE' => 'lte IE 8', '! IE' => FALSE), 'preprocess' => FALSE)); }?
8.css', array ( 'group' => CSS_THEME, 'browsers' => array ( 'IE' => 'lte IE 8', '! IE' => FALSE), 'preprocess' => FALSE)); }?
