Stylesheet für Backend-Theme ergänzen - Versionsgeschichte

Andreas: /* Das Stylesheet einbinden */

2020-09-11T17:35:43Z

‎Das Stylesheet einbinden

Magicsepp: /* Das Stylesheet einbinden */

2020-08-23T11:50:25Z

‎Das Stylesheet einbinden

Andreas: Beautify

2017-08-08T10:53:31Z

Beautify

Andreas: /* Das Stylesheet einbinden */

2017-08-08T10:49:51Z

‎Das Stylesheet einbinden

Andreas: Korrigiert

2017-08-08T10:48:02Z

Korrigiert

Nina am 9. März 2012 um 23:42 Uhr

2012-03-09T23:42:25Z

Nina am 9. März 2012 um 21:55 Uhr

2012-03-09T21:55:17Z

Babelfisch: etwas umformuliert und Überschriften hinzugefügt

2012-03-06T23:02:49Z

etwas umformuliert und Überschriften hinzugefügt

Nina am 6. März 2012 um 14:34 Uhr

2012-03-06T14:34:00Z

Nina am 6. März 2012 um 14:20 Uhr

2012-03-06T14:20:35Z

@@ Zeile 13: / Zeile 13: @@
 if(TL_MODE == 'BE')
+{
-   $GLOBALS['TL_CSS'][]        = 'files/css/be.css';
+   $GLOBALS['TL_CSS'][]        = 'files/backend/backend.css';
-   // Also works with JS
+   $GLOBALS['TL_JAVASCRIPT'][] = 'files/backend/backend.js';
-  #$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js';
+}
 </source>
-In der Dateiverwaltung legt man dann den Ordner ''css'' an (''Öffentlich'' nicht vergessen) und erstellt die Datei ''be.css''.
+In der Dateiverwaltung legt man dann den Ordner ''backend'' an (''Öffentlich'' nicht vergessen) und erstellt die Dateien ''backend.css'' und ''backend.js''.
-Nun kann man die ''be.css'' bei Bedarf bearbeiten und dort Anweisungen reinschreiben, um per CSS bestimmte Teile des Backends anders darzustellen.
+Nun kann man die ''backend.css'' und ''backend.js'' bei Bedarf bearbeiten und dort Anweisungen reinschreiben, um per CSS oder JS bestimmte Teile des Backends anders darzustellen.
 ==Beispiel-Stylesheet==

@@ Zeile 13: / Zeile 13: @@
 if(TL_MODE == 'BE')
+{
-   $GLOBALS['TL_CSS'][]        = 'files/css/_my_be.css';
+   $GLOBALS['TL_CSS'][]        = 'files/css/be.css';
    // Also works with JS
    #$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js';
@@ Zeile 19: / Zeile 19: @@
 </source>
-In der Dateiverwaltung legt man dann den Ordner ''backend'' an und erstellt die Datei ''be.css''.
+In der Dateiverwaltung legt man dann den Ordner ''css'' an (''Öffentlich'' nicht vergessen) 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.

@@ Zeile 29: / Zeile 29: @@
 <source lang="css">
 /* 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 {
+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 {
+#tl_navigation a:link,
-   color: #333;
+#tl_navigation a:visited {
-   text-decoration: none;
+   color: #333;
+}
-#tl_navigation a:hover, #tl_navigation a:focus, #tl_navigation a:active {
+#tl_navigation a:hover,
    color: #000;
    text-decoration: underline;
+}
 /* Aktiver Punkt in BE-Navigation besser erkennbar */
-#tl_navigation .tl_level_2 a.active { font-weight: bold; }
+#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 {
+.tl_checkbox_container label:hover,
-   color: #000 !important;
+.tl_checkbox_container label:focus {
-   outline: 1px solid #465E22;
+   color: #000 !important;
+}
 /* Verstaerkte Hover/Fokus Markierung für Listinganzeige */
-.tl_listing tr:hover, .tl_listing tr:focus {
+.tl_listing tr:hover,
-   outline: 1px solid #465E22;
+.tl_listing tr:focus {
+}
 /* Verstaerkte Hover/Fokus Markierung für Icons in der Listinganzeige */
-.tl_listing .tl_right a img:hover, .tl_listing .tl_right a img:focus {
+.tl_listing .tl_right a img:hover,
-   outline: 1px solid #465E22;
+.tl_listing .tl_right a img:focus {
+}
 </source>

@@ Zeile 14: / Zeile 14: @@
+{
    $GLOBALS['TL_CSS'][]        = 'files/css/_my_be.css';
-   $GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js';
+   // Also works with JS
+}
 </source>

@@ Zeile 8: / Zeile 8: @@
 <source lang="php">
-  if (TL_MODE == 'BE')
+<?php
-    $GLOBALS['TL_CSS'][] = 'tl_files/backend/be.css|screen';
 </source>

@@ Zeile 5: / Zeile 5: @@
 ==Das Stylesheet einbinden==
-In der Datei ''system/config/localconfig.php'' wird dazu der folgende Code eingefügt:
+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">

@@ Zeile 1: / Zeile 1: @@
 [[Kategorie:Admin_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 es updatesicher ist und man nichts an Templates geändert hat.
+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'''
+==Das Stylesheet einbinden==
 <source lang="php">
-   if(TL_MODE == 'BE')
+   if (TL_MODE == 'BE')
      $GLOBALS['TL_CSS'][] = 'tl_files/backend/be.css|screen';
 </source>
-In der Dateiverwaltung einen Ordner namens "backend" anlegen und eine Datei namens "be.css" reinpacken.
+In der Dateiverwaltung legt man dann den Ordner ''backend'' an und erstellt die Datei ''be.css''.
-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.
+==Beispiel-Stylesheet==
 So könnte man beispielsweise folgendes in das Stylesheet schreiben:
@@ Zeile 58: / Zeile 61: @@
    outline: 1px solid #465E22;
+}
 </source>