Tipps und Tricks Filter

Eine Seite zurück
Reset Filterauswahl

Contao 5.7 Backend Navigation

In Contao 5.7 ist die Navigation auf der linken Seite "schwebend", als gehöre sie da nicht hin. Jedenfalls gefällt mir das nicht.
Auch der Kontrast der Abschnittsüberschriften ist zu blass meiner Meinung nach.

Da die Main Bestandteile gerahmt und mit hellerem Hintergrund dargestellt werden, habe ich das für die Navigation ebenso angepasst.

Contao 5.7 Navi angepasst hell

Wer die Navigationsüberschriften noch stärken will:

 

Dazu ist eine CSS Datei nötig, die man vorher im Backend hoch lädt und diese dann in der Datei config/config.yaml definiert.

 

CSS Datei files/backend/backend-navi.css

#left {
  background: var(--content-bg);
  border: 1px solid var(--content-border);
  border-radius: var(--border-radius-lg);
  margin-top: 20px;
}
/* wer die Navigationsüberschriften noch stärken will */
#tl_navigation .menu_level_0 a[class^="group-"] {
  color: black;
  font-weight: 600;
}

Datei config/config.yaml

contao:
  backend:
    custom_css:
      - files/backend/backend-navi.css

Jetzt noch den Cache löschen und schon ist es soweit. Natürlich funktioniert das auch ohne weitere Anpassung im "Dunkel Design".

Alternative mit Backend Template

Statt die config.yaml zu nutzen, kann man auch mit dem TemplateStudio ein eigenes Backend Template (be_main.html.twig) anlegen.
Der Inhalt dann wie folgt:

{% extends "@Contao/be_main.html.twig" %}

{% block head %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('backend/backend-navi.css', 'contao_vfs.files') }}">
{% endblock %}