Любой способ добавить CSS для одной страницы /узла?

Я очищаю свои большие сумасшедшие таблицы стилей (возможно, относящиеся к будущему вопросу), и мне интересно, как лучше добавить пользовательский CSS к определенному узлу или странице.

В частности, домашняя страница моего рабочего сайта - это страница панели, и у нее есть куча разных стилей. В настоящее время CSS только что включен в основную таблицу стилей темы.

Есть ли способ сказать: «Если это узел Foo, то добавьте foo.css»? Является Инжектор CSS , который я ищу?

I может быть заинтересованным в обобщении этого на другие узлы /разделы /etc, но на данный момент я просто хочу обработать этот один элемент.

Что я закончил делать.

Я использую подтему Дзэн и обнаружил, что на самом деле читаю через template.php, что есть некоторый код с комментариями для включения условных таблиц стилей. Код ниже сделал именно то, что мне нужно:

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(строка 80 в файле Zen template.php, FWIW.)

79 голосов | спросил epersonae 3 MaramThu, 03 Mar 2011 02:46:10 +03002011-03-03T02:46:10+03:0002 2011, 02:46:10

14 ответов


69

Это то, что я делал бы с помощью кода, но это потому, что я просто рулон.

В template.php вам нужно что-то вроде:

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Заменить foo значениями, связанными с вашим собственным кодом.

ответил Decipher 3 MaramThu, 03 Mar 2011 02:53:13 +03002011-03-03T02:53:13+03:0002 2011, 02:53:13
24

Вы можете посмотреть модуль Код на узел . Он также представлен в этом сообщении в блоге .

ответил rakke 30 Maypm11 2011, 19:59:30
16

Создайте Контекст для своей страницы /раздела, а затем используйте Модуль контекстных атрибутов для загрузки CSS и /или javascript для данного контекста.

Контекст:

  

Контекст позволяет вам управлять контекстуальными условиями и реакциями для разных частей вашего сайта. Вы можете думать о каждом контексте как о «разделе» вашего сайта. Для каждого контекста вы можете выбрать условия, которые активируют этот контекст, и выбирать различные аспекты Drupal, которые должны реагировать на этот активный контекст.

     

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

Контекст Добавить активы:

  

Контекст добавить активы позволяет это сделать. Он имеет простой в использовании интерфейс, позволяющий вам делать все это без написания кода. Поскольку он использует ctools, все это также можно экспортировать.

ответил budda 3 MaramThu, 03 Mar 2011 03:43:21 +03002011-03-03T03:43:21+03:0003 2011, 03:43:21
12

Если это небольшое количество CSS, возможно, если вы хотите сделать свои селектора CSS на основе узла и включить CSS в CSS вашей темы? Drupal 7 предоставляет селектор body.page-node-NODEID, а Zen для Drupal 6 предоставляет аналогичные классы CSS для тела.

ответил Dave Reid 3 MaramThu, 03 Mar 2011 03:13:55 +03002011-03-03T03:13:55+03:0003 2011, 03:13:55
7

Вы можете создать собственный модуль и использовать hook_preprocess_node () для выборочной загрузки таблиц стилей на основе идентификатора узла.

Вот пример:

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Замените MYMODULE на имя вашего модуля и замените MYTHEME на имя темы, содержащей файл css.

ответил Camsoft 3 MaramThu, 03 Mar 2011 03:12:54 +03002011-03-03T03:12:54+03:0003 2011, 03:12:54
7

Если критерии, для которых добавление стиля CSS зависит от некоторых свойств узла, я бы выполнил MYTHEME_preprocess_node(&$variables); одно из значений, переданных функции, - это $variables['node'] (чтобы заметить, что это не $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Если критерии не зависят от свойств узла, я бы выполнил MYTHEME_preprocess_page(&$variables); $variables['node'] содержит объект-узел, если отображаемая страница является страницей узла. В Drupal 6 функция процесса также получает $variables['is_front'], но в Drupal 7 та же переменная не передается; если вам нужно знать, является ли страница главной страницей, вам нужно использовать drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}
ответил kiamlaluno 6 J0000006Europe/Moscow 2011, 04:35:06
5

Для метода, основанного на администрировании, я бы посмотрел на модуль CSS . Он добавляет поле, где вы можете добавить CSS на страницы node/add и node/edit.

CSS

  

