Das CSS Box Modell

Viele WordPress Themes bieten farbige Boxen an, in denen du etwas besonders hervorheben kannst. Es gibt aber auch (meist kostenlose) Themes, die dieses Feature nicht anbieten. Dann müsstest du dir ein zusätzlichen Plugin installieren, was aber deine Website langsamer macht. Aus diesem Grund empfehle ich dir das CSS Box Modell, denn mit ein bisschen CSS-Code kannst du schöne farbige Boxen selber gestalten.

 

Die Definition der CSS Box

Bevor du die CSS Box im HTML einbinden kannst, musst du den Container im CSS-Stylesheet definieren. Entweder ist im WordPress Theme ein Menüpunkt für die Custom-CSS Einstellungen vorhanden, ansonsten kannst du auch dazu ein Plugin verwenden, wie z.B. Simple Custom CSS

.info_box {
      background: #ff0000;
      color: #ffffff;
      padding: 10px;
      border: 1px solid #888888;
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
}

 

Die Box im HTML Quelltext einfügen

Gerade haben wir das Aussehen des Buttons in der Custon-CSS eingestellt. Damit die Box auch auf deiner Website erscheint, musst du im HTML Quelltext das CSS Box Modell aufrufen. Dazu gehst du zu der Stelle, wo die Box erscheinen soll und gibst folgenden HTML Quellcode ein:

<div class="info_box">Der Text, der in der Box stehen soll</div> 

Mit dem Befehl “div” wird ein Container erstellt, der die Eingenschaften der Klasse “info_box” besitzt. Und der Text, der zwischen <div class=”info_box”> und </div> steht, erscheint dann in der erstellten Box.

 

So sieht das fertige CSS Box Modell aus

Der Text, der in der Box stehen soll

 

Was bedeuten die einzelnen CSS Regeln ?

.info_boxHierbei handelt es sich um den Selektor für die CSS Regel
backgroundHier wird die Hintergrundfarbe der CSS Box definiert
colorDie Schriftfarbe
paddingHier wird der Innenabstand vom Text zum Rahmen definiert
borderDas Aussehen des Rahmens unserer Box
border-radiusDie Rundungen der Ecken
font-sizeSchriftgröße
text-alignDie Ausrichtung der Schrift in der Box

 

Hinterlasse jetzt einen Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*