() translation by (you can also view the original English article)
So erfrischend des neue WordPress Dashboard auch ist, nicht jeder ist zufrieden mit allen Änderungen. Ich persönlich mag zwar den minimalistischen Stil, es gibt allerdings eine Kleinigkeit, die ich wirklich vermisse: Der Navigationsleiste auf der linken Seite fehlte die visuelle Trennung zwischen den verschiedenen WordPress-Bereichen.
In diesem Quick-Tip zeige ich Euch, wie Ihr den CSS-Code des Dashboards inspiziert und die Trenner mit nur ein paar Zeilen Code zurück bringt.
Die Styles Finden
Die Trenner, welche wir wiederherzustellen versuchen, sind nicht wirklich weg - sie sind lediglich unsichtbar. Macht einen Rechtsklick auf die Fläche zwischen Kommentare und Design und wählt Element untersuchen.
Ihr solltet nun den dargestellten HTML-Code sehen. Die Menüs sind ul-Elemente mit li-Elementen für jeden Menüpunkt.
Öffnet ul id="adminmenu" role="navigation". Ihr seht nun alle Menüpunkte in li-Elementen verpackt. Zusätzlich seht Ihr dazwischen aber auch noch ein li class="wp-menu-separator"-Element. Wenn Ihr es anklickt, könnt Ihr die CSS-Regeln für dieses Element ansehen.
1 |
#adminmenu li.wp-menu-separator { |
2 |
background: transparent; |
3 |
border-color: transparent; |
4 |
}
|
Das sind die Regeln für den Trenner. Genau diese gilt es zu bearbeiten.
Eigene CSS-Regeln Hinzufügen
Um unsere eigenen CSS-Regeln zum WordPress Dashboard hinzuzufügen, werden wir nun eine PHP-Funktion schreiben.
Füge diesen Code zu der functions.php-Datei deines Themes hinzu.
1 |
function tutsplus_separators() { |
2 |
|
3 |
}
|
4 |
add_action( 'admin_head', 'tutsplus_separators' ); |
Der erste Teil definiert die Funktion, der zweite Teil sorgt mit add_actiondafür, das diese zum head-Element des WordPress Dashboards hinzugefügt wird. In der Mitte werden wir jetzt unsere eigenen CSS-Regeln hinzufügen.
1 |
function tutsplus_separators() { |
2 |
echo '<style type="text/css">#adminmenu li.wp-menu-separator {margin: 0; background: #444;}</style>'; |
3 |
}
|
4 |
add_action( 'admin_head', 'tutsplus_separators' ); |
Wenn ihr das Dashboard neu ladet, werden die Trenner in der Farbe#444 (Grau) erscheinen. In diesem Beispiel habe ich zusätzlich noch den margin-Wert der Trenner verändert, um diese besser zu platzieren.
Anpassung für die WordPress Dashboard Farbschemen
Perfektionisten wird jetzt auffallen, das die eben definierte Farbe nur zu dem schwarz-grau-blauen Standard-Farbschema passt. Lasst uns versuchen, die Farbe für alle Farbschemen anzupassen.
Das body-Element des WordPress Dashboard enthält eine Menge nützlicher Klassen um verschiedene Einstellungen zu identifizieren. Wenn wir uns diese einmal genau ansehen, fällt uns auch eine Klasse passend zum Farbschema auf: Für das Standard-Farbscheme ist dort die Klasseadmin-color-fresh eingefügt.
Ändert einmal das Farbschema in "Benutzer" > "Dein Profil" und beobachtet, wie sich die Klasse verändert. Mit diesem Wissen können wir jetzt für jedes Farbschema eine eigene Trenner-Farbe festlegen. Fügt einfach die Klasse wie folgend vor Eurem CSS-Code ein:.admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}.
Hier ist unser Code noch mal, diesmal aber mit unterschiedlichen Farbwerten für jedes Farbschema:
1 |
function tutsplus_separators() { |
2 |
echo '<style type="text/css"> |
3 |
#adminmenu li.wp-menu-separator {margin: 0;}
|
4 |
.admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}
|
5 |
.admin-color-midnight #adminmenu li.wp-menu-separator {background: #4a5258;}
|
6 |
.admin-color-light #adminmenu li.wp-menu-separator {background: #c2c2c2;}
|
7 |
.admin-color-blue #adminmenu li.wp-menu-separator {background: #3c85a0;}
|
8 |
.admin-color-coffee #adminmenu li.wp-menu-separator {background: #83766d;}
|
9 |
.admin-color-ectoplasm #adminmenu li.wp-menu-separator {background: #715d8d;}
|
10 |
.admin-color-ocean #adminmenu li.wp-menu-separator {background: #8ca8af;}
|
11 |
.admin-color-sunrise #adminmenu li.wp-menu-separator {background: #a43d39;}
|
12 |
</style>'; |
13 |
}
|
14 |
add_action( 'admin_head', 'tutsplus_separators' ); |
Bonus
Falls Ihr Trennlinien zwischen allen Menüpunkten bevorzugt, versucht doch einmal die menu-top-Klasse der li-Elemente mitborder-bottom und border-top zu verändern.
Plugin
Um Euch und mir ein bisschen Zeit zu sparen, habe ich unseren Code in ein kleines Plugin verwandelt, um es schnell in einigen meiner WordPress-Installationen einsetzen zu können. Ihr findet es im WordPress Plugin Directory, falls Ihr mögt.
