7 simple CSS-Befehle, die deine WordPress-Website verschönern (inkl. Video-Tutorial)

Lesedauer: 5 Minuten

Beitrag von Julia Recker

Der erste Eindruck ist entscheidend – das gilt auch für deine Website oder deinen Blog. Dein Content kann noch so toll sein, stimmt das Design nicht schreckt das viele Leser und potentielle KundInnen ab. Mittlerweile gibt es eine Vielzahl an Websites und Blogs im Netz. Du musst dich daher – unter anderem – mit einem individuellen Design abheben.

Ein gutes WordPress-Theme ist dafür unumgänglich. In diesem Artikel gehe ich davon aus, dass du das für dich optimale Theme bereits gefunden hast. Auch wenn dieses Theme mit zahlreichen Kriterien deines Wunsch-Designs übereinstimmt, bin ich mir sicher, dass du die ein oder andere Kleinigkeit noch ändern möchtest. Wie du das ganz einfach und in nur wenigen Schritten mit simplen CSS-Befehlen schaffst, erkläre ich dir in diesem Artikel.

Optik vs. Benutzerfreundlichkeit

Manche Dinge mögen zwar schick aussehen, mindern aber die Benutzerfreundlichkeit – diese sollte jedoch in jedem Fall vorgehen. Gerade bei der Wahl der Schrift und deren Farbe ist dieser Punkt besonders wichtig.

Die Schrift deiner Wahl darf ausgefallen sein. Doch achte immer darauf, dass sie gut lesbar ist. Eine helle Schrift auf einem dunklen Hintergrund ist für das Auge auf Dauer zudem sehr anstrengend. Wähle für deinen Content-Hintergrund daher eine neutrale, helle Farbe.

Behalte diese Grundregeln im Kopf, wenn du mit Hilfe von CSS-Befehlen Änderungen an deinem WordPress-Design vornimmst.

Was ist das eigentlich – CSS?

Die Abkürzung CSS steht für Cascading Style Sheets und hinter ihr versteckt sich eine der Kernsprachen des Webs. Eine CSS-Datei enthält Anweisungen, die besagen, wie etwas im Browser genau angezeigt wird. Sämtliche Eigenschaften aus den Bereichen Design und Layout werden hier definiert: Größe, Farbe, Positionierung und, und, und. CSS-Befehle werden immer auf Englisch geschrieben.

Ein CSS-Befehl ist in der Regel immer nach dem selben Prinzip aufgebaut. Die eigentliche Anweisung wird von geschweiften Klammern umgeben.

Noch vor der ersten Klammer wird definiert, welches Element verändert werden soll. Im Beispiel ist es das a-Element, welches für sämtliche Links steht. Wie du siehst, ist ein einzelner CSS-Befehl in der Regel recht simpel – auch wenn du beim ersten Öffnen einer CSS-Datei zunächst regelrecht erschlagen wirst von der Flut an Informationen und Zeichenkombinationen.

Mit einem simplen WordPress-Plugin kannst du deine eigenen CSS-Befehle anwenden

Jedes Theme beinhaltet eine CSS-Datei. An dieser solltest du jedoch keine Veränderungen vornehmen. Wesentlich sicherer, und auch simpler, kannst du CSS-Änderungen über das Plugin “Simple Custom CSS” vornehmen.

Installiert wird dieses Plugin wie jedes andere Plugin auch. Eine genau Anleitung für die Verwendung des Plugins findest du in meinem Video.

Nach der Installation des Plugins erhältst du in deinem WordPress-Backend unter dem Punkt “Design” einen weiteren Unterpunkt mit dem Namen “Custom CSS”. Dort findest du nun ein Eingabefeld, in das du einzelne CSS-Befehle hineinkopieren kannst. Mit Updaten des CSS-Codes wird der ursprüngliche Code deines Themes überschrieben und die Veränderung wird auf deinem Blog oder deiner Website sichtbar.

7 CSS-Code-Schnipsel, die dein WordPress-Theme verschönern

Habe keine Angst beim Ausprobieren von den CSS-Befehlen. So lange du keine Veränderungen in der originalen CSS-Datei deines Themes vornimmst, sondern lediglich über das CSS-Plugin, kannst du nichts “kaputt” machen.

Sollte einmal etwas doch nicht so funktionieren, wie du es dir vorgestellt hast, löschst du den im Eingabefeld eingetragenen CSS-Code einfach und der ursprüngliche Zustand ist wieder hergestellt.

Die folgenden 7 CSS-Code-Schnipsel kannst du ganz einfach in das Eingabefenster deines neuen Plugins kopieren. Die kursiven Bausteine sind variabel und können individuell angepasst werden.

#1 Ändere die Schriftart

* {
font-family: ‚Arial, Helvetica, sans-serif‚;
}

Mit dem *-Element adressierst du sämtliche Inhalte deines Blogs – was bei der Anpassung der Schrift durchaus sinnvoll ist. In meinem Beispiel habe ich die sehr klassische Schrift Arial verwendet. In dem Artikel “10 Fonts für den problemlosen Einsatz mit CSS” auf t3n findest du weitere Schriften, die du durch die kursive Variabel ersetzen kannst.

#2 Hebe deine Links farblich hervor

a {
color: green;
}

Mit dem a-Element sprichst du sämtliche Links eines Blogs an. Damit sie für deine Leser besser sichtbar sind, oder vielleicht auch einfach besser zum Rest des Designs deines Blogs passen, kannst du ihre Farbe ändern. Das “green” dient wieder bloß als Beispiel. In entsprechenden Farbtabellen findest du weitere CSS-Farbdefinitionen, unter denen mit Sicherheit die für dich passende dabei ist.

#3 Entferne die Linie unter Links

a {
text-decoration: none;
}

Hier sprichst du mit dem a-Element erneut die Links an. Unter deinen Links befinden sich störende Linien? Mit diesem einfachen Befehl kannst du sie entfernen. Ihre Funktion als Link verlieren sie dadurch natürlich nicht, nur die Optik wird verändert.

#4 Pass die Größe deiner Überschriften an

h1, h2, h3, h4, h5, h6 {
font-size: 40px;
}

Die meisten Themes haben standardmäßig eine andere Schriftgröße für die Überschriften vorgesehen als für den restlichen Content-Text. Sind dir deine Überschriften zu groß oder zu klein, kannst du ihre Größe mit diesem CSS-Befehl anpassen.

In meinem Beispiel habe ich alle Arten an Überschriften von h1 bis h6 auf einmal angesprochen. Natürlich kannst du bei Bedarf den Befehl auch ausschließlich auf deine h1-Überschriften oder eine Auswahl an Überschriften anwenden.

Um die exakt passende Größe zu finden, musst du vermutlich ein wenig herum experimentieren. Dort wo in meinem Beispiel die 40 steht, kannst du selbstverständlich jede andere beliebige Zahl einfügen.

#5 Setze deinen Text in Blocksatz

body {
text-align: justify;
}

WordPress bietet im Bearbeitungsmodus die Funktion Texte im Blocksatz anzuordnen. Hast du bereits eine Fülle an Texten erstellt und entscheidest dann auf Blocksatz umzustellen. ist es recht mühsam in jeden einzelnen Beitrag zu gehen und den Satz manuell umzustellen. Mit diesem CSS-Befehl bleibt dir das zum Glück erspart.

#6 Verwende Silbentrennung

body {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Werden deine Texte im Blocksatz angezeigt, solltest du im nächsten Schritt auf jeden Fall dafür sorgen, dass deine Wörter am Ende der Zeile getrennt werden, um unschöne große Lücken zu vermeiden.

#7 Passe die Hintergrundfarbe an

body {
background-color: white;
}

Wie oben bereits erwähnt, ist ein heller und neutraler Hintergrund für das menschliche Auge am angenehmsten und erleichtert das Lesen deiner Texte. Mit diesem Befehl kannst du die Hintergrundfarbe deines Blogs oder deiner Website anpassen. Auch hier kannst du wieder die Farbtabelle zu Rate ziehen.

Was musst du bei der Anwendung von CSS beachten?

Du musst beim CSS-Code sehr genau arbeiten. Zwar schreibst du ihn nicht selbst, sondern kopierst ihn lediglich, achte aber unbedingt darauf, dass du beim Kopieren kein Zeichen vergisst.

Lässt du die letzte geschweifte Klammer weg, so ist dein CSS-Befehl nicht geschlossen. Es wird keine Veränderung auf deinem Blog oder deiner Website sichbar werden.

Beim Austauschen der Variablen musst du zudem darauf achten, dass du das Semikolon nicht versehentlich löschst. Auch in diesem Fall wird dein CSS-Befehl nicht funktionieren.

CSS kann noch viel mehr

Die CSS-Befehle, die ich dir vorgestellt habe, sind sehr simpel. Doch sie haben einen großen Vorteil: Sie sind auf jedes Theme anwendbar.

Trotz ihrer Einfachheit bewirken die CSS-Befehle teils bereits große Veränderungen. Du kannst dir also denke ich vorstellen, was mit spezifischeren CSS-Befehlen noch alles möglich ist.

Gerne würde ich dir solche spezifischen Befehle nennen, doch sie unterscheiden sich von Theme zu Theme. Das Problem ist der Selektor vor der ersten geschweiften Klammer. Elemente wie das a-Element für Links sind genormt und daher bei jedem Theme gleich. Für eine Vielzahl an anderen Elementen kann der Programmierer jedoch einen eigenen Namen festlegen. Die Namen der Elemente für die Navigation beispielsweise unterscheiden sich daher meist von Theme zu Theme. Um den entsprechenden Namen des Elements herauszufinden, müsstest du in die originale CSS-Datei deines Themes schauen. Doch das ginge nun zu weit.

Wenn dich nun die Lust am Designen gepackt hat und du dich noch tiefergehend mit dem Thema auseinandersetzen möchtest, kann ich dir das Video „HTML- und CSS-Elemente schnell im Browser kontrollieren“ vom Elmastudio empfehlen.

Möchtest du eine WordPress-Website erstellen?

Ich hoffe diese kleine Einführung in CSS hat dir weitergeholfen. Wenn du ein Online-Business starten willst und dafür eine Website brauchst, schau dir mal unser Programm Start With Ease an. In Start With Ease lernst du alles, was du für den Start deines Online-Business brauchst – zum Beispiel, wie du eine WordPress-Website an nur einem Wochenende erstellst.