Gibt es eine Möglichkeit, CSS für eine einzelne Seite / einen einzelnen Knoten hinzuzufügen?

79

Ich bereinige meine großen verrückten Stylesheets (möglicherweise relevant für eine zukünftige Frage) und frage mich, wie ich einem bestimmten Knoten oder einer bestimmten Seite am besten benutzerdefiniertes CSS hinzufügen kann.

Insbesondere ist die Startseite meiner Arbeitswebsite eine Bedienfeldseite und weist eine Reihe unterschiedlicher Stile auf. Momentan ist das CSS nur im Stylesheet des Hauptthemas enthalten.

Gibt es eine Möglichkeit zu sagen: "Wenn dies der Knoten Foo ist, dann foo.css hinzufügen"? Ist CSS Injector das, wonach ich suche?

Ich könnte daran interessiert sein, dies auf andere Knoten / Abschnitte / usw. zu verallgemeinern, aber im Moment möchte ich nur diesen einen Punkt behandeln.

Was ich letztendlich gemacht habe.

Ich verwende ein Zen-Unterthema und habe beim Lesen von template.php festgestellt, dass es einen auskommentierten Code zum Einfügen von bedingten Stylesheets gibt. Der folgende Code hat genau das getan, was ich brauchte:

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

(Zeile 80 in einer Standard-Zen-template.php-Datei, FWIW.)

epersonae
quelle
erstellen page--front.tpl.phpundpage.tpl.php
M ama D

Antworten:

69

Das ist die Art von Dingen, die ich mit Code machen würde, aber das ist, weil ich nur so spiele.

In der template.php wollen Sie etwas wie:

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

Ersetzen Sie foo durch Werte, die sich auf Ihren eigenen Code beziehen.

Entziffern
quelle
Würden Sie also für die Homepage if(drupal_is_front_page()) {anstelle von verwenden if(drupal_get_path_alias [etc]?
epersonae
Ja, die Bedingungen liegen ganz bei Ihnen. Sie könnten einfach eine $vars['#node']->nid == $nidÜberprüfung durchführen, wenn Sie wollten.
entschlüsseln
8
Dechiffriere, kann keinen Fehler in deinem Code finden. Aber ich hoffe, es macht Ihnen nichts aus, darauf hinzuweisen, dass die Art und Weise, wie Sie eine Rolle spielen, die Art und Weise ist, wie Sie eine Rolle spielen, es sei denn, Sie sprechen über die Drupal-Berechtigungskonfiguration. ;-)
Medden
2
Zu Ihrer Information, ich verwende Drupal 7 und habe festgestellt, dass ich $vars['elements']['#node']->nidstattdessen in der Alias-Suche verwenden muss. Es gibt keine #nodeWurzel in varsder neuesten Version von Drupal 7, so wie es aussieht.
Wes Johnson
Sollte es keine Funktion vor MYTHEME__preprocess_node ($ vars) haben? Ich sehe den gesamten Code dort nur in Bezug auf Funktionen.
pal4life
16

Erstellen Sie einen Kontext für Ihre Seite / Ihren Abschnitt und laden Sie dann mit dem Modul " Kontext-Assets" CSS und / oder Javascript für den angegebenen Kontext.

Kontext:

Mit Context können Sie kontextbezogene Bedingungen und Reaktionen für verschiedene Bereiche Ihrer Website verwalten. Sie können sich jeden Kontext als einen "Abschnitt" Ihrer Site vorstellen. Für jeden Kontext können Sie die Bedingungen auswählen, unter denen dieser Kontext aktiv sein soll, und verschiedene Aspekte von Drupal auswählen, die auf diesen aktiven Kontext reagieren sollen.

Stellen Sie sich Bedingungen als eine Reihe von Regeln vor, die beim Laden der Seite überprüft werden, um festzustellen, welcher Kontext aktiv ist. Alle Reaktionen, die mit aktiven Kontexten verbunden sind, werden dann ausgelöst.

Kontext Assets hinzufügen:

Mit der Option "Assets im Kontext hinzufügen" können Sie dies tun. Die Benutzeroberfläche ist einfach zu bedienen, damit Sie dies alles tun können, ohne Code schreiben zu müssen. Da ctools verwendet wird, ist dies alles auch exportierbar.

budda
quelle
Ich benutze Context Add Assets in praktisch jeder Website, die ich mache - wenn Ihr Zugang zu Context (der jeden Abschnitt meiner Builds antreibt) Add Assets perfekt ist!
Electblake
13

Wenn es sich um eine kleine Menge CSS handelt, können Sie Ihre CSS-Selektoren auf der Grundlage des Knotens erstellen und die CSS in das CSS Ihres Themas einbeziehen. Drupal 7 enthält den Selektor body.page-node-NODEID, und Zen für Drupal 6 enthält ähnliche Body-CSS-Klassen.

Dave Reid
quelle
das ist im Grunde , was ich war zu tun ... und es ist fast 200 Zeilen, so schien es wie eine gute Idee , sich an anderer Stelle zu bewegen. (Ja, es sollte wahrscheinlich kürzer sein. Das kann ein separater Schritt sein.)
epersonae
Andererseits hat mich Ihre Antwort dazu inspiriert, die template.php in meiner (Zen-Kind-) Vorlage zu lesen, wodurch ich zur endgültigen Antwort gelangte.
Epersonae
7

Sie können ein benutzerdefiniertes Modul erstellen und hook_preprocess_node () verwenden, um Stylesheets basierend auf der Knoten-ID selektiv zu laden.

Hier ist ein Beispiel:

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

Ersetzen Sie MYMODULE durch den Namen Ihres Moduls und MYTHEME durch den Namen des Themas, das die CSS-Datei enthält.

Camsoft
quelle
hook_init () wird bei jedem Seitenaufruf ausgeführt, und oft mehrmals (AHAH). Verwenden Sie hook_preprocess_node () (entweder im Design oder in einem Modul), das nur ausgeführt wird, wenn ein Knoten gerendert wird.
entziffern
Guter Punkt, wusste nicht, dass init mehrfach geladen wurde.
Camsoft
Decipher, ich habe mein Beispiel korrigiert, um die Vorverarbeitungsfunktion zu verwenden. Ich lerne immernoch!
Camsoft
Dann wäre die nächste Frage, warum arg (1) für die nid verwendet wird, wenn die Knotenvariablen durch $ vars geleitet werden :) Was dann zur nächsten Frage führen würde, wie sich dies von meiner Antwort unterscheidet: p
Decipher
Ich denke, ich hätte die hook_preprocess_node () - Dokumentation lesen sollen. Du hast absolut recht. epersonae, ich schlage vor, Sie akzeptieren die Antwort von Decipher.
Camsoft
7

