Contao-Backend pro Umgebung einfärben

Kennst du das Problem, verschiedene Umgebungen einer Website auseinanderzuhalten? Gerade wenn es hektisch wird — etwa rund um einen Relaunch — verwechselt man die Instanzen DEV, LIVE und Lokal schneller, als einem lieb ist.

Eine einfache Lösung: Die Instanzen bekommen unterschiedliche Farben und Titel neben dem Contao-Logo.

Dank eines Artikels von Trakked (Die Backend-Breite in Contao 5 begrenzen) ist das denkbar einfach geworden:

1. Du erstellst eine backend.css. Dank der Custom Properties reicht folgende Anweisung aus, um den Header von Orange in Blau umzufärben:

:root {
  --header-bg: var(--blue);
}

2. Du ergänzt in der config.yaml folgende Anweisung:

contao:
  backend:
    custom_css:
      - pfad/zur/backend.css

Dann noch Cache leeren — und schwuppdiwupp hat diese Instanz eine andere Header-Farbe. Relativ einfach und ohne zusätzliche Template-Anpassungen, EventListener etc.

Mit dem Pseudo-Element ::after kannst du zusätzlich den Namen der Umgebung neben das Logo schreiben — aber das kann ja jede:r so halten, wie sie/er will.