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.
Kommentare
Olafski
Weitere Nutzungsart
Mo., 26.10.2020 - 23:04Bisher nutze ich CSS Injector eher selten für ästhetische Design-Anpassungen. Soweit es geht, ziehe ich dafür das eigene Sub-Theme vor. In manchen Fällen ist das allerdings nicht ganz einfach. So habe ich neulich festgestellt, dass das body-Element meiner Backdrop-Website keine HTML-Klassen für Taxonomie-Begriffe enthält. Das hat mich dazu bewogen, das Drupal-Modul Term Body Class für Backdrop zu portieren.
Wozu also nutze ich CSS Injector stattdessen? Zur Verbesserung der Usability in der Backdrop-Verwaltungsoberfläche. Das mitgelieferte Seven-Theme gefällt mir im Grunde sehr gut, doch natürlich hat es ein paar Schwächen. Hinzu kommen bisweilen individuelle Anforderungen, z.B. zur optischen Gruppierung von Schlagwörtern in Beitragsformularen. Solche Dinge lassen sich hervorragend mit ein paar Zeilen CSS beheben bzw. erreichen. Ein Sub-Theme für Seven wäre mir 'too much', ergo CSS Injector.
Martin Loretz
Für mich das Schweizer Taschenmesser
Di., 27.10.2020 - 11:28Das Modul kann vielfältig eingesetzt werden. Ich benutze den CSS Injector meist nur für kleinere Anpassungen bei älteren Seiten oder für zeitlich befristete Eingriffe. So kann ich leicht und schnell Anpassungen vornehmen ohne das Theme zu berühren. Das Modul ist für mich wie ein Element eines Schweizer Taschenmessers. Wenn ich aber plane einen Baum zu fällen, dann lege ich das Messer beiseite und nehme dafür die Säge. So ähnlich verhält es sich bei mir mit dem CSS-Injector.
In Bezug auf Seven bin ich noch gar nicht auf die Idee gekommen den CSS Injector einzusetzen. Allerdings gefällt mir Seven sowieso nicht so sehr. Gerne hätte ich eine Alternative. Dann bietet sich eben doch eher ein anderes Theme oder Subtheme an. Für mich also eher die Säge als das Taschenmesser.
Daher spiele ich im Moment ein wenig mit einem eigenen Subtheme für Seven herum und lasse mich dabei ein wenig von Adminimal inspirieren. Vielleicht wird daraus mal was.
Auf der anderen Seite ist das spannende, dass ich mit CSS Injector Anpassungen über den Geltungsbereich eines Themes hinaus vornehmen kann. Da bin ich irgendwie erst jetzt darauf gekommen.
Man lernt halt nie aus.
Olafski
Seven-Subtheme
Di., 27.10.2020 - 11:51Auf das Subtheme für Seven bin ich gespannt!