xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

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

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
Похожие записи

Комментарии RSS

Code per Node забыл. Для 6-ки есть еще CSS.

Code per Node всё таки более узко-ориентированный

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

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

в html.tpl.php пропишите

Большое спасибо!

В первом способе для 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.

подключатся

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

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

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании