Stylesheet für Backend-Theme ergänzen: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K (Ein paar beispielhafte CSS-Anweisungen ergaenzt)
K (→‎Das Stylesheet einbinden)
 
(9 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{stub}}
 
 
[[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 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}}
 
{{Hinweis|Diese Lösung funktioniert erst ab Contao 2.10}}
−
'''Das Stylesheet einbinden'''
+
==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:
  
−
Unter system/config/ die dcaconfig.php (Datei anlegen, falls sie noch nicht existiert) bearbeiten und folgende Zeile einfügen:
 
 
<source lang="php">
 
<source lang="php">
−
  if(TL_MODE == 'BE')
+
<?php
−
    $GLOBALS['TL_CSS'][] = 'tl_files/backend/be.css|screen';
+
 
 +
/** Some extra BE CSS and JS */
 +
if(TL_MODE == 'BE')
 +
{
 +
  $GLOBALS['TL_CSS'][]       = 'files/backend/backend.css';
 +
  $GLOBALS['TL_JAVASCRIPT'][] = 'files/backend/backend.js';
 +
}
 
</source>
 
</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 (''Öffentlich'' nicht vergessen) und erstellt die Dateien ''backend.css'' und ''backend.js''.
  
−
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.
+
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==
  
 
So könnte man beispielsweise folgendes in das Stylesheet schreiben:
 
So könnte man beispielsweise folgendes in das Stylesheet schreiben:
Zeile 21: Zeile 28:
 
<source lang="css">
 
<source lang="css">
 
/* Grundfarben für Elemente dunkler - besserer Kontrast/Barrierefreiheit */
 
/* 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;  
+
   color: #333;
 
}
 
}
−
 
 
/* Links in der BE-Navigation auf voller Breite anklickbar */
 
/* Links in der BE-Navigation auf voller Breite anklickbar */
−
#tl_navigation li a {  
+
#tl_navigation li a {
−
   display: block;  
+
   display: block;
 
}
 
}
−
 
 
/* Links in der BE-Navigation mit besserer Fokus/Hover-Markierung */
 
/* 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;
 +
   text-decoration: none;
 
}
 
}
−
#tl_navigation a:hover, #tl_navigation a:focus, #tl_navigation a:active {  
+
#tl_navigation a:hover,
 +
#tl_navigation a:focus,
 +
#tl_navigation a:active {
 
   color: #000;
 
   color: #000;
 
   text-decoration: underline;
 
   text-decoration: underline;
 
}
 
}
−
 
 
/* Aktiver Punkt in BE-Navigation besser erkennbar */
 
/* Aktiver Punkt in BE-Navigation besser erkennbar */
−
#tl_navigation .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 */
 
/* 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;
 +
   outline: 1px solid #465E22;
 
}
 
}
−
 
 
/* Verstaerkte Hover/Fokus Markierung für Listinganzeige */
 
/* 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 {
 +
  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>

Aktuelle Version vom 11. September 2020, 18:35 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.png 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/backend/backend.css';
  $GLOBALS['TL_JAVASCRIPT'][] = 'files/backend/backend.js';
}

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 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

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;
}
Von „https://de.contaowiki.org/index.php?title=Stylesheet_für_Backend-Theme_ergänzen&oldid=8850“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Chuck Norris programmiert kein PHP, er diktiert das Ergebnis. Den Rest macht der Editor aus Angst.

Stefan Lindecke
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge