Die Ausnahme von der Regel: wer kennt nicht den Kundenwunsch, einen bestimmten Bereich der Website optisch leicht zu verändern. Etwas weniger Titelabstand auf Seite A, eine andere Hintergrundfarbe auf Seite B. Hier hilft das kleine, aber leistungsfähige Modul CSS Injector.

CSS Injector ist eines der Module, das ich durch Backdrop CMS überhaupt erst kennengelernt habe. Inzwischen habe ich es aber auch auf älteren Drupal-7-Sites installiert. Denn gerade wenn man Wert auf eine saubere CSS-Struktur legt, erweisen sich kleinste Anpassungen an einer bestimmten Stelle oft als sehr aufwändig.

"Wir geben jedem Bereich eine eigene Farbe"

Es ist irgendwie nicht totzukriegen – das gute alte Farbkonzept. Es ist der Klassiker bei Konkurrenzpräsentationen: der «Art Director» schlägt vor, die Unternehmensbereiche doch zwecks Unterscheidbarkeit farblich zu kennzeichnen.

Das kommt beim Kunden immer gut an. Dass Bereichsfarben eine sehr anbieterorientierte Sicht der Dinge sind, ist die eine Seite. Vor allem aber fallen Farbkonzepte im UX-Test fast immer durch, sie werden schlicht nicht erkannt und sorgen für optische Unruhe. Irgendwann kommt dann noch die Frage auf, wie man bereichsübergreifende Themen (wie etwa Kundensupport) digital bepinseln soll, respektive die Marketingabteilung muss sich halt etwas einfallen lassen ;-)

Nun, mit CSS Injector wird die Sache zumindest technisch deutlich vereinfacht. Das Modul erlaubt nämlich, beliebige CSS-Definitionen nur auf bestimmten Seiten anzuwenden. Diese werden in klassischer Backdrop-Manier per Node-ID (node/123) oder URL (architektur/*) definiert. So konnte ich kürzlich ein reines Migrationsprojekt aus Contao CMS problemlos in Backdrop CMS überführen, obwohl nicht weniger als fünf Unternehmensbereiche separate Titel- und Linkfarben haben.

Die schnellste Methode für kleine CSS-Anpassungen

Ebenso wertvolle Dienste hat mir CSS Injector diese Woche auf einer älteren Site geleistet, wo ich den FTP-Zugang zum externen Kundenserver gar nicht mehr griffbereit hatte. Die Site ist zudem mit dem 'alten' LESS-CSS programmiert, das ich auf meinem aktuellen Rechner gar nicht mehr installiert habe. Doch mit CSS Injector ist das Problem in kürzester Zeit gelöst, der kleine Darstellungsfehler für alle <h2> im Footer-Block behoben.

Kein Einfluss auf die Ladegeschwindigkeit

Mit Injector CSS lassen sich im Prinzip komplette Sites themen. Doch natürlich macht das wenig Sinn. Die Stärke des Moduls liegt in kleinen und oft nachträglichen Anpassungen, ein sauberer CSS-Aufbau im Theme ist nach wie vor nötig. Sehr elegant ist auch die Option, die definierten CSS-Zeilen vor der Seitenausgabe ins Preprocess-CSS zu übergeben. Das vermindert unnötige Datenbank-Abfragen und längere Ladenzeiten, denn die Anpassungen werden direkt ins komprimierte Seiten-CSS übernommen.