Drupal → 5 способов подключить свой CSS стиль

28.10.2011

Важно — нужно сбрасывать кэш после подключения стиля любым способом.

1. В .info файле активной темы или модуля

Добавить в .info файл активной темы или модуля строчку:

stylesheets[all][] = styles.css

Стиль styles.css будет подключаться на всех страницах.

Путь к файлу указывается относительно директории .info файла. Например если стиль расположен в поддиректории css, то путь будет — css/styles.css.

Вместо all можно указать любой валидный медиа тип или выражение в виде screen and (max-width: 600px).

2. В файле template.php

Реализовать в template.php активной темы любую preprocess или process ф-ю, в которой вызвать drupal_add_css(). Единственное условие — ф-я должна выполняться до template_process_html(). Например:

function THEMENAME_preprocess_html(&$variables) {
  drupal_add_css(path_to_theme() . '/styles.css');
}

Вместо THEMENAME прописать системное имя темы.

Пример подключения css файла только на страницах нод:

function THEMENAME_preprocess_html(&$variables) {
  if (arg(0) == 'node' && is_numeric(arg(1)) && !arg(2)) {
    drupal_add_css(path_to_theme() . '/styles.css');
  }
}

В drupal_add_css(), во втором параметре можно указывать тип подключаемого стиля (локальный файл, внешний файл, инлайн стиль), указать вес стиля относительно других подключаемых файлов, запретить стилю участвовать в агрегации и прописать conditional comments для Internet Explorer-а. Подробности в манах.

3. В файле модуля

Всё что написано во втором способе актуально и для модулей:

function MODULENAME_preprocess_html(&$variables) {
  drupal_add_css(drupal_get_path('module', 'MODULENAME') . '/styles.css');
}

Плюс можно подключить файл в любом хуке, который вызывается до рендеринга страницы:

function MODULENAME_init() {
  drupal_add_css(drupal_get_path('module', 'MODULENAME') . '/styles.css');
}

4. В параметре #attached рендер массива

Например подключить стиль для формы:

$form['#attached']['css'][] = drupal_get_path('module', 'MODULENAME') . '/styles.css';

Ещё пример с формой.

5. C помощью модуля CSS Injector

Подробности в посте Модуль CSS Injector — пишем CSS из админки.

Написанное актуально для
Drupal 7
Похожие записи

Комментарии

Rootical V.
22.11.2011, 17:17

Отлично, спасибо!!! Я как-то был раньше ограничен :(

Гость
10.12.2012, 10:58

А как мне подключить css-файл, чтобы он находился в теге < noscript > ?

hameleonlab
17.06.2014, 13:33

В первом способе для 7-ки не стоит указывать имя файла styles.css - стильи не подключатся. api

Keep in mind that defining custom styles will prevent the default "style.css" from loading. Remember to explicitly define the default style sheet if your theme uses it.

hameleonlab
17.06.2014, 13:43

Только что мучался, пока файл не переименовал.

Гость
08.11.2018, 10:45

Наверняка не по теме, но может вы меня сориентируете
У меня такой вопрос:
У меня файл CSS подключается как @import url .... /css/style.css?phv361");
Внося изменения в файл styles.css по указанному пути и сохраняя, в файле стили изменены, а при загрузки страницы остаются прежними.
Очистил КЭШ в разделе производительность. Не помогло.
От сюда вопрос, как обновить стили?

Пользователь
26.12.2018, 04:08

В Firefox стили могут не подхватываться, если закэшированы в самом браузере. И ctrl-F5 не спасёт. Только ctrl-shift-DEL, далее выбрать всё что не жалко грохнуть (осторожнее с паролями - можно ненароком грохнуть все), я выбирал "за сегодня", куки+кэш+офлайнДата+sitePreference. И вот уже после этого - ctrl-F5.
Удачи!
/* Да-да, некропостинг. Но ведь и сам только что сюда зашёл. И разбирался со всей этой хренотенью. */

Игорь
05.05.2020, 13:46

Есть способ в теме генерировать все файлы css в один файл? Точнее как это сделать.
Извиняюсь, не там оставил коммент первый раз.

Игорь
08.05.2020, 17:52

Ещё один вопрос. Создаются отдельно html.tpl.php для определённых нод или типы материалов?
А то про это никакой информации совершенно не существует. Ну или я не в состоянии найти месяц как

Добавить комментарий