Design ändern mit CSS Code

Um kleinere Details des Themes abseits der Theme Optionen zu verfeinern, kannst du mit eigenem CSS Code das Standard Design überschreiben.

Was ist CSS?

CSS steht für Cascading Style Sheets und definiert, wie alle HTML Elemente angezeigt werden. Damit beschreibt CSS Code das eigentliche Aussehen der Seite, beispielsweise die Farben, Schriftarten, Rahmen, Abstände und Form und Größe aller Theme Elemente.

Falls du CSS im Detail lernen willst, findest du viele gute Tutorials im Netz, wie z.B. de.html.net/tutorials/css/ und jendryschik.de/wsdev/einfuehrung/css/.

Eigenen CSS Code in WordPress hinzufügen

Eigenen CSS Code fügst du am Besten mithilfe einer der zahlreichen Custom CSS WordPress Plugins hinzu. Die Verwendung eines Plugins sorgt dafür, dass du deinen CSS Code unabhängig vom Theme immer an der gleichen Stelle bearbeiten kannst und bietet darüber hinaus weitere Features wie Code Highlighting und Formatierung.

Wir können das Plugin Simple Custom CSS sehr empfehlen, welches wir auch in der Plugin Kategorie vorstellen.

IDs und Klassen im CSS verwenden

Die meisten HTML Elemente in unseren Themes sind mit einer ID und / oder Klasse definiert und kennzeichnen damit dieses Element. Mithilfe der ID oder Klasse lässt sich das Element im CSS Code ansprechen und verändern.

Beispiel: Alle Widgets befinden sich in einem DIV Container, der mit der ID „sidebar“ gekennzeichnet ist. Alle Beitragstitel sind mit einem H2 Titel Tag ummantelt, der in unseren Themes immer die Klasse „post-title“ zugeweisen hat.

<h2 class="post-title"> ... </h2>
<div id="sidebar"> ... </div>

Mit Verwendung der ID oder Klasse kann gezielt das gewünschte Element im CSS Code angesprochen werden, um danach mit eigenen CSS Befehlen das Standard Design zu überschreiben:

#sidebar { /* Verwende IDs mit # */
/* CSS Befehle */
}
.post-title  {  /* Verwende Klassen mit . */
/* CSS Befehle */
}

Deshalb ist oft der wichtigste Schritt, die richtige ID oder Klasse für das Element herauszufinden, welches geändert werden soll.

Der einfachste Weg dafür ist die Verwendung des Firefox Plugins Firebug.

CSS Code Schnipsel

Du findest einige Code Schnipsel für CSS Anpassungen in der CSS Snippets Kategorie, welche als generelle Beispiele dienen. Bitte beachte, dass die vorgestellten Schnipsel möglicherweise nicht in allen Themes gleichermaßen funktionieren.

 


Falls du Hilfe mit deinen CSS Anpassungen benötigst, können wir einige WordPress Experten empfehlen, welche dir mit Sicherheit gerne weiterhelfen.