Stylesheet für Backend-Theme ergänzen: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Xtra (Diskussion | Beiträge) K (Formatierung) |
Nina (Diskussion | Beiträge) K (Ein paar beispielhafte CSS-Anweisungen ergaenzt) |
||
| Zeile 5: | Zeile 5: | ||
{{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}} | {{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}} | ||
| − | |||
'''Das Stylesheet einbinden''' | '''Das Stylesheet einbinden''' | ||
| Zeile 21: | Zeile 20: | ||
<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 { | + | a, body, div, label, legend, li, ol, p, td, th, ul, fieldset, form, input, optgroup, select, textarea { |
| − | 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 .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; | ||
} | } | ||
</source> | </source> | ||
Version vom 6. März 2012, 15:20 Uhr
 |
Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet.
Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis. |
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 es updatesicher ist und man nichts an Templates geändert hat.
 |
Hinweis: Diese Lösung funktioniert erst ab Contao 2.10 |
Das Stylesheet einbinden
Unter system/config/ die dcaconfig.php (Datei anlegen, falls sie noch nicht existiert) bearbeiten und folgende Zeile einfügen:
if(TL_MODE == 'BE') $GLOBALS['TL_CSS'][] = 'tl_files/backend/be.css|screen';
In der Dateiverwaltung einen Ordner namens "backend" anlegen und eine Datei namens "be.css" reinpacken.
Das war es auch schon. Nun kann man die be.css bei Bedarf bearbeiten und dort Anweisungen reinschreiben um per CSS bestimmte Teile des Backends anders darzustellen.
So könnte man beispielsweise folgendes in das Stylesheet schreiben:
/* Grundfarben für Elemente dunkler - besserer Kontrast/Barrierefreiheit */ a, body, div, label, legend, li, ol, p, td, th, ul, fieldset, form, input, optgroup, select, textarea { 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 .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; }
