web-dev-qa-db-fra.com

Est-il possible d'ajouter du CSS pour une seule page / nœud?

Je nettoie mes grandes feuilles de style folles (peut-être pertinentes pour une future question) et je me demande la meilleure façon 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 elle a un tas de styles différents. À l'heure actuelle, le CSS est simplement inclus avec la feuille de style du thème principal.

Existe-t-il un moyen de dire "s'il s'agit du nœud Foo, alors ajoutez foo.css"? CSS Injector est-ce que je recherche?

Je pourrait être intéressé à généraliser cela à d'autres nœuds/sections/etc, mais pour le moment je veux juste gérer cet élément.

Ce que j'ai fini par faire.

J'utilise un sous-thème Zen et j'ai découvert en lisant réellement template.php qu'il y avait du 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 Zen template.php, FWIW.)

7themingpanels
79
epersonae

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.

69
Decipher

Vous pouvez jeter un œil au module Code per Node . Il est également présenté dans ce article de blog .

25
rakke

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

Contexte:

Le contexte vous permet de gérer les conditions et réactions contextuelles pour 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 qui devraient réagir à ce contexte actif.

Considérez les conditions comme un ensemble de règles qui sont vérifiées pendant le chargement de la page pour voir quel contexte est actif. Toutes les réactions associées à des contextes actifs sont alors déclenchées.

Contexte Ajouter des actifs:

Les ajouts de contexte vous permettent 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 ctools, tout cela est également exportable.

16
budda

Si c'est une petite quantité de CSS, envisagez peut-être de faire vos sélecteurs CSS en fonction du 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 pour Drupal 6 fournit des classes CSS de corps similaires.

13
Dave Reid

Si les critères pour lesquels l'ajout d'un style CSS dépend de certaines propriétés d'un nœud, alors j'implémenterais MYTHEME_preprocess_node(&$variables); l'une des valeurs transmises à la fonction est $variables['node'] (pour remarquer que ce n'est pas $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, alors j'implémenterai MYTHEME_preprocess_page(&$variables); $variables['node'] Contient un objet nœud, si la page affichée est une page nœud. Dans Drupal 6, la fonction de processus 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 première page, vous devez utiliser drupal_is_front_page().

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

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 du 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 qui contient le fichier css.

7
Camsoft

Pour une manière basée sur l'administrateur de le faire, je regarderais le module CSS . Il ajoute un champ où vous pouvez ajouter [~ # ~] css [~ # ~] au node/add et node/edit pages.

CSS:

Le module CSS ajoute, pour les utilisateurs disposant de suffisamment d'autorisations 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 façon, les utilisateurs expérimentés CSS peuvent créer une conception basée sur 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 qui ont cette autorisation peuvent casser la conception de votre site et introduire également des problèmes de sécurité (XSS).

5
Paul Jones

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 à PHP ou fichiers INFO. Les installations 15777 ne peuvent pas être erronées - c'est une preuve sociale que ce module fonctionne. Le CSS est également mis en cache avec le système de mise en cache normal.

3
Druvision

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

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 le 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 devez supprimer "styles.css" de la première page, combinez simplement ces deux codes.

Supposons que vous ayez besoin de "front.css" sans "styles.css" sur la première page 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']);
  } 
}

Remplacez également "mytheme".

J'espère que cela vous sera utile.

2
mixerowsky

Étant donné que vous utilisez déjà des panneaux, il peut être plus facile d'ajouter simplement votre 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 est en D7, il se peut donc que cette approche soit mieux prise en charge par les panneaux que dans les versions précédentes.

2
Warpstone

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

Supposons que votre feuille de style se trouve dans css/foo.css.

Voici à quoi ressemblerait votre fichier theme_name.info:

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

Ensuite, vous bénéficiez de la mise en cache avec les feuilles de style principales, et comme je suppose que c'est pour votre page d'accueil, cela aurait du sens.

1
Alexander Hripak

Outre l'approche Drupal, lorsque vous n'avez besoin que d'un court morceau de CSS à l'intérieur de votre corps HTML5, vous avez l'attribut de portée CSS. Voir https://stackoverflow.com/a/ 4607092/195812

Cette solution vous évitera de modifier le code et d'installer plus de modules

1
augusto

Vous pouvez imprimer le nœud de page dans la balise body

<body page-node-26419 ...>

Ensuite, vous pouvez restreindre

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

Ceci est utile pour les changements rapides mineurs

0
Markus Zerres