Stylesheet für Backend-Theme ergänzen: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Xtra (Diskussion | Beiträge) K (Formatierung) |
K (Beautify) |
||
| (8 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | |||
[[Kategorie:Admin_HOWTOS]] | [[Kategorie:Admin_HOWTOS]] | ||
[[Kategorie:CSS_HOWTOS]] | [[Kategorie:CSS_HOWTOS]] | ||
| − | Wenn man die Darstellung des Contao-Backends nur leicht anpassen möchte, kann man das normale Backend-Theme mit einem zusätzlichen Stylesheet ergänzen. Der Vorteil dieser Lösung ist, dass | + | Wenn man die Darstellung des Contao-Backends nur leicht anpassen möchte, kann man das normale Backend-Theme mit einem zusätzlichen Stylesheet ergänzen. Der Vorteil dieser Lösung ist, dass man nichts an Templates ändern muss und es daher updatesicher ist. |
| − | + | ||
{{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}} | {{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}} | ||
| + | ==Das Stylesheet einbinden== | ||
| − | '' | + | In der Datei ''system/config/initconfig.php'' (falls die Datei nicht existiert, bitte exakt so benannt anlegen) wird dazu der folgende Code eingefügt: |
| − | |||
<source lang="php"> | <source lang="php"> | ||
| − | + | <?php | |
| − | + | ||
| + | /** Some extra BE CSS and JS */ | ||
| + | if(TL_MODE == 'BE') | ||
| + | { | ||
| + | $GLOBALS['TL_CSS'][] = 'files/css/_my_be.css'; | ||
| + | // Also works with JS | ||
| + | #$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js'; | ||
| + | } | ||
</source> | </source> | ||
| − | In der Dateiverwaltung | + | In der Dateiverwaltung legt man dann den Ordner ''backend'' an und erstellt die Datei ''be.css''. |
| + | |||
| + | Nun kann man die ''be.css'' bei Bedarf bearbeiten und dort Anweisungen reinschreiben, um per CSS bestimmte Teile des Backends anders darzustellen. | ||
| − | + | ==Beispiel-Stylesheet== | |
So könnte man beispielsweise folgendes in das Stylesheet schreiben: | So könnte man beispielsweise folgendes in das Stylesheet schreiben: | ||
<source lang="css"> | <source lang="css"> | ||
| − | /* Verstaerkte Hover/Fokus | + | /* Grundfarben für Elemente dunkler - besserer Kontrast/Barrierefreiheit */ |
| − | .tl_listing tr:hover, .tl_listing tr:focus { | + | body { |
| − | outline: 1px solid # | + | color: #333; |
| + | } | ||
| + | /* Links in der BE-Navigation auf voller Breite anklickbar */ | ||
| + | #tl_navigation li a { | ||
| + | display: block; | ||
| + | } | ||
| + | /* Links in der BE-Navigation mit besserer Fokus/Hover-Markierung */ | ||
| + | #tl_navigation a:link, | ||
| + | #tl_navigation a:visited { | ||
| + | color: #333; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | #tl_navigation a:hover, | ||
| + | #tl_navigation a:focus, | ||
| + | #tl_navigation a:active { | ||
| + | color: #000; | ||
| + | text-decoration: underline; | ||
| + | } | ||
| + | /* Aktiver Punkt in BE-Navigation besser erkennbar */ | ||
| + | #tl_navigation .tl_level_2 a.active { | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | /* Hover/Fokus Markierung für Label, z. B. beim Auswaehlen von Labels bei den Definitionen der Benutzergruppen */ | ||
| + | .tl_checkbox_container label:hover, | ||
| + | .tl_checkbox_container label:focus { | ||
| + | color: #000 !important; | ||
| + | outline: 1px solid #465E22; | ||
| + | } | ||
| + | /* Verstaerkte Hover/Fokus Markierung für Listinganzeige */ | ||
| + | .tl_listing tr:hover, | ||
| + | .tl_listing tr:focus { | ||
| + | outline: 1px solid #465E22; | ||
| + | } | ||
| + | /* Verstaerkte Hover/Fokus Markierung für Icons in der Listinganzeige */ | ||
| + | .tl_listing .tl_right a img:hover, | ||
| + | .tl_listing .tl_right a img:focus { | ||
| + | outline: 1px solid #465E22; | ||
} | } | ||
</source> | </source> | ||
Version vom 8. August 2017, 13:53 Uhr
Wenn man die Darstellung des Contao-Backends nur leicht anpassen möchte, kann man das normale Backend-Theme mit einem zusätzlichen Stylesheet ergänzen. Der Vorteil dieser Lösung ist, dass man nichts an Templates ändern muss und es daher updatesicher ist.
 |
Hinweis: Diese Lösung funktioniert erst ab Contao 2.10 |
Das Stylesheet einbinden
In der Datei system/config/initconfig.php (falls die Datei nicht existiert, bitte exakt so benannt anlegen) wird dazu der folgende Code eingefügt:
<?php /** Some extra BE CSS and JS */ if(TL_MODE == 'BE') { $GLOBALS['TL_CSS'][] = 'files/css/_my_be.css'; // Also works with JS #$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js'; }
In der Dateiverwaltung legt man dann den Ordner backend an und erstellt die Datei be.css.
Nun kann man die be.css bei Bedarf bearbeiten und dort Anweisungen reinschreiben, um per CSS bestimmte Teile des Backends anders darzustellen.
Beispiel-Stylesheet
So könnte man beispielsweise folgendes in das Stylesheet schreiben:
/* Grundfarben für Elemente dunkler - besserer Kontrast/Barrierefreiheit */ body { color: #333; } /* Links in der BE-Navigation auf voller Breite anklickbar */ #tl_navigation li a { display: block; } /* Links in der BE-Navigation mit besserer Fokus/Hover-Markierung */ #tl_navigation a:link, #tl_navigation a:visited { color: #333; text-decoration: none; } #tl_navigation a:hover, #tl_navigation a:focus, #tl_navigation a:active { color: #000; text-decoration: underline; } /* Aktiver Punkt in BE-Navigation besser erkennbar */ #tl_navigation .tl_level_2 a.active { font-weight: bold; } /* Hover/Fokus Markierung für Label, z. B. beim Auswaehlen von Labels bei den Definitionen der Benutzergruppen */ .tl_checkbox_container label:hover, .tl_checkbox_container label:focus { color: #000 !important; outline: 1px solid #465E22; } /* Verstaerkte Hover/Fokus Markierung für Listinganzeige */ .tl_listing tr:hover, .tl_listing tr:focus { outline: 1px solid #465E22; } /* Verstaerkte Hover/Fokus Markierung für Icons in der Listinganzeige */ .tl_listing .tl_right a img:hover, .tl_listing .tl_right a img:focus { outline: 1px solid #465E22; }
