Joomla: Backendtemplate Atum, Hintergrundfarbe Header (user.css anlegen/verwenden)

Von fast allen Joomla-Seiten, die ich in der Mache habe, erstelle ich im Laufe des Workouts mehrere Installationen. Beispielsweise ein Demo für Kunden, eine Arbeitsseite für mich, eine 1:1-Kopie der Originalseite, eine "Spielwiese" für Kunden usw. usf. Wenn ich nun zwischen den Seiten wechsele, habe ich gerne den Kopfbereich unterschiedlich deutlich gefärbt, weil man gerne mal durcheinander kommt.

Mal so richtig roter Atum-Header?
Mal so richtig roter Atum-Header?

Grün für "Hier darfst rumfuhrwerken", Rot für "Achtung Arbeitsseite", Blau für "Originalseite", ach, was weiß ich. In Joomla 3 ging das noch einfach. Ab Joomla 4 gibt es nur noch eine merkwürdige Hue-Einstellung im Atum-Template, die, um es so zu sagen, zu wenig deutlichen "Signal-Farben" führt; eher zu Matsch-Farben. Vom Aspekt der Barrierefreiheit hat das vermutlich seine Berechtigung. Aber so was wie einen kräftigen Rot-Ton bekommt man meines Erachtens damit nicht hin und falls doch, dann nur mit Gefrickel, das mir zu doof ist.

Hier geht es nicht um Ästhetik und HübschHübscherEtepetete-Aspekte, sondern ich will für meine Arbeit knallige, deutliche Farben. Wurst, ob die in das Farbschema passen. Deshalb färbe ich auch nur einen Teilbereich um, der in das Auge sticht.

Was tun?

  • Gehe im Joomla-Menü nach System > Templates > Administrator Templates. Du landest im Bereich mit Überschrift "Templates: Templates (Administrator)".
  • Klicke auf den Link Atum – Details und Dateien. Du landest im Joomla-Templateeditor.

Schritt 1: Prüfen, ob user.css schon angelegt ist

  • Sehe in der Dateienübersicht im Ordner /media/templates/administrator/atum/css/ nach, ob die Datei user.css darin schon angelegt ist. Im folgenden Bild ist das nicht der Fall.
  • Falls sie noch nicht existiert, fahre fort mit Überschrift "Schritt 2".
  • Falls sie bereits existiert, fahre fort mit Überschrift "Schritt 3".
Wurde die Datei user.css im Atumn-Template schon angelegt? Hier nein.

Schritt 2: user.css im richtigen Ordner neu anlegen

  • Klicke im Templateeditor auf den Knopf Neue Datei.
  • Im aufgehenden PopUp, von Nerds auch "Modal" genannt, siehst du den Ordnerbaum, also klickbare Links/Anker, die dir die relevanten Verzeichnisse anzeigen und wo du den Zielordner aktivieren kannst.
  • Klicke zuerst auf den Ordner css, unterhalb Verzeichnispfad /media/templates/administrator/atum/. css sollte dann markiert sein. Das ist wichtig, sonst geht die neue Datei sonstwo rein (im Bild unten (1)).
  • Gebe im Feld "Dateiname" user ein. Also ohne Dateiendung .css (im Bild unten (2)).
  • Wähle dann im Listenfeld "Dateityp" die Endung .css aus (im Bild unten (3)).
  • Klicke Knopf Erstellen (im Bild unten (4)).
Vier Schritte zum Anlegen einer neuen Datei im Ordner /css/.

Das PopUp schließt und du bist wieder in der normalen Templateeditoransicht.

Unter Überschrift "Schritt 1" oben wurde erzählt, wie du nun prüfen kannst, ob die Datei korrekt angelegt wurde.

Schritt 3: CSS-Code in user.css für eigene Farbe eintragen

Ich mag mal einen roten Header-Bereich.

  • Klicke im Dateibaum des Templateeditors auf den Ordner css, unterhalb Verzeichnispfad /media/templates/administrator/atum/, um ihn aufzuklappen, falls noch nicht der Fall.
  • Klicke die Datei user.css an, um einen Datei-Editor mit Überschrift "Datei „‎/media/templates/administrator/atum/css/user.css“ im Template „atum“ bearbeiten" zu sehen.
  • Gebe nun in den Dateieditor beispielsweise ein
.header {
  background: red !important;
}

Das !important in Zeile 2, das man generell in CSS nicht zu üppig verwenden sollte, wird meist gar nicht nötig sein. Trotzdem manifestiert es meinen Farbwunsch etwas strenger. Wie es beliebt...

Natürlich kann man in Zeile 2 beliebige Farbcodes (wie in CSS-Codes üblich) eingeben. Ich verwende bspw. gerne vordefinierte CSS-Variablen, wie --danger für ein Rot.

.header {
  background: var(--danger) !important;
}
  • Speichere die Datei (vergisst man gerne mal) mittels Button "Speichern".

Wenn man CSS-Variablen benützen mag

Weitere zum Zeitpunkt des Schreibens vordefinierte CSS-Variablen im Atum-Template (neben vielen weiteren die man mit einem Browser-Inspektor entdecken kann):

--primary: #132f53;
--secondary: #495057;
--success: #457d54;
--info: #2a69b8;
--warning: #ffb514;
--danger: #c52827;
--light: #f8f9fa;
--dark: #212529;
--action: #132f53;
--error: #3b0d0c;
Ein Ausschnitt der vordefinierten CSS-Variablen im Joomla5-Atum-Template.