Модуль CSS добавляет для пользователей с достаточными разрешениями и включенными узлами поле CSS на странице создания узла.

     

Пользователи могут вставлять правила CSS в поле узла CSS, и эти правила будут проанализированы при просмотре узлов.

     

Таким образом, опытные пользователи CSS могут создавать сложный дизайн на основе CSS для содержимого узлов.

     

Важно: обратите внимание, что разрешения на редактирование CSS должны предоставляться только доверенным пользователям (администраторам). Вредоносные пользователи, у которых есть это разрешение, могут сломать дизайн вашего сайта, а также ввести проблемы безопасности (XSS).

ответил Paul Jones 3 MaramThu, 03 Mar 2011 03:03:46 +03002011-03-03T03:03:46+03:0003 2011, 03:03:46
2

Поскольку вы уже используете панели, вам может быть проще просто добавить ваш CSS в качестве стиля панели для каждого региона вашей домашней панели. Вы можете определить собственную разметку и повторно использовать ее на своем сайте.

Вы также можете просто перейти к разделу «Общие» варианта варианта менеджера страниц для своей домашней страницы. Здесь есть раздел для добавления CSS-идентификаторов и правил только для текущей панели.

Примечание: все это в D7, поэтому возможно, что этот подход лучше поддерживается панелями, чем в предыдущих версиях.

ответил Warpstone 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 12 Sep 2012 18:39:09 +0400 2012, 18:39:09
2

/* Пример использования темы bartik для добавления css на основе типа содержимого * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}
ответил tal 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 12 Sep 2012 22:30:43 +0400 2012, 22:30:43
2

CodePerNode отлично, но CSS Injector проще установить (библиотеки не нужны). Модуль позволяет диспетчеру контента динамически добавлять CSS на определенные страницы, не затрагивая вообще PHP-код или INFO-файлы. 15777 установки не могут быть ошибочными - это социальное доказательство, что этот модуль работает. CSS также кэшируется с помощью обычной системы кэширования.

ответил Druvision 26 WedEurope/Moscow2012-12-26T01:45:24+04:00Europe/Moscow12bEurope/MoscowWed, 26 Dec 2012 01:45:24 +0400 2012, 01:45:24
2

Попытайтесь добавить это в свой файл template.php:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

Замените «mytheme» на имя вашего каталога тем и «/css/front.css» на путь, где находится ваш файл CSS.

Чтобы отключить файл 'front.css' с других страниц, попробуйте добавить в 'template.php':

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

Снова замените «mytheme» на имя вашего каталога тем.

Если вам нужно отменить «styles.css» с главной страницы, просто соедините эти два кода.

Предположим, что вам нужно «front.css» без «styles.css» на первой странице и «style.css» без «front.css» на всех других страницах. Код будет выглядеть примерно так:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

Также замените 'mytheme'.

Я надеюсь, что это будет полезно.

ответил mixerowsky 13 PM00000060000003531 2014, 18:48:35
1

Я бы вообще пропустил касание template.php и просто добавил еще один элемент в файл .info вашей темы.

Скажите, что ваша таблица стилей находится в css/foo.css.

Вот как выглядит ваш файл theme_name.info:

name = Theme Name
...
stylesheets[all][] = css/foo.css

Затем вы получаете преимущество в том, что он кэшируется с помощью основных таблиц стилей, и поскольку я предполагаю, что это для вашей домашней страницы, это имеет смысл.

ответил Alexander Hripak 3 62012vEurope/Moscow11bEurope/MoscowSat, 03 Nov 2012 00:28:36 +0400 2012, 00:28:36
1

Помимо подхода Drupal, когда вам нужен только короткий фрагмент css внутри вашего тела HTML5, у вас есть атрибут css scoped. См. https://stackoverflow.com/a/4607092/195812

Это решение избавит вас от редактирования кода и установки дополнительных модулей

ответил augusto 22 52013vEurope/Moscow11bEurope/MoscowFri, 22 Nov 2013 15:41:18 +0400 2013, 15:41:18
0

Вы можете распечатать узел страницы в теге body

<body page-node-26419 ...>

Тогда вы можете ограничить

body.page-node-26419 {
    background: red
}

Это полезно для небольших быстрых изменений

ответил Markus Zerres 13 Jpm1000000pmSat, 13 Jan 2018 20:32:15 +030018 2018, 20:32:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132