Minima Tutorials, Tipps & Tutorials, tutorial

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 Comments

  1. Sarah

    4. September 2015 at 18:33

    Vielen Dank, nach Variante 6 hab ich schon eine ganze Weile gesucht! 😀

    LG Sarah

  2. iivorybeauty

    4. September 2015 at 18:42

    Variante 6 gefällt mir sehr! Schöner Post 🙂

    Liebe Grüße ♥
    iivorybeauty

  3. Simone

    5. September 2015 at 9:25

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

  4. Nephi Lim

    8. September 2015 at 20:05

    Hallo, bei mit ist in "HTML bearbeiten" das".post-body blockquote {" nicht zu finden 🙁

    Woran könnte das liegen?

    LG Nephi

    1. lovemira

      8. September 2015 at 21:02

      Dann ist es einfach nicht vorhanden. Aber den kannst du einfach einfügen, funktioniert auch.

    2. Nephi Lim

      9. September 2015 at 19:17

      Wo muss ich das dann einfügen?

    3. Nephi Lim

      9. September 2015 at 19:29

      Nun hat es geklappt 🙂 Ich habe eine Kombi zwischen Variante 2 und 6 gemacht 🙂

    4. Menna El -Tawwab

      13. July 2017 at 14:56

      Wo hast du das eingefügt? 😮

  5. Miriam E.

    23. October 2015 at 19:25

    Hallo ihr Lieben, weiß jemand ob das auch bei WordPress auch funktioniert? 😀 Grüße <3

    1. lovemira

      23. October 2015 at 21:03

      Ja, klappt auch für WordPress 🙂

    2. lovemira

      23. October 2015 at 21:04

      Allerdings benutzt du dann nur blockquote {…} ohne das .post-body davor 🙂

    3. Kurousagi

      29. October 2015 at 13:47

      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 ?

    4. Sevin Altintas

      15. November 2016 at 23:08

      Geht mir genauso 🙁 Kann das ".post-body blockquote {" auch nicht finden…

  6. Jacqueline Linke

    20. June 2016 at 10:53

    ohje ich raff das mal gar nicht *gg*

  7. Julia H.

    18. February 2017 at 9:24

    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

  8. Denise

    24. August 2017 at 15:02

    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

  9. MaInBo

    15. April 2018 at 19:36

    Okay, Auch wenn ich es wirklich versuche, ich weiß einfach nicht, wo ich den Code einfügen muss, da ich bei mir den Code leider auch nicht finde. Ich hoffe es kann einer helfen.

Leave a Reply