Farbige Boxen mit CSS selbst gestalten

Boxen mit farbigem Hintergrund erstellenManchmal 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.

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.

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:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

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

Print Friendly, PDF & Email

Kommentare

Farbige Boxen mit CSS selbst gestalten — 12 Kommentare

  1. Super! Das war gerade, was mir gefehlt hat. Vielen lieben Dank für die sonnenklare Erklärung. Da bleiben keine Fragen mehr offen! Was bin ich froh, diese Seite gleich gefunden zu haben! So lerne ich immer wieder was dazu. DANKE!!!

  2. Liebe Michaela,

    vielen vielen Dank. Wirklich! Eine einfach nachvollziehbare und schnell umsetzbare Variante. Habe das soeben selbst ausprobiert und meine Seite damit aufgewertet.

    Liebe Grüße,
    Gerd

  3. Liebe Michaela,

    vielen lieben Dank für den übersichtlichen Artikel! Damit habe ich es ohne Probleme geschafft, eine Box zu erstellen und das Layout anzupassen.

    Danke!

    Katharina

  4. Pingback: Rahmen um den Text, Farbfläche usw. | Wegerl

  5. Liebe Michaela,

    herzlichen Dank für diesen übersichtlichen und absolut hilfreichen Artikel!

    sowohl mit PageBuilder als auch mit Shortcode Ultimate hatte ich Probleme bei der Anzeige von Shortcodes in der Box, mit deinem Tipp hat es nun gleich tadellos geklappt.

    Da habe ich mich natürlich sehr gefreut und danke dir ganz herzlich!

    Viele Grüße
    Thomas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren