Farbige Boxen mit CSS selbst gestalten
Zuletzt aktualisiert am 28. Dezember 2024 um 02:24 Uhr
Manchmal wünschst Du Dir eine farbige Box für eine WordPress-Seite, z.B. um ein bestimmtes Merkmal eines Angebotes besonders hervorheben zu können.
Einige Themes bringen diese Boxen schon mit. Aber was tust Du, wenn das eigene Theme keine integrierten Boxen kennt? Eine Möglichkeit ist dann natürlich das Plugin Shortcodes Ultimate, das ich in einem meiner Webinare schon einmal vorgestellt habe.
Wer dafür aber nicht auf ein Plugin zurückgreifen möchte, der kann eine solche Box mit ein wenig CSS auch ganz einfach selbst gestalten.
Inhaltsverzeichnis
Farbige Box per CSS definieren
Um die Box zu definieren musst Du eine Klasse für diese Box im Stylesheet definieren:
.wp_b_box {
padding: 10px;
background: #ffffaa;
color: #7f1d31;
border: 2px solid #7f1d31;
border-radius: 5px;
font-size: 16px;
font-family: Georgia, 'Times New Roman', serif;
}
Diesen Code trage bitte unter Design – Customizer – Custom CSS ein.
Bedeutung der CSS-Regeln
.wp_b_box -> Das ist der Selektor für diese Regel
Der vorangestellte Punkt definiert eine sogenannte CSS-Klasse, die mit class=“wp_b_box“ in das HTML-Element eingefügt wird.
Du könntest diesen Selektor eigentlich auch nur mit .box benennen. Allerdings ist die Wahrscheinlichkeit dann relativ groß, dass ein verwendetes Theme oder ein Plugin denselben Selektor verwendet, daher verpassen wir dem Selektor einen sogenannten „Präfix“. Ich verwende hier wp_b, abgeleitet von WP Bistro. Du bist in der Benennung des Selektors völlig frei.
padding -> Dieser Wert definiert den Innenabstand des Elementes.
Je größer dieser Wert ist, desto größer wird der Abstand des Textes innerhalb der Box zu den Rändern der Box.
background -> Das definiert die Farbe des Hintergrundes, also die Farbe der Box.
Du kannst für die Farbe auch den Klarnamen der Schrift in Englisch verwenden (z.B. „black“, „red“, „green“, …).
color -> Die Farbe der Schrift
Auch hier gilt: Du kannst jede beliebige Schriftfarbe über den 6-stelligen HexCode definieren. Achte auf ausreichend starke Kontraste, um eine gute Lesbarkeit zu gewährleisten.
border -> Rahmen um die Box
Wenn Du Deiner Box einen Rahmen verpassen möchtest, dann kannst Du das mit diesem Wert erreichen.
Je größer die angegebene Pixelzahl, desto breiter wird der Rahmen.
„solid“ heißt, dass der Rahmen in einer durchgehenden Linie angezeigt wird. Alternativen wären z.B. „dotted“ (also gepunktet), „dashed“ (gestrichelt) oder „double“ (eine Doppellinie).
Der nächste Wert definiert die Farbe der Umrandung:
border-radius -> definiert runde Ecken
Wenn Du möchtest, dass Deine Box abgerundete Ecken hat, dann kannst Du diese über border-radius definieren. Je größer der Wert, desto runder die Ecken.
font-family -> Die Schriftart innerhalb der Box
Der erste Wert definiert die Schriftart, die gewünscht ist (Georgia). Ist Georgia auf dem Rechner, mit dem die Website aufgerufen wird, nicht installiert, wird eine Ausweichschrift (Times New Roman) aufgerufen.
Sind beide Schriften nicht verfügbar, wird eine beliebige serifenlose Schrift (serif) angezeigt.
font-size -> Mit diesem Wert definierst Du die Größe der Schrift innerhalb der Box. Je größer der Pixelwert, desto größer die Schrift.
Willst Du WordPress noch besser verstehen?
Werde Stammgast im WP Bistro und erhalte künftig alle Infos zu neuen Tutorials, Blogbeiträgen sowie Kursen und Webinaren - direkt in Dein Postfach.Ja, ich will dabei sein!
Die Box im HTML-Code einfügen
Damit die Box auch tatsächlich angezeigt wird, musst Du ein klein wenig in den HTML-Code Deiner Seite eintauchen.
Dafür wechselst Du in den Texteditor des Beitrages bzw. der Seite, die Du gerade bearbeitest, und gibst an der Stelle, an der die Box erscheinen soll, folgenden Code ein:
<div class="wp_b_box">Hier kommt der Inhalt der Box</div>
Mit
<div> </div>
definierst Du eine neue Box, und mit der Ergänzung
class="wp_b_box"
gibst Du der Box das Aussehen, das Du mit dem CSS-Code weiter oben gestaltet hast.
So sieht die Box dann am Ende aus:
Hat Dir dieses kleine Tutorial gefallen? Dann freue ich mich, wenn Du es in Deinem Netzwerk teilst.
Bildquelle
© Oleksiy Mark – Fotolia.com
