So passen Sie den Blockquotes-Stil in WordPress-Themes an

Zitate sind oft der denkwürdigste Teil Ihres Artikels. Sie sind auch der am meisten geteilte Teil eines Beitrags oder einer Präsentation. Aus diesem Grund passen Zeitungen und Mainstream-Medienseiten ihren Blockquote-Stil an, um sie hervorzuheben. In diesem Artikel zeigen wir Ihnen, wie Sie den Blockquotes-Stil in WordPress anpassen und 9 schöne Beispiele für den benutzerdefinierten Blockquotes-Stil anzeigen können.

Mit WordPress können Sie Blockquotes in Ihren Posts und Seiten hinzufügen, indem Sie den Symbolleistenbereich in Ihrem Schreibabschnitt verwenden.

Dies fügt ein wenig HTML in Ihren Beitrag ein, mit dem wir die Gestaltung anpassen können. Hinweis: Wir verwenden den Textmodus im PostPress-Editor von WordPress. Unten finden Sie ein Beispiel für den HTML-Code, den Sie sehen sollten.

 
Ea Possuntypia non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane Kommode verbis depingere solebat. Dringende Tamen und Nihil Remittunt. Ein großer Spaß, wie es sich für eine animierte Virtuose Tanta Praestantia gehört? Sint ista Graecorum; Cur igitur, cum rekonstruieren, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam. Weiser Mann
 

Um den Blockquotes-Stil in Ihrem WordPress-Design anzupassen, müssen Sie die style.css-Datei Ihres Designs ändern. Sie können dies tun, indem Sie entweder zu gehen Aussehen »Editor in Ihrem WordPress-Admin oder bearbeiten Sie die Dateien per FTP.

Als Nächstes müssen Sie einen der unten vorgeschlagenen Stile verwenden und Ihre Blockquote-Stile überschreiben. Wenn keine vorhanden sind, fügen Sie diese einfach hinzu. Sie sind auch herzlich willkommen, die beiden Stile zu kombinieren und an Ihre Herzenswünsche anzupassen.

1. Klassische CSS-Blockquote

Normalerweise wird CSS verwendet Hintergrundbild große Anführungszeichen in Blockquote hinzufügen. In diesem Beispiel haben wir CSS verwendet, um große Anführungszeichen hinzuzufügen.

 Blockquote Schriftfamilie: Georgia, Serife; Schriftgröße: 18px; Schriftstil: kursiv; Breite: 450px; Marge: 0,25em 0; Polsterung: 0,25 & min; 40px; Zeilenhöhe: 1,45; Position: relativ; Farbe: # 383838; Hintergrund: #ececec;  blockquote: before display: block; Inhalt: "\ 201C"; Schriftgröße: 80px; Position: absolut; links: -10px; oben: -10px; Farbe: # 7a7a7a;  Blockquote zitieren color: # 999999; Schriftgröße: 14px; Bildschirmsperre; Rand oben: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

2. Klassische Blockquote mit Bild

In diesem Beispiel haben wir ein Hintergrundbild für Anführungszeichen verwendet.

 blockquote font: 16px kursiv Georgia, Serife; Breite: 450px; Polsterung links: 70px; Polsterauflage: 18px; Polsterung unten: 18px; Polsterung rechts: 10px; Hintergrundfarbe: #dadada; Border-Top: 1px fest #ccc; Rahmen unten: 3px fest #ccc; Marge: 5px; Hintergrundbild: URL (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); Hintergrundposition: Mitte links; Hintergrundwiederholung: keine Wiederholung; Text-Gedankenstrich: 23px;  blockquote zitieren color: # a1a1a1; Schriftgröße: 14px; Bildschirmsperre; Rand oben: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

3. Einfache Blockquote

In diesem Beispiel haben wir Hintergrundfarbe und einen gestrichelten linken Rand anstelle von Blockanweisungen hinzugefügt. Fühlen Sie sich frei, mit den Farben zu spielen.

 Blockquote Schriftfamilie: Georgia, Serife; Schriftgröße: 16px; Schriftstil: kursiv; Breite: 500px; Marge: 0,25em 0; Polsterung: 0,25 & min; 40px; Zeilenhöhe: 1,45; Position: relativ; Farbe: # 383838; Rahmen links: 3px gestrichelt # c1c1c1; Hintergrund: #eee;  Blockquote zitieren color: # 999999; Schriftgröße: 14px; Bildschirmsperre; Rand oben: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

