Cum să personalizați stilul Blockquotes în temele WordPress

Citatele sunt adesea partea cea mai memorabilă din articol. Ele sunt, de asemenea, cea mai comună parte a oricărei postări sau prezentări. Acesta este motivul pentru care ziarele și site-urile mass-media de fluxuri personalizate personalizează stilul lor de blocaj pentru a face să iasă în evidență. În acest articol, vă vom arăta cum să personalizați stilul de blocuri în WordPress împreună cu afișarea a 9 exemple frumoase de stil de blocuri de personalizate.

WordPress vă permite să adăugați blockquotes în postările și paginile dvs. utilizând zona de bara de instrumente din secțiunea de scriere.

Acest lucru va adăuga un mic cod HTML în postarea pe care îl putem folosi pentru personalizarea stilului. Notă: folosim modul text în editorul de posturi WordPress. Mai jos este un exemplu de HTML pe care ar trebui să îl vedeți.

 
E posibilă paria non esse. Pudebit te, întrebam, tabelul illius, quam Cleanthes sane commode verbis depingere solebat. Urgentă și tămăduire. Un vero dislicuit ea, care tributa este animi virtutibus tanta praestantia? Sint ista Graecorum; Cum se poate conveni, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam. Înțeleptul om
 

Pentru a personaliza stilul de blocuri în tema WordPress, va trebui să modificăm fișierul style.css al temei. Puteți face acest lucru fie mergând la Aspect »Editor în administratorul WordPress sau editați fișierele prin FTP.

Apoi, va trebui să utilizați unul dintre stilurile sugerate mai jos și să înlocuiți stilurile dvs. de blocare. Dacă nu există, atunci adăugați doar acestea. Sunteți, de asemenea, mai mult decât bineveniți să combinați cele două stiluri și personalizați dorința inimii voastre.

1. Clasic bloc CSS

De obicei, utilizatorii folosesc CSS imagine de fundal pentru a adăuga ghilimele mari în bloc. În acest exemplu, am folosit CSS pentru a adăuga ghilimele mari.

 blochează font-family: Georgia, serif; font-size: 18px; font-style: italic; lățime: 450px; marja: 0,25em 0; umplutura: 0.25m 40px; Înălțimea liniei: 1,45; poziție: relativă; culoare: # 383838; fundal: #ececec;  blockquote: înainte de display: block; conținut: "\ 201C"; font-size: 80px; poziția: absolută; stânga: -10px; top: -10px; culoare: # 7a7a7a;  blockquote cite culoare: # 999999; font-size: 14px; afișare: bloc; margin-top: 5px;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

2. Clasic bloc cu imagine

În acest exemplu am folosit o imagine de fundal pentru ghilimele.

 blockquote font: 16px italic Georgia, serif; lățime: 450px; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; fundal-culoare: #dadada; frontieră: 1px solid #ccc; frontieră-fund: 3px solid #ccc; margine: 5px; fundal-imagine: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); pozitie fundal: stanga mijloc; background-repeat: nu-repeta; text-indent: 23px;  blochează cite culoare: # a1a1a1; font-size: 14px; afișare: bloc; margin-top: 5px;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

3. Blockquote simplu

În acest exemplu, am adăugat culoarea de fundal și frontiera stângă în stânga locului, în locul blocurilor. Simțiți-vă liber să jucați cu culorile.

 blochează font-family: Georgia, serif; font-size: 16px; font-style: italic; lățime: 500px; marja: 0,25em 0; umplutura: 0.25m 40px; Înălțimea liniei: 1,45; poziție: relativă; culoare: # 383838; frontieră-stânga: 3px dashed # c1c1c1; fundal: #eee;  blockquote cite culoare: # 999999; font-size: 14px; afișare: bloc; margin-top: 5px;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

4. albastru alb și bloc de portocaliu

Blockquotes pot fi făcute în standout și pot fi la fel de colorate pe cât doriți să fie.

 blochează font-family: Georgia, serif; font-size: 16px; font-style: italic; lățime: 450px; marja: 0,25em 0; umplutura: 0.25m 40px; Înălțimea liniei: 1,45; poziție: relativă; culoare: #FFF; frontal-stânga: 5 pixeli solizi # FF7F00; fundal: # 4b8baf;  blockquote cite culoare: #efefef; font-size: 14px; afișare: bloc; margin-top: 5px;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

5. Utilizarea Fonturilor Google Web pentru Blockquotes în CSS

În acest exemplu de blocare CSS am folosit fontul Droid Serif din biblioteca de fonturi Google web.

 blochează @import url (http://fonts.googleapis.com/css?family=Droid+Serif:400italic); font-family: 'Droid Serif', serif; font-size: 16px; -Stil de font: italic; lățime: 450px; background-color: # fbf6f0; frontieră-stânga: 3px dashed # d5bc8c; frontieră-dreapta: 3px dashed # d5bc8c; text-align: center;  blochează cite culoare: # a1a1a1; font-size: 14px; afișare: bloc; margin-top: 5px;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

6. Roundquot Blockquote

În acest exemplu, avem blocuri de bloc cu colțuri rotunjite și am folosit umbra de umplere pentru granițe.

 blocaj width: 450px; fundal-culoare: # f9f9f9; frontieră: 1px solid #ccc; raza de graniță: 6px; box-shadow: 1px 1px 1px #ccc; font-style: italic;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

7. Utilizarea Gradientului ca fundal pentru Blockquote

În acest exemplu de blocare CSS, am folosit gradientul CSS3 pentru a spori fundalul blocului de bloc. Gradienții CSS sunt dificil, datorită compatibilității cu browserul încrucișat. Vă recomandăm să utilizați colorlabs, generator de gradienți CSS.

 blocaj width: 450px; Culoare: #fff; fundal: # 7d7e7d; / * Browsere vechi * / background: -moz-linear-gradient (top, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # 7d7e7d), oprire color (100%, # 0e0e0e); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / fundal: -ms-linear-gradient (top, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / fundal: gradient linear (la fund, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / frontieră: 1px solid #ccc; raza de graniță: 6px; box-shadow: 1px 1px 1px #ccc; font-style: italic;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

8. Blockquote cu model de fundal

În acest exemplu, am folosit o imagine de fundal ca model pentru blockquote.

 blocaj width: 450px; background-image: url ( 'http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); frontieră: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; font-style: italic;  blockquote cite: înainte de content: "\ 2014 \ 2009";  

9. Folosirea imaginilor multiple în Background Blockquote

Aveți posibilitatea să utilizați mai multe imagini în fundal blockquote utilizând css. În acest exemplu am folosit blockquote: înainte pseudo element pentru a adăuga o altă imagine de fundal pentru blocare.

 blocaj width: 450px; background-image: url ( 'http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); frontieră: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; font-style: italic;  blockquote: înainte de position: absolute; margin-top: -20px; margin-left: -20px; Conținut: URL-ul ( 'http://example.com/wp-content/themes/your-theme/images/pin.png');  blockquote cite: înainte de content: "\ 2014 \ 2009";  

Sperăm că ați găsit acest articol util în învățarea modului de a personaliza stilul de blocuri în WordPress. Dacă aveți întrebări sau sugestii, vă rugăm să lăsați un comentariu mai jos.