Contao Backend-Umgebungen individualisieren

Kennst du das Problem, dass es schwierig ist, verschiedene Umgebungen (lokal, DEV, LIVE) einer Website auseinander zu halten?

Um mehrere Instanzen einer Website nicht nur anhand der Domain unterscheiden zu können, gibt es seit Contao 4.11 ein 2 Möglichkeiten, das Backend anzupassen:

  1. eigene CSS-Anweisungen für das Backend, um zum Beispiel die Farbe des Headers zu ändern
  2. ein Label pro Instanz vergeben, dass neben dem Logo und beim Login angezeigt wird

1. Eigene Backend-CSS

Um die Darstellung des Backends anzupassen legst du im ersten Schritt eine eigene CSS-Datei an. Im folgenden Beispiel ändern wir die Hintergrundfarbe des Headers von orange zu blau:

// backend.css
:root {
  --header-bg: var(--blue);
}

Damit die CSS-Datei vom Backend geladen wird, ergänzen wir folgende Zeilen in der config.yaml:

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

2. Label im Backend

Eine weitere Möglichkeit ist die Vergabe es eines Labels pro Instanz. So kann schon vor dem Login die jeweilige Instanz gekennzeichnet werden. Nach dem Login befindet sich das Label neben dem Contao Logo und auch in der Frontend-Vorschau taucht das Label auf.

Um ein Label zu vergeben, ergänzt du die config.yaml um folgende Zeilen:

contao:
  backend:
    badge_title: DEV

Wenn du wie ich mit Deployer arbeitest, kannst du den badge_title auch direkt aus der .env.local auslesen, indem du badge_title: '%env(BADGE_TITLE)%' verwendest und in der .env.local dann BADGE_TITLE=DEV verwendest.

Zwar kannst du über die config.yaml keine eigenen CSS-Klassen ergänzen, aber über app-name und app-version könntest du indirekt auch auf weitere Elemente im Backend Einfluss nehmen:

contao:
  backend:
    attributes:
      app-name: 'project-xy-dev'
      app-version: 1.2.3

Übrigens: Der Tipp zur individuellen Darstellung des Backends via CSS erschien zuerst in unserer Flaschenpost.

Wenn du mehr Tipps zu Contao haben möchtest, melde dich gerne an:

Zur Newsletter-Anmeldung