Custom CSS und JavaScript in Drupal

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.

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.

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.

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.

Mit JavaScript Assets funktioniert das genau so.

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.