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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb1r1CMa2Fwh7Bg_gYOQDDZ3y08D56QctwdnLN9MY99OfV-FFqczhPyjagRMEHrksBnJQ-2SirCKqbfGwxbl2vAcOLyIXIG-Xpa92MIihR8mEy9keu5TdcaqvEaJ5UwTA52afDksRxuVL4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPa5eUlIcfmUbVFxllop0DlY2_tInFM0pmb7rpiUeps2BTeAMnVAWAPOg4D1XWN0p2sEP9_a0nWTyyOMtG05so_nBHErGPznmd1Ax2REBgFHvXU4grrcqUANuNQPQ9t5kC1ezMhr615B6/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.