Farbige Boxen mit CSS selbst gestalten
Zuletzt aktualisiert am 16. September 2019 um 08:41 Uhr
Manchmal wünscht man sich 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 tun, 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ück greifen 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 müssen wir eine 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 tragen Sie bitte in die die Custom CSS-Sektion Ihres Themes ein. Falls es einen solchen Bereich für Ihr Theme nicht gibt können Sie das Plugin „Simple Custom CSS“ installieren, das unter „Design“ einen neuen Menüpunkt „Custom CSS“ einfügt, in dem Sie den Code einfügen können.
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.
Wir könnten diesen Selektor eigentlich auch nur mit .box benennen. Allerdings ist die Wahrscheinlichkeit dann relativ groß, dass ein verwendetes Theme ein Plugin den gleichen Selektor verwendet, daher verpassen wir dem Selektor einen sogenannten „Präfix“.
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.
Sie können 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: Sie können jede beliebige Schriftfarbe über den 6-stelligen HexCode definieren. Achten Sie auf ausreichend starke Kontraste um eine gute Lesbarkeit zu gewährleisten.
border -> Rahmen um die Box
Wenn Sie Ihrer Box einen Rahmen verpassen möchten, dann können Sie 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 Sie möchten das Ihre Box abgerundete Ecken hat, dann können Sie 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 definieren Sie 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 müssen Sie ein klein wenig in den HTML-Code Ihrer Seite eintauchen.
Dafür wechseln Sie in den Texteditor des Beitrages bzw. der Seite, die Sie gerade bearbeiten und gebn 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>
definieren Sie eine neue Box, und mit der Ergänzung
class="wp_b_box"
geben Sie der Box das Aussehen, das Sie mit dem CSS-Code weiter oben gestaltet haben.
So sieht die Box dann am Ende aus:
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
Hat Ihnen dieses kleine Tutorial gefallen? Dann freue ich mich, wenn Sie es in Ihrem Netzwerk teilen.
Bildquelle
© Oleksiy Mark – Fotolia.com
