Du hast eine Drupal Site und möchtest auf einer oder mehreren Seiten zusätzliches CSS und JavaScript hinzufügen? Du willst oder kannst keine Änderungen an den Dateien des Themes vornehmen?
Dann benötigst du das Asset Injector Modul! Es ermöglicht auf einfache Weise CSS Anweisungen und JavaScript Befehle im Browser hinzuzufügen. Der Geltungsbereich kann über Regeln definiert werden.
Installation
Auf der Projektseite https://www.drupal.org/project/asset_injector kannst du das Modul herunterladen und installieren. Du kannst auch einfach den Link zum tar.gz Paket per Rechtsklick kopieren und unter dem Menüpunkt Neues Modul installieren einfügen. Nach einem Klick auf den Installieren Button lädt Drupal die Datei selbst und installiert es.
Projektseite https://www.drupal.org/project/asset_injector
Anschliessend musst du das Modul unter dem Menüpunkt Erweitern aktivieren.
Berechtigungen
Unter [Domain]/admin/people/permissions#module-asset_injector kannst du die Berechtigung für die Nutzung des Moduls an die entsprechenden Rollen geben. Die Administrator Rolle erhält standardmässig das Nutzungsrecht.
Berechtigungen setzen
Vorgehensweise
Die CSS Befehle lassen sich entweder global über das aktive Theme setzen oder über einzelne "Injectoren".
Globales, individuelles CSS
Wenn du beispielsweise auf der ganzen Website alle Überschriften zweiter Ordnung <h2> in einer anderen Farbe darstellen willst, so ist die einfachste Möglichkeit unter Design -> Installiertes Theme - Einstellungen den notwendigen CSS Befehl hinzuzufügen. In diesem Bereich hast du auch eine Vorschau deiner Änderungen und du kannst dir jede einzelne Seite auf deiner Website ansehen.
Benutzerdefiniertes CSS im aktiven Theme mit Vorschau
Regelbasiertes, individuelles CSS und JavaScript
Die regelbasierte Variante unter Konfiguration -> Entwicklung -> Asset Injector erlaubt das Anlegen von "Assets", also beispielsweise CSS Befehle, die nur bei bestimmten Inhaltstypen, auf einzeln angebenden Seiten, bei bestimmten Benutzerrollen, usw. aktiv werden.
Regelbasiertes CSS-Asset
CSS-Asset Liste
Mit JavaScript Assets funktioniert das genau so.
Regelbasiertes JS-Asset.
Fazit
Für schnelle Änderungen ist dieses Modul wirklich gut :) Ich habe es des öfteren für Landing-Pages benutzt auf denen besondere JavaScript Effekte und aufwendige CSS Änderungen erscheinen sollten. Es ist erheblich einfacher und vor allem schneller als die Erstellung eines Sub-Themes. Ausserdem sind gerade die CSS Änderungen per Browser (mit Vorschau) sehr einfach , auch von "Nicht Programmierern" erstellbar.
Die Assets werden in der Datenbank abgespeichert, lassen sich wieder löschen und so kommt man nicht durcheinander!
tl;dr: Mit dem Asset Injector Modul kannst du an beliebigen Stellen deiner Drupal Site auf sehr einfache Art CSS und JavaScript Befehle einfügen.
Posted from my blog with SteemPress : https://blog.novatrend.ch/2020/03/23/custom-css-und-javascript-in-drupal/