Wenn die Kriterien für das Hinzufügen eines CSS-Stils von einigen Eigenschaften eines Knotens abhängen, würde ich implementieren MYTHEME_preprocess_node(&$variables); Einer der an die Funktion übergebenen Werte ist $variables['node'](um zu bemerken, dass dies nicht der Fall ist $variables['#node']).

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

Wenn die Kriterien nicht von Knoteneigenschaften abhängen, würde ich implementieren MYTHEME_preprocess_page(&$variables); $variables['node']enthält ein Knotenobjekt, wenn die angezeigte Seite eine Knotenseite ist. In Drupal 6 erhält die Prozessfunktion ebenfalls $variables['is_front'], aber in Drupal 7 wird dieselbe Variable nicht übergeben. Wenn Sie wissen möchten, ob die Seite die Titelseite ist, müssen Sie verwenden drupal_is_front_page().

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

Für einen Admin-basierten Weg würde ich das CSS- Modul betrachten. Es wird ein Feld hinzugefügt, in dem Sie den Seiten und CSS hinzufügen können .node/addnode/edit

CSS:

Das CSS-Modul fügt für Benutzer mit ausreichenden Berechtigungen und aktivierten Knoten ein CSS-Feld auf der Seite zum Erstellen von Knoten hinzu.

Benutzer können CSS-Regeln in das Feld des CSS-Knotens einfügen und diese Regeln werden in der Knotenansicht analysiert.

Auf diese Weise können CSS-erfahrene Benutzer ein komplexes CSS-basiertes Design für Knoteninhalte erstellen.

Wichtig: Beachten Sie, dass die CSS-Bearbeitungsberechtigungen nur vertrauenswürdigen Benutzern (Administratoren) erteilt werden sollten. Böswillige Benutzer, die über diese Berechtigung verfügen, haben möglicherweise das Design Ihrer Website beschädigt und führen zu Sicherheitsproblemen (XSS).

Paul Jones
quelle
3

CodePerNode ist großartig, aber CSS Injector ist einfacher zu installieren (keine Bibliotheken erforderlich). Das Modul ermöglicht es dem Content Manager, CSS dynamisch zu bestimmten Seiten hinzuzufügen, ohne PHP-Code oder INFO-Dateien zu berühren. 15777-Installationen können nicht falsch sein - dies ist ein sozialer Beweis, dass dieses Modul funktioniert. Das CSS wird auch mit dem regulären Cachesystem zwischengespeichert.

