Eigenes CSS fürs Backend
Füge unter config/config.yml (sollte das Verzeichnis oder die Datei bei dir nicht vorhanden sein, kannst du diese von Hand anlegen) folgenden Code ein:
contao:
backend:
custom_css:
- files/layout/backend.css
Erstelle danach über die Dateiverwaltung von Contao ein öffentliches Verzeichnis layout und platziere darin eine Datei backend.css mit folgendem Inhalt:
:root {
--body-bg: #cfcfd3;
--main-bg: #eaeaec;
}
html[data-color-scheme="dark"] {
--main-bg: #32363e;
}
body.be_main {
background: var(--body-bg);
}
.be_main #main {
background: var(--main-bg);
}
.be_main #container,
.be_main #header {
max-width: 1440px;
margin: 0 auto;
}
Ihr schreibt doch vom begrenzen der Breite in Contao, warum befinden sich also Farben im CSS? Damit unter anderem der Hintergrund vom Arbeitsbereich nicht in die Hintergrundfarbe übergeht. Zusätzlich wird noch die Farbe für das dunkle Design angegeben.
Jetzt musst du im Contao Manager in der Systemwartung noch den Prod.-Cache erneuern.
Erweiterung installieren
Installiere dir die Erweiterung «contao-backend-limited-width» von 1up und aktiviere bei deinem Benutzerprofil unter Kontoeinstellungen «Limitierte Breite».
Kommentare
Kommentar von gmpf |
Danke für den praktischen Snippet. :) Wozu braucht es jeweils das `!important` für die Hintergründe von `body` und `#main`? Würde die hier vorgeschlagene Datei vor dem Backend-CSS von Contao geladen? In dem Fall würde `!important` an den Stellen aber auch nichts nutzen, weil ja die Variablen vom später kommenden Contao-CSS geändert würden.
Antwort von Bjarke Ammann
Vielen Dank für deine Rückmeldung.
Das ist der Kaskade geschuldet und könnte wie folgt umgangen werden:
body.be_main { background: var(--body-bg); } .be_main #main { background: var(--main-bg); }Kommentar von Bernhard |
Danke für die Anleitung und das CSS!
Bis 4.13 habe ich das über die be_main.html5 gelöst und auch noch die Klassen für w25, w33, w66 und w75 verbaut » Dank core-Anpassung in diese Richtung ist das ja nun auch nicht mehr notwendig.
Das kürzt die zusätzlichen "Einstellungen" an zentraler Stelle.
Antwort von Bjarke Ammann
Vielen Dank für deinen Kommentar.
Kommentar von Patrick |
Um die Contao-Login-Seite nicht zu verändern, haben wir die CSS etwas angepasst und aus "background" einfach "background-color" gemacht. Außerdem haben wir "#container, #header" in ".be_main #container, .be_main #header" angepasst.
Antwort von Bjarke Ammann
Vielen Dank für deinen Kommentar, ich habe die
backend.cssnach euren Rückmeldungen oben nochmals angepasst.Kommentar von minstyle |
Das Logo des Contao-Logins ist mit den CSS-Anpassungen nicht mehr zu sehen. Hier ein Optimierungsvorschlag:
:root { --body-bg: #cfcfd3; --main-bg: #eaeaec; } html[data-color-scheme="dark"] { --main-bg: #32363e; } body { background-color: var(--body-bg) !important; } #main { background-color: var(--main-bg) !important; } .be_main #container, .be_main #header { max-width: 1440px; margin: 0 auto; }Antwort von Bjarke Ammann
Vielen Dank für deinen Kommentar, ich habe die
backend.cssnach euren Rückmeldungen oben nochmals angepasst.