Manchmal geht es bei einer Website nicht um eine große technische Funktion. Manchmal stört einen einfach eine Kleinigkeit so lange, bis man sie ändert.
Bei mir waren es die verschiedenen Bereiche in der rechten Sidebar meiner WordPress-Seite. Sie funktionierten auch ohne zusätzliche Gestaltung problemlos. Optisch fehlte mir zwischen den einzelnen Bereichen aber etwas Trennung.
Also habe ich eine ganz einfache WordPress Sidebar Trennlinie eingebaut.
Eine kleine optische Trennung zwischen den Bereichen
Die Idee war ziemlich simpel: Zwischen zwei Bereichen der Sidebar sollte eine dezente horizontale Linie erscheinen.
Nicht dick, nicht dunkel und schon gar nicht als dominierendes Gestaltungselement. Sie sollte die einzelnen Bereiche nur ein wenig voneinander absetzen.
Dafür reicht ein sehr kleiner CSS-Block:
/* Trenner zwischen Sidebar-Bereichen */
.werkstatt-trenner {
border: 0;
border-top: 1px solid #DDDAD3;
margin: 1em 0;
}Mehr braucht es für die eigentliche Gestaltung nicht.
Was macht der CSS-Code?
Mit .werkstatt-trenner definiere ich zunächst eine eigene CSS-Klasse.
border: 0; entfernt eventuell vorhandene Rahmen. Anschließend erzeugt border-top: 1px solid #DDDAD3; eine ein Pixel starke Linie.
Der Farbwert #DDDAD3 ist in meinem Fall ein sehr dezentes Hellgrau. Wer die Linie deutlicher oder unauffälliger haben möchte, kann diesen Farbwert natürlich an das eigene Design anpassen.
Mit margin: 1em 0; bekommt der Trenner oben und unten etwas Abstand. Links und rechts wird kein zusätzlicher Außenabstand eingefügt.
Die CSS-Klasse muss auch verwendet werden
Der CSS-Code allein erzeugt noch keine Linie. Er beschreibt lediglich, wie ein Element mit der Klasse werkstatt-trenner aussehen soll.
Ein mögliches Trennelement könnte beispielsweise so aussehen:
<hr class="werkstatt-trenner">Dieses Element kann dann dort eingesetzt werden, wo die Trennung tatsächlich erscheinen soll.
Je nachdem, wie die Sidebar aufgebaut ist und welche WordPress-Blöcke oder Widgets verwendet werden, kann man die Klasse auch einem vorhandenen Trennelement zuweisen. Entscheidend ist lediglich, dass im ausgegebenen HTML tatsächlich die Klasse werkstatt-trenner vorhanden ist.
Warum ich dafür zusätzliches CSS verwendet habe
Für so eine kleine optische Änderung wollte ich kein Child-Theme anlegen und auch nicht direkt in den Dateien meines Themes herumändern.
Direkte Änderungen an Theme-Dateien haben einen offensichtlichen Nachteil: Bei einem Update des Themes können solche Anpassungen überschrieben werden.
Das WordPress-Feld für zusätzliches CSS ist für solche kleinen Anpassungen praktisch. Der Code wird getrennt von den eigentlichen Theme-Dateien gespeichert und bleibt deshalb bei einem normalen Theme-Update erhalten.
Bei einem Theme-Wechsel gibt es allerdings eine wichtige Einschränkung: Zusätzliches CSS ist in WordPress an das jeweilige Theme gebunden.
Wechsle ich zu einem anderen Theme, wird mein bisheriges zusätzliches CSS dort nicht automatisch aktiv. Kehre ich später zum ursprünglichen Theme zurück, steht dessen CSS wieder zur Verfügung.
Wer dieselbe Trennlinie also wirklich themeübergreifend verwenden möchte, sollte den Code beim neuen Theme erneut einrichten oder eine andere, themeunabhängige Lösung wählen.
Farbe, Stärke und Abstand lassen sich leicht verändern
Das Beispiel lässt sich ohne großen Aufwand an das eigene Design anpassen.
Wer eine kräftigere Linie möchte, kann beispielsweise die Stärke von 1px erhöhen. Eine andere Farbe lässt sich einfach über den Hex-Farbwert einstellen.
Auch der Abstand ist nicht fest vorgegeben. Aus margin: 1em 0; kann beispielsweise ein größerer oder kleinerer Abstand werden.
Ich würde es bei so einem Element allerdings eher zurückhaltend halten. Der Trenner soll die Sidebar strukturieren und nicht aussehen, als hätte jemand mit dem Lineal einzelne Abteilungen eingezeichnet.
Eine kleine Anpassung, mehr nicht
Natürlich braucht niemand so eine Linie zwingend.
Sie verbessert keine Sicherheit, macht WordPress nicht schneller und rettet vermutlich auch kein Suchmaschinenranking.
Mir hat die Sidebar damit einfach besser gefallen.
Und genau dafür ist zusätzliches CSS manchmal ziemlich praktisch: Eine kleine optische Idee lässt sich mit wenigen Zeilen umsetzen, ohne dafür gleich am gesamten Theme herumzubauen.
Wie immer bei eigenen Anpassungen gilt trotzdem: Code vorher prüfen, die Darstellung auf verschiedenen Bildschirmgrößen testen und im Zweifel eine Sicherung haben.
Bei dieser Lösung ist das Risiko überschaubar. Aber auch vier Zeilen CSS können hässlich aussehen, wenn sie an der falschen Stelle landen.