Druvision
quelle
2

Da Sie bereits Panels verwenden, ist es möglicherweise einfacher, Ihr CSS als Panel-Stil für jede Region Ihres Homepage-Panels hinzuzufügen. Dort können Sie benutzerdefinierte Markups definieren und auf Ihrer Website wiederverwenden.

Sie können auch einfach zum Abschnitt Allgemein der Seitenmanager-Variantenregel für Ihre Homepage gehen. Hier finden Sie einen Abschnitt zum Hinzufügen von CSS-IDs und -Regeln nur für das aktuelle Bedienfeld.

Hinweis: Dies ist alles in D7, daher wird dieser Ansatz möglicherweise von Panels besser unterstützt als in früheren Versionen.

Warpstone
quelle
2

/ * Ein Beispiel für das Hinzufügen von CSS mithilfe des Bartik-Themas basierend auf dem Inhaltstyp * /

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
quelle
2

Versuchen Sie dies in Ihre 'template.php' Datei einzufügen:

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

Ersetzen Sie "mytheme" durch den Namen Ihres Themenverzeichnisses und "/css/front.css" durch den Pfad, in dem sich Ihre CSS-Datei befindet.

Wenn Sie die 'front.css'-Datei von anderen Seiten entfernen möchten, fügen Sie sie zu' template.php 'hinzu:

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

Ersetzen Sie 'mytheme' erneut durch den Namen Ihres Themenverzeichnisses.

Wenn Sie 'styles.css' von der Startseite aus deaktivieren müssen, kombinieren Sie einfach diese beiden Codes.

Nehmen wir an, Sie benötigen auf der Startseite "front.css" ohne "styles.css" und auf allen anderen Seiten "style.css" ohne "front.css". Code sieht ungefähr so ​​aus:

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

Ersetzen Sie auch "Mythem".

Ich hoffe das wird hilfreich sein.

mixerowsky
quelle
Der letzte Code ist das, was ich brauchte. Und es funktioniert, dh nachdem ich Stylesheets [all] [] = css / front.css aus meinem theme.info entfernt habe - ich glaube, ich habe fälschlicherweise angenommen, dass wir das zusammen mit Stylesheets [all] [] = css / styles brauchen CSS. Ich war auch besorgt, weil ich page.tpl.php mit page - front.tpl.php überschreibe, könnte es nicht funktionieren, aber alles scheint gut zu funktionieren. Das ist wirklich hilfreich. Vielen Dank!
Sd1
Nur um sicherzustellen, dass jeder diese Lösung bekommt; Stellen Sie sicher, dass Sie styles.css (Standardeinstellung) und front.css aus Ihrer theme.info-Datei entfernen. Leeren Sie alle Caches und es sollte gut gehen.
Sd1
1

Ich hätte das Berühren von template.php übersprungen und nur ein weiteres Element in die .info-Datei Ihres Themas eingefügt

Angenommen, Ihr Stylesheet ist in css/foo.css.

So würde Ihre theme_name.info-Datei aussehen:

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

Dann profitieren Sie davon, dass es mit den wichtigsten Stylesheets zwischengespeichert wird, und da ich davon ausgehe, dass dies für Ihre Homepage gilt, ist es sinnvoll.

Alexander Hripak
quelle
Und natürlich müssten Sie Ihre Selektoren basierend auf den Attributen des Knotens, dh nid, Knotentyp usw., qualifizieren
Alexander Hripak,
Das Problem bei diesem Ansatz ist, dass alle Seiten auf der Website betroffen sind, auf denen die
CSS-Datei
1

Abgesehen vom Drupal-Ansatz haben Sie, wenn Sie nur ein kurzes Stück CSS in Ihrem HTML5-Körper benötigen, das CSS-Scoped-Attribut. Siehe https://stackoverflow.com/a/4607092/195812

Diese Lösung erspart Ihnen das Bearbeiten von Code und das Installieren weiterer Module

Augusto
quelle
0

Sie können den Seitenknoten im Body-Tag drucken

<body page-node-26419 ...>

Dann kannst du einschränken

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

Dies ist nützlich für kleinere schnelle Änderungen

Markus Zerres
quelle
Willkommen bei Drupal Answers! Diese Antwort wurde bereits oben von Dave Reid gegeben.
Kojo