Zitatbox gestalten

Hallo Ihr Lieben,

heute zeige ich euch, wie man den Zitatbox schöner gestalten kann. Außerdem habe ich euch 6 Varianten vorbereitet, die ihr so übernehmen oder abgeändern könnt.

Sucht im "HTML bearbeiten" nach:

.post-body blockquote {

Darunter könnt ihr nun beliebige CSS-Codes einfügen, die eure Zitatbox zu etwas besonderem machen. Mögliche Eigenschaften für euer Zitatbox findet ihr im CSS-Katalog.

Variante 1:

Mit einem Strich links.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}

Variante 2: 

Mit einem Rahmen.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
border: 1px solid #ea808b;
}

Variante 3:

Der erste Buchstabe ist anders als der Rest. Für diese Variante muss eure gewünschte Schriftart über </head> im HTML eingebaut sein (Wie das geht?). 
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
}
.post-body blockquote:first-letter {
font-family: 'Great Vibes';
font-size: 35px;
}

Variante 4:

Die Box ist mit einem Hintergrund versehen.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
background: url(https://3.bp.blogspot.com/-z17okhZHJX0/VeNHCJGXttI/AAAAAAAAJJg/PF7IYyJJw00/s320/squares4.jpg);
padding: 20px;
margin: 1em 0 1em 10px;
}

Variante 5:

Bei dieser Variante werden vor und nach dem eigentlichen Zitat Zeichen angehängt.
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
.post-body blockquote:before {
content: '" ';
}
.post-body blockquote:after {
content: ' "';
}

 Variante 6:

Hier wird gezielt ein Hintergrund gesetzt, sodass ein Anführungszeichen links oben auftaucht.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
background: url(https://3.bp.blogspot.com/-lkaSq8Ynu4M/VeNKRBUSypI/AAAAAAAAJJ4/1saDDhCl8bY/s1600/quote.png) no-repeat;
background-position-x: left;
background-position-y: top;
}

Wo kann ich eine Zitatbox machen? 

Im Posteditor, wo ihr euren Post schreibt, könnt ihr die Zitatbox einsetzen. Ihr markiert einfach eure gewünschte Textstelle und klickt auf die "-Anführungszeichen oben in der Werkzeugleiste.
Um den Stil auch in einem HTML/Javascript-Widget zu benutzen, fügt ihr ein <blockquote> vor und ein </blockquote> nach den als Zitat anzuzeigenen Text ein.

17 Kommentare

  1. Vielen Dank, nach Variante 6 hab ich schon eine ganze Weile gesucht! :D

    LG Sarah

    AntwortenLöschen
  2. Variante 6 gefällt mir sehr! Schöner Post :)

    Liebe Grüße ♥
    iivorybeauty

    AntwortenLöschen
  3. Wie schön sie sind deine hübschen Zitatboxen. Sehr schön, werde ich auf alle Fälle ausprobieren. Vielen Dank fürs Teilen. ♥

    AntwortenLöschen
  4. Hallo, bei mit ist in "HTML bearbeiten" das".post-body blockquote {" nicht zu finden :(

    Woran könnte das liegen?

    LG Nephi

    AntwortenLöschen
    Antworten
    1. Dann ist es einfach nicht vorhanden. Aber den kannst du einfach einfügen, funktioniert auch.

      Löschen
    2. Wo muss ich das dann einfügen?

      Löschen
    3. Nun hat es geklappt :) Ich habe eine Kombi zwischen Variante 2 und 6 gemacht :)

      Löschen
  5. Hallo ihr Lieben, weiß jemand ob das auch bei Wordpress auch funktioniert? :D Grüße <3

    AntwortenLöschen
    Antworten
    1. Ja, klappt auch für Wordpress :)

      Löschen
    2. Allerdings benutzt du dann nur blockquote {...} ohne das .post-body davor :)

      Löschen
    3. Mir gefällt Variante 3 sehr gut.
      Vielen Dank dafür :)

      Ich kann nur leider das ".post-body blockquote {" nicht finden.
      Muss ich das dann an einer bestimmten Stelle einfügen ?

      Löschen
    4. Geht mir genauso :( Kann das ".post-body blockquote {" auch nicht finden...

      Löschen
  6. Tolle Anleitung, hat wirklich sofort geklappt! Ich habe mich für Variante 6 entschieden, aber wie kann ich die Farbe von den Anführungszeichen ändern? Rosarot passt nicht so gut zu der Hauptfarbe meines Designs :)

    LG Julia

    AntwortenLöschen
  7. Ich finde die Zeile .post-body blockquote { leider auch nicht. Wo kann ich Variante 6 einfügen, ohne dass mein Blog ins Wasser fällt?

    LG Menna von Lines & Rhymes Universe

    AntwortenLöschen
  8. Ich finde die Zeile .post-body blockquote { leider auch nicht. Wo kann ich Variante 6 einfügen, ohne das sich bei meinem Blog alles ändert?

    LG
    Denise

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!