Euch gefallen im Contao Backend die Buttons, Farben und Icons nicht?

Im Forum wurde dazu schon geschrieben warum oder weshalb die Buttons zum Bearbeiten nun in ein Menü versteckt wurden und nicht alle gleich angezeigt werden. Mich hat es zum schnellen Arbeiten gestört, und habe deshalb eine einfache Lösung gesucht, das Backend individuell per CSS zu überschreiben.

Da es erst nativ mit der Contao 4.6 keine Möglichkeit gab, wie hier im Ticket versprochen, dachte ich mir, das es doch mit ein bisschen CSS zu lösen ist. Für die 3er hatte ich mir dazu schon ein eigenes CSS ins Backend eingebunden, das mir die Buttons etwas bunter einfärbt, um schneller unterscheiden zu können.

Contao Backend Optimierung

Über meine farbliche Gestaltung oder Einfärbung lässt sich streiten, die kann jeder gerne für sich anhand der CSS Vorlage verändern wie er es möchte. Für mich stand im Vordergrund, das ich schnell anhand einer Einfärbung unterscheiden kann, welcher Button für was steht, falls ich die Kurzbefehl nicht anwende. Die nativen zu kleinen Icons und Abstände dazwischen waren auch nicht förderlich und mit einer Prise CSS gleich gefixt. Hier seht ihr Screenshots aus meinem Contao 4.13.x Backend und einer eigener CSS Datei, um bestimmte Styles zu überschreiben.

Dateiverwaltung mit vergrößerten Icons

Dateiverwaltung mit Auswahl und Markierung

Contao Dateiverwaltung mit Auswahl als Markierung

Zu guter letzt war es mir noch wichtig, das bei einem SpaltenSet Wrapper für start und ende im Backend die Elemente gut zu erkennen sind. Bei falscher Anordnung erkennt der Redakteur schneller wo es klemmt.

Farben am SpaltenSet Wrapper für start und ende

Neue Integration über die config.yml und Dateien

Über die config.yml kann mit folgendem Eintrag ab Contao 4.11.x dem Backend eigene CSS / JS Dateien hinzugefügt werden. Weitere Einstellungen findet ihr in der Dokumentation.

# config/config.yaml
contao:
    backend:
        custom_css:
            - files/backend/backend-cs.css
        custom_js:
            - files/backend/backend-cs.js

CSS Datei für das Contao Backend

backend-cs.css

JavaScript Datei für das Contao Backend

backend-cs.js

Contao Dokumentation

Können die Buttons im Contao Backend auch unten als Sticky Footer mitlaufen?

Ja, das geht mit der CSS Anpassung für das Backend, das es wie die Erweiterung Sticky Footer für das Backend mit purem css am Ende vom Browser mitläuft. Der Footer wird sofort angezeigt und nicht erst nach dem scrollen.

Wie können die Buttons umgefärbt werden?

Das geht über die HEX Werte in der CSS Datei. Damit können eigene Farben eingestellt werden.

Teilen auf: Facebook Twitter XING