Un moyen d'ajouter CSS pour une seule page / nœud?

Je nettoie mes grandes feuilles de style folles (éventuellement pertinentes pour une question future) et je me demande quel est le meilleur moyen d’ajouter du CSS personnalisé à un nœud ou à une page spécifique.

En particulier, la page d'accueil de mon site de travail est une page de panneau et ses styles sont différents. Pour le moment, le CSS est simplement inclus dans la feuille de style du thème principal.

Y a-t-il un moyen de dire, "s'il s'agit du noeud Foo, alors ajoutez foo.css"? Est-ce que CSS Injector est ce que je recherche?

Je pourrais être intéressé à généraliser ceci à d’autres nœuds / sections / etc, mais pour le moment je veux juste gérer cet objet.

Ce que j'ai fini par faire.

J'utilise un sous-thème Zen et j'ai découvert en lisant en fait template.php qu'il existe un code commenté pour inclure des feuilles de style conditionnelles. Le code ci-dessous a fait exactement ce dont j'avais besoin:

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

(Ligne 80 dans un fichier stock Zen template.php, FWIW.)

C'est le genre de chose que je ferais par code, mais c'est parce que c'est comme ça que je roule.

Dans le template.php, vous voudrez quelque chose comme:

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");
  }
}

Remplacez foo par des valeurs liées à votre propre code.

Vous pouvez consulter le module Code par nœud . Il est également présenté dans cet article de blog .

Créez un contexte pour votre page / section, puis utilisez le module Contexte Assets pour charger CSS et / ou javascript pour ce contexte donné.

Le contexte:

Le contexte vous permet de gérer les conditions contextuelles et les réactions de différentes parties de votre site. Vous pouvez considérer chaque contexte comme représentant une "section" de votre site. Pour chaque contexte, vous pouvez choisir les conditions qui déclenchent l'activation de ce contexte et choisir différents aspects de Drupal devant réagir à ce contexte actif.

Considérez les conditions comme un ensemble de règles vérifiées lors du chargement de la page pour déterminer le contexte actif. Toutes les réactions associées à des contextes actifs sont ensuite déclenchées.

Contexte Ajouter des actifs:

Le contexte ajouter des ressources vous permet de le faire. Il a une interface utilisateur facile à utiliser pour vous permettre de faire tout cela sans écrire de code. Parce qu'il utilise des outils, tout cela est également exportable.

S'il s'agit d'une petite quantité de CSS, envisagez peut-être de faire de vos sélecteurs CSS basés sur le nœud et d'inclure le css dans le CSS de votre thème? Drupal 7 fournit le sélecteur body.page-node-NODEID, et Zen for Drupal 6 fournit des classes CSS de corps similaires.

Vous pouvez créer un module personnalisé et utiliser hook_preprocess_node () pour charger les feuilles de style de manière sélective en fonction de l'ID de nœud.

Voici un exemple:

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");
  }
}

Remplacez MYMODULE par le nom de votre module et remplacez MYTHEME par le nom du thème contenant le fichier css.

Si les critères pour lesquels l'ajout d'un style CSS dépend de certaines propriétés d'un nœud, j'implémenterais MYTHEME_preprocess_node(&$variables); une des valeurs transmises à la fonction est $variables['node'](notez que ce n'est pas le cas $variables['#node']).

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

Si les critères ne dépendent d'aucune propriété de nœud, je les implémenterais MYTHEME_preprocess_page(&$variables); $variables['node']contient un objet nœud, si la page affichée est une page de nœud. Dans Drupal 6, la fonction process obtient également $variables['is_front'], mais dans Drupal 7, la même variable n’est pas transmise; si vous avez besoin de savoir si la page est la page d'accueil, vous devez l'utiliser drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Pour un moyen de le faire basé sur l’administration, je regarderais le module CSS . Il ajoute un champ où vous pouvez ajouter du CSS aux pages node/addet node/edit.

CSS:

Le module CSS ajoute, pour les utilisateurs disposant d'autorisations suffisantes et de nœuds activés, un champ CSS sur la page de création de nœud.

Les utilisateurs peuvent insérer des règles CSS dans le champ du nœud CSS et ces règles seront analysées lors de l'affichage du nœud.

De cette manière, les utilisateurs expérimentés en CSS peuvent créer une conception CSS complexe pour le contenu des nœuds.

Important: notez que les autorisations d'édition CSS ne doivent être accordées qu'aux utilisateurs de confiance (administrateurs). Les utilisateurs malveillants disposant de cette autorisation risquent de casser la conception de votre site et de présenter des problèmes de sécurité (XSS).

CodePerNode est génial, mais CSS Injector est plus simple à installer (aucune bibliothèque nécessaire). Le module permet au gestionnaire de contenu d'ajouter dynamiquement du CSS à des pages spécifiques, sans toucher au code PHP ni aux fichiers INFO. 15777 installations ne peuvent pas se tromper - c’est une preuve sociale que ce module fonctionne. Le CSS est également mis en cache avec le système de mise en cache standard.

Puisque vous utilisez déjà des panneaux, il serait peut-être plus simple d'ajouter simplement votre code CSS en tant que style de panneau pour chaque région de votre panneau de page d'accueil. Vous pouvez y définir un balisage personnalisé et le réutiliser sur votre site.

Vous pouvez également accéder à la section Général de la règle de variante du gestionnaire de pages pour votre page d'accueil. Il y a une section ici pour ajouter des ID CSS et des règles uniquement pour le panneau actuel.

Remarque: tout cela se trouve dans D7. Il est donc possible que cette approche soit mieux prise en charge par les panneaux que dans les versions précédentes.

/ * Un exemple utilisant le thème bartik pour ajouter des CSS en fonction du type de contenu * /

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
}

Essayez d'ajouter ceci dans votre fichier 'template.php':

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

Remplacez 'mytheme' par le nom de votre répertoire de thème et '/css/front.css' par chemin où se trouve votre fichier CSS.

Pour supprimer le fichier 'front.css' des autres pages, essayez d'ajouter à 'template.php':

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

Encore une fois, remplacez «mytheme» par le nom de votre répertoire de thèmes.

Si vous avez besoin de désélectionner 'styles.css' de la page d'accueil, combinez simplement ces deux codes.

Supposons que vous avez besoin de 'front.css' sans 'styles.css' sur la page d'accueil et de 'style.css' sans 'front.css' sur toutes les autres pages. Le code ressemblera à ceci:

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']);
  } 
}

Aussi, remplacez «mytheme».

J'espère que cela vous sera utile.

J'aurais oublié de toucher template.php et d'ajouter simplement un autre élément dans le fichier .info de votre thème

Dites que votre feuille de style est en css/foo.css.

Voici à quoi ressemblerait votre fichier theme_name.info:

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

Vous bénéficierez ensuite de sa mise en cache avec les principales feuilles de style, et puisque je suppose que cela concerne votre page d’accueil, cela aurait du sens.

En plus de l'approche Drupal, lorsque vous n'avez besoin que d'un petit css à l'intérieur de votre corps HTML5, vous avez l'attribut css scoped. Voir https://stackoverflow.com/a/4607092/195812

Cette solution vous évitera d’éditer du code et d’installer plus de modules.

Vous pouvez imprimer le noeud de la page dans la balise body

<body page-node-26419 ...>

Ensuite, vous pouvez limiter

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

Ceci est utile pour les changements rapides mineurs