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

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

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.

Sie können sich das Modul Code per Node ansehen . Es wird auch in diesem Blog-Beitrag vorgestellt .

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.

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.

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.

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

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

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.

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.

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

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.

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.

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

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