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

79

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.)

Epersonae
la source
créer page--front.tpl.phpetpage.tpl.php
M ama D

Réponses:

69

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.

Déchiffrer
la source
donc pour la page d'accueil, utiliseriez-vous à la if(drupal_is_front_page()) {place de if(drupal_get_path_alias [etc]?
epersonae
Oui, les conditions sont entièrement à vous. Vous pouvez simplement faire un $vars['#node']->nid == $nidchèque si vous le souhaitez.
Déchiffrer
8
Déchiffrer, ne trouve aucune faute avec votre code. Mais espérons que cela ne vous dérange pas que je vous signale que, sauf si vous parlez de la configuration des autorisations Drupal, votre rôle devrait être celui que vous remplissez. ;-)
medden le
2
Pour votre information, j'utilise Drupal 7 et j'ai découvert que je devais utiliser $vars['elements']['#node']->nidplutôt la recherche d'alias. La dernière version de Drupal 7 n’a pas de #noderacine vars.
Wes Johnson
ne devrait-il pas avoir de fonction en avance sur MYTHEME__preprocess_node ($ vars) Je vois tout le code qui s'y trouve juste en termes de fonctions?
pal4life
16

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.

budda
la source
J'utilise contextuellement Add Assets dans littéralement tous les sites Web que je crée - si vous êtes dans le contexte (qui gère chaque section de mes versions), Add Assets est parfait!
Electblake
13

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.

Dave Reid
la source
C’est essentiellement ce que je faisais ... et c’est près de 200 lignes. C’était donc une bonne idée de le déplacer ailleurs. (oui, il devrait probablement être plus court. cela peut être une étape séparée.)
epersonae
D'autre part, votre réponse m'a incité à lire le fichier template.php de mon modèle (enfant zen), ce qui m'a amené à la réponse finale.
Epersonae
7

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.

Camsoft
la source
hook_init () s'exécute à chaque chargement de page, et souvent plusieurs fois (AHAH), pourquoi ne pas utiliser hook_preprocess_node () (dans le thème ou dans un module) qui ne s'exécute que lorsqu'un nœud est rendu?
Déchiffrer
Bon point, je ne savais pas que init était chargé plusieurs fois.
Camsoft
Déchiffrer, j'ai corrigé mon exemple pour utiliser la fonction de prétraitement. Encore à apprendre!
Camsoft
Ensuite, la question suivante serait de savoir pourquoi utiliser arg (1) pour le nid lorsque les variables de nœud sont passées via $ vars :) Ce qui conduirait ensuite à la question suivante: en quoi est-ce différent de ma réponse: p
Decipher
J'imagine que j'aurais dû lire la documentation de hook_preprocess_node (). Vous avez absolument raison. epersonae, je vous suggère d'accepter la réponse de Decipher.
Camsoft
7

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");
  }
}
kiamlaluno
la source
5

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).

Paul Jones
la source
3

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.

Druvision
la source
2

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.

Pierre de guerre
la source
2

/ * 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
}
tal
la source
2

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.

mixerowsky
la source
Le dernier morceau de code est ce dont j'avais besoin. Et ça marche, c’est-à-dire après avoir enlevé les feuilles de style [all] [] = css / front.css de mon theme.info - Je suppose que j’ai supposé à tort que nous avions besoin de l’avoir avec les feuilles de style [all] [] = css / styles .css. J'étais aussi inquiet que parce que je remplace page.tpl.php avec page - front.tpl.php, cela pourrait ne pas fonctionner, mais tout semble bien tenir le coup. C'est vraiment utile. Merci!
Sd1
Juste pour s'assurer que tout le monde a cette solution; Assurez-vous de supprimer styles.css (valeur par défaut) et front.css de votre fichier theme.info. Videz toutes les caches et ça devrait être bon.
Sd1
1

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.

Alexander Hripak
la source
Et bien sûr, vous devez qualifier vos sélecteurs en fonction des attributs du nœud, à savoir nid, type de nœud, etc.
Alexander Hripak
Le problème avec cette approche est que cela affectera toutes les pages du site avec le css ajouté ici
pal4life
1

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.

août
la source
0

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

Markus Zerres
la source
Bienvenue sur Drupal Answers! Cette réponse a déjà été fournie ci-dessus par Dave Reid.
Kojo