README

Bringt die Farbgebung des Contao-4.13-Backends nach Contao 5 — und zwar umschaltbar je Benutzer: Wer die alten Farben möchte, setzt in seinem Profil ein Häkchen, alle anderen behalten das Aussehen von Contao 5.

Was die Erweiterung ändert

Contao 5 legt seine Backend-Farben durchgängig in CSS-Variablen ab — außerhalb der Variablen-Datei steht im Theme kein einziger fester Farbwert mehr. Die Erweiterung lädt nach dem Theme ein zusätzliches Stylesheet, das diese Variablen mit den Werten aus system/themes/flexible/main.css und basic.css von Contao 4.13 überschreibt:

Bereich	Contao 5	Contao 4.13
Kopfzeile	`#ffffff`	`#f47c00` mit weißer Schrift
Kopfzeile beim Überfahren	heller	`#e87600`
Navigationsspalte	wie der Arbeitsbereich	`#0f1c26`, Versionshinweis `#172b3b`
Arbeitsbereich	`#f6f6f8`	`#eaeaec`
Rahmen außerhalb der Backendbreite	wie der Arbeitsbereich	`#cfcfd3`
Grün / Rot / Blau	`#49840b` / `#c7241f` / `#006494`	`#589b0e` / `#cc3333` / `#006494`
Listenzeilen	`#ffffff` / `#f9f9fb`	`#ffffff` / `#fafafc`
Formularrahmen	`#bbbbbd`	`#aaaaaa`
Verweis beim Überfahren	orange	blau
Abgerundete Ecken	6px und 12px	2px an Eingabefeldern, sonst keine

Es wird also die Farbgebung übertragen, nicht das Stylesheet von Contao 4.13 selbst. Dessen Regeln setzen eine andere Seitenstruktur voraus (#header .inner, feste Spaltenbreiten) und würden das Backend von Contao 5 zerlegen statt es umzufärben.

Maximale Backendbreite

Im Benutzerprofil lässt sich unter Theme-Einstellungen eine maximale Breite für das Backend einstellen (1280, 1440 oder 1920 Pixel). Contao 5 zieht die Kopfzeile trotzdem über die volle Fensterbreite und begrenzt nur den Inhalt darin. Contao 4.13 hat es umgekehrt gemacht: Das Orange endete an derselben Kante wie der Inhalt, und außen herum lag ein dunkleres Grau. Genau dieses Bild stellt die Erweiterung wieder her — ohne Breitenbegrenzung läuft wie gewohnt alles über die volle Breite.

Dunkle Navigationsspalte

Die dunkle Spalte ist seit Fassung 1.1.0 enthalten. Möglich wird sie dadurch, dass Contao 5 für seinen dunklen Modus von jedem Symbol eine zweite, hell gezeichnete Fassung mitbringt (content--dark.svg und so weiter). Deren Strichfarbe #9fa4a8 ist genau die Gruppenfarbe von Contao 4.13, sodass die Erweiterung für die Navigation einfach darauf verweisen kann.

Für die Kopfzeile reicht das nicht: Dort sind die hellen Fassungen mit #ddd auf den Nachtmodus abgestimmt und wirken auf dem kräftigen Orange grau. Unter src/Resources/public/icons/ liegen deshalb rein weiße Fassungen — die Formen unverändert aus Contao 5 übernommen, geändert ist nur die Strichfarbe. Im selben Verzeichnis liegt das Logo von Contao 4.13, das ohne die weiße Kachel auskommt, die Contao 5 für seine helle Kopfzeile braucht.

Dunkler Modus

Contao 5 kennt einen dunklen Modus und folgt dabei standardmäßig der Einstellung des Betriebssystems. Contao 4.13 kannte ihn nicht. Ein kleines mitgeliefertes Skript hält das Backend deshalb im hellen Farbschema fest, solange die 4.13-Farben eingeschaltet sind; der Umschalter im Menü der Kopfzeile wird ausgeblendet, weil er ohne Wirkung bliebe. Wer den dunklen Modus nutzen möchte, nimmt im Profil das Häkchen wieder heraus.

Nicht eingefärbt wird die Anmeldeseite: Das Stylesheet hängt an der Einstellung des jeweiligen Benutzerkontos, und die steht vor der Anmeldung noch nicht fest.

Installation

composer require schachbulle/contao-design413-bundle

Danach die Datenbank aktualisieren, damit das Feld im Benutzerprofil angelegt wird:

vendor/bin/contao-console contao:migrate

Benutzung

Im Backend unter Benutzerverwaltung → Benutzer bearbeiten oder im eigenen Profil (oben rechts über den Benutzernamen) findet sich in der Gruppe Theme-Einstellungen der Schalter „Farben von Contao 4.13". Er wirkt sofort nach dem Speichern und gilt nur für das jeweilige Benutzerkonto.

Voraussetzungen

PHP 8.1 oder neuer
Contao 5.0 oder neuer

Für Contao 4.13 gibt es die Erweiterung bewusst nicht — dort sind diese Farben bereits der Auslieferungszustand.

Technische Hinweise

Contao bietet mit contao.backend.custom_css einen offiziellen Weg, eigene Stylesheets ins Backend zu laden. Der gilt aber für alle Benutzer gleichermaßen. Für die benutzerbezogene Umschaltung hängt sich die Erweiterung deshalb an kernel.request und trägt Stylesheet und Skript in $GLOBALS['TL_CSS'] und $GLOBALS['TL_JAVASCRIPT'] ein — die Listen, die Contao\BackendTemplate::compile() beim Aufbau der Seite auswertet.

Die Symbole werden über relative Adressen aus dem mitgelieferten Theme geholt (../../system/themes/flexible/icons/). Relative Adressen löst der Browser gegen die Adresse des Stylesheets auf, nicht gegen die der Seite — deshalb stimmt der Pfad auch dann, wenn Contao in einem Unterverzeichnis betrieben wird.

Das gilt allerdings nicht für Adressen innerhalb einer CSS-Variablen: Die lösen die Browser uneinheitlich auf — Chrome gegen das Stylesheet, das die Variable benutzt, andere gegen das, welches sie deklariert. Symbole werden hier deshalb nie über Variablen gesetzt, sondern immer über eigene Regeln. Ein Test in tests/Resources/StylesheetTest.php wacht darüber.

Lizenz

LGPL-3.0-or-later

Die Dateien unter src/Resources/public/icons/ stammen aus Contao Open Source CMS (© Leo Feyer) und stehen unter derselben Lizenz. Verändert wurde an ihnen nur die Strichfarbe.

schachbulle / contao-design413-bundle

Maintainers

Package info

Statistics

Security