Hoe Blockquotes Style in WordPress-thema's aan te passen

Citaten zijn vaak het meest gedenkwaardige deel van uw artikel. Ze zijn ook het meest gedeelde deel van elke post of presentatie. Dit is de reden waarom kranten en mainstream mediasites hun blockquote stijl aanpassen om het op te laten vallen. In dit artikel laten we je zien hoe je de blockquotes-stijl kunt aanpassen in WordPress en dat je kunt zien 9 mooie voorbeelden van aangepaste blockquotes-stijl.

Met WordPress kunt u blockquotes toevoegen aan uw berichten en pagina's door het werkbalkgebied in uw schrijfsectie te gebruiken.

Dit voegt een beetje HTML toe aan je bericht die we kunnen gebruiken om de styling aan te passen. Opmerking: we gebruiken de tekstmodus in de WordPress-berichteditor. Hieronder ziet u een voorbeeld van de HTML die u zou moeten zien.

 
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Dringende tamen en nihil remittunt. Een vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus gebruiken loqui? Huius ego nunc auctoritatem sequens idem faciam. Wijze man
 

Om de stijl van de blockquotes in uw WordPress-thema aan te passen, moeten we het bestand style.css van uw thema wijzigen. Je kunt dit doen door ofwel naar Uiterlijk »Editor in uw WordPress-beheerder of bewerk de bestanden via FTP.

Vervolgens moet u een van de hieronder voorgestelde stijlen gebruiken en uw blockquote-stijlen overschrijven. Als er geen bestaat, voegt u deze gewoon toe. Je bent ook meer dan welkom om de twee stijlen te combineren en aan te passen naar de wens van je hart.

1. Klassieke CSS Blockquote

Meestal gebruiken mensen CSS achtergrond afbeelding om grote aanhalingstekens toe te voegen in blockquote. In dit voorbeeld hebben we CSS gebruikt om grote aanhalingstekens toe te voegen.

 blockquote font-family: Georgia, serif; lettergrootte: 18px; lettertype-stijl: cursief; breedte: 450 px; marge: 0.25em 0; opvulling: 0.25em 40px; regelhoogte: 1,45; positie: relatief; kleur: # 383838; achtergrond: #ececec;  blockquote: before display: block; inhoud: "\ 201C"; lettertypegrootte: 80px; positie: absoluut; links: -10px; top: -10px; kleur: # 7a7a7a;  blockquote citeren color: # 999999; lettergrootte: 14 px; weergave: blok; margin-top: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

2. Klassieke Blockquote met afbeelding

In dit voorbeeld hebben we een achtergrondafbeelding gebruikt voor aanhalingstekens.

 blockquote font: 16px italic Georgia, serif; Breedte: 450 pixels; padding-links: 70px; padding-top: 18px; padding-bottom: 18px; opvulling rechts: 10px; achtergrondkleur: #dadada; border-top: 1px solid #ccc; border-bottom: 3px solid #ccc; marge: 5px; background-image: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); achtergrond-positie: midden links; achtergrondherhaling: geen herhaling; tekst-inspringing: 23px;  blockquote cite color: # a1a1a1; lettergrootte: 14 px; weergave: blok; margin-top: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

3. Eenvoudige Blockquote

In dit voorbeeld hebben we achtergrondkleur en gestreepte linkerrand toegevoegd in plaats van blockquotes. Speel gerust met de kleuren.

 blockquote font-family: Georgia, serif; lettergrootte: 16px; lettertype-stijl: cursief; breedte: 500 px; marge: 0.25em 0; opvulling: 0.25em 40px; regelhoogte: 1,45; positie: relatief; kleur: # 383838; border-left: 3px dashed # c1c1c1; achtergrond: #eee;  blockquote citeren color: # 999999; lettergrootte: 14 px; weergave: blok; margin-top: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

4. Wit Blauw en oranje Blockquote

Blockquotes kunnen opvallen en ze kunnen net zo kleurrijk zijn als u wilt.

 blockquote font-family: Georgia, serif; lettergrootte: 16px; lettertype-stijl: cursief; breedte: 450 px; marge: 0.25em 0; opvulling: 0.25em 40px; regelhoogte: 1,45; positie: relatief; kleur: #FFF; border-left: 5px solid # FF7F00; background: # 4b8baf;  blockquote citeren color: #efefef; lettergrootte: 14 px; weergave: blok; margin-top: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

5. Gebruik Google Web Fonts voor Blockquotes in CSS

In dit blockquote CSS-voorbeeld hebben we het lettertype Droid Serif uit de webbrowser van Google gebruikt.

 blockquote @import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); font-family: 'Droid Serif', serif; font-size: 16px; font-style: italic; Breedte: 450 pixels; background-color: # fbf6f0; border-left: 3px dashed # d5bc8c; border-right: 3px dashed # d5bc8c; text-align: center;  blockquote cite color: # a1a1a1; lettergrootte: 14 px; weergave: blok; margin-top: 5px;  blockquote cite: before content: "\ 2014 \ 2009";  

6. Ronde hoek Blockquote

In dit voorbeeld hebben we een blokquote met afgeronde hoeken en we hebben slagschaduw gebruikt voor randen.

 blockquote width: 450px; achtergrondkleur: # f9f9f9; border: 1px solid #ccc; grensradius: 6px; box-shadow: 1px 1px 1px #ccc; lettertype-stijl: cursief;  blockquote cite: before content: "\ 2014 \ 2009";  

7. Verloop gebruiken als achtergrond voor Blockquote

In dit CSS blockquote-voorbeeld hebben we CSS3-gradiënt gebruikt om de achtergrond van blockquote te verbeteren. CSS-gradiënten zijn lastig, vanwege de compatibiliteit tussen browsers. We raden aan om colorlabs, CSS gradient generator te gebruiken.

 blockquote width: 450px; color: # fff; achtergrond: # 7d7e7d; / * Oude browsers * / achtergrond: -moz-linear-gradient (bovenaan, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleur-stop (0%, # 7d7e7d), kleur-stop (100%, # 0e0e0e)); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / achtergrond: -ms-linear-gradient (boven, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / achtergrond: lineair verloop (naar beneden, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / border: 1px solid #ccc; grensradius: 6px; box-shadow: 1px 1px 1px #ccc; lettertype-stijl: cursief;  blockquote cite: before content: "\ 2014 \ 2009";  

8. Blockquote met achtergrondpatroon

In dit voorbeeld hebben we een achtergrondafbeelding gebruikt als patroon voor blockquote.

 blockquote width: 450px; background-image: url ( 'http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); border: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; lettertype-stijl: cursief;  blockquote cite: before content: "\ 2014 \ 2009";  

9. Meerdere afbeeldingen gebruiken in Blockquote achtergrond

U kunt meerdere afbeeldingen in blockquote achtergrond gebruiken met css. In dit voorbeeld hebben we gebruikt blockquote: vóór pseudo-element om een ​​andere achtergrondafbeelding toe te voegen aan blockquote.

 blockquote width: 450px; background-image: url ( 'http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); border: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; lettertype-stijl: cursief;  blockquote: before position: absolute; margin-top: -20px; margin-left: -20px; Inhoud: url ( 'http://example.com/wp-content/themes/your-theme/images/pin.png');  blockquote cite: before content: "\ 2014 \ 2009";  

We hopen dat u dit artikel nuttig hebt gevonden bij het leren aanpassen van blockquotes-stijl in WordPress. Als u vragen of suggesties heeft, kunt u hieronder een reactie achterlaten.