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

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

Nina: Ein paar beispielhafte CSS-Anweisungen ergaenzt

2012-03-06T14:20:03Z

Ein paar beispielhafte CSS-Anweisungen ergaenzt

Xtra: Formatierung

2012-03-06T14:01:42Z

Formatierung

Nina am 6. März 2012 um 13:55 Uhr

2012-03-06T13:55:57Z

Nina: Die Seite wurde neu angelegt: „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 Vor…“

2012-03-06T13:54:44Z

Die Seite wurde neu angelegt: „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 Vor…“

Neue Seite

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.

Wichtig: 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.

@@ 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 5: / Zeile 5: @@
 ==Das Stylesheet einbinden==
-In der Datei ''system/config/dcaconfig.php'' (Datei anlegen, falls sie noch nicht existiert) wird dazu der folgende Code eingefügt:
+In der Datei ''system/config/localconfig.php'' 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>

@@ Zeile 39: / Zeile 39: @@
 /* Aktiver Punkt in BE-Navigation besser erkennbar */
-#tl_navigation .active { font-weight: bold; }
+#tl_navigation .tl_level_2 a.active { font-weight: bold; }
@@ Zeile 52: / Zeile 52: @@
    outline: 1px solid #465E22;
+}
 </source>

@@ 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.
 {{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}}
 '''Das Stylesheet einbinden'''

@@ Zeile 5: / Zeile 5: @@
 {{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}}
 '''Das Stylesheet einbinden'''
@@ Zeile 21: / Zeile 20: @@
 <source lang="css">
-/* Verstaerkte Hover/Fokus-Markierung für Listinganzeige in modernen Browsern */
+/* 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 #000;
+  color: #333;
+}
 </source>

← Nächstältere Version		Version vom 6. März 2012, 13:55 Uhr
Zeile 10:		Zeile 10:

	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.		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:
		+
		+	/* Verstaerkte Hover/Fokus-Markierung für Listinganzeige in modernen Browsern */
		+	.tl_listing tr:hover, .tl_listing tr:focus { outline: 1px solid #000; }