4. Weiß Blau und Orange Blockquote

Blockquotes können hervorgehoben werden und sie können genauso farbenfroh sein, wie Sie es möchten.

 Blockquote Schriftfamilie: Georgia, Serife; Schriftgröße: 16px; Schriftstil: kursiv; Breite: 450px; Marge: 0,25em 0; Polsterung: 0,25 & min; 40px; Zeilenhöhe: 1,45; Position: relativ; Farbe: #FFF; Rahmen links: 5px fest # FF7F00; Hintergrund: # 4b8baf;  blockquote cite color: #efefef; Schriftgröße: 14px; Bildschirmsperre; Rand oben: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

5. Verwenden von Google Web Fonts für Blockquotes in CSS

In diesem CSS-Beispiel für blockquote haben wir die Droid Serif-Schriftart aus der Google Web Fonts Library verwendet.

 blockquote @import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); Schriftfamilie: 'Droid Serif', Serife; Schriftgröße: 16px; Schriftstil: kursiv; Breite: 450px; Hintergrundfarbe: # fbf6f0; Rahmen links: 3px gestrichelt # d5bc8c; Rahmen rechts: 3px gestrichelt # d5bc8c; Text ausrichten: Mitte;  blockquote zitieren color: # a1a1a1; Schriftgröße: 14px; Bildschirmsperre; Rand oben: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

6. Round Corner Blockquote

In diesem Beispiel haben wir Blockquote mit abgerundeten Ecken und wir haben für die Ränder Schlagschatten verwendet.

 Blockquote Breite: 450px; Hintergrundfarbe: # f9f9f9; Rahmen: 1px fest #ccc; Grenzradius: 6px; Box-Schatten: 1px 1px 1px #ccc; Schriftstil: kursiv;  blockquote cite: before content: "\ 2014 \ 2009";  

7. Verwenden des Farbverlaufs als Hintergrund für Blockquote

In diesem CSS-Blockquote-Beispiel haben wir den CSS3-Gradienten verwendet, um den Hintergrund der Blockquote zu verbessern. CSS-Verläufe sind aufgrund der Browser-kompatiblen Kompatibilität schwierig. Wir empfehlen die Verwendung von colorlabs, einem CSS-Gradientengenerator.

 Blockquote Breite: 450px; Farbe: #FFF; Hintergrund: # 7d7e7d; / * Alte Browser * / Hintergrund: -moz-linearer Gradient (oben, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 7d7e7d), Farbstopp (100%, # 0e0e0e)); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / Hintergrund: -ms-linearer Gradient (oben, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / background: linearer Gradient (nach unten, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / border: 1px fest #ccc; Grenzradius: 6px; Box-Schatten: 1px 1px 1px #ccc; Schriftstil: kursiv;  blockquote cite: before content: "\ 2014 \ 2009";  

8. Blockquote mit Hintergrundmuster

In diesem Beispiel haben wir ein Hintergrundbild als Muster für Blockquote verwendet.

 Blockquote Breite: 450px; Hintergrundbild: URL ('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); Rahmen: 1px fest #ccc; Box-Schatten: 1px 1px 1px #ccc; Schriftstil: kursiv;  blockquote cite: before content: "\ 2014 \ 2009";  

9. Verwenden mehrerer Bilder im Hintergrund von Blockquote

Sie können mehrere Bilder im Blockquote-Hintergrund mit css verwenden. In diesem Beispiel haben wir verwendet Blockquote: vorher Pseudoelement, um ein weiteres Hintergrundbild zu blockquote hinzuzufügen.

 Blockquote Breite: 450px; Hintergrundbild: URL ('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); Rahmen: 1px fest #ccc; Box-Schatten: 1px 1px 1px #ccc; Schriftstil: kursiv;  blockquote: vor position: absolut; Rand oben: -20px; Rand links: -20px; Inhalt: URL ('http://example.com/wp-content/themes/your-theme/images/pin.png');  blockquote cite: before content: "\ 2014 \ 2009";  

Wir hoffen, dass Sie diesen Artikel hilfreich fanden, um zu lernen, wie Sie den Stil von Blockquotes in WordPress anpassen können. Wenn Sie Fragen oder Anregungen haben, können Sie unten einen Kommentar hinterlassen.