Come personalizzare lo stile Blockquotes nei temi di WordPress

Le virgolette sono spesso la parte più memorabile del tuo articolo. Sono anche la parte più condivisa di qualsiasi post o presentazione. Questo è il motivo per cui i giornali e i principali siti di media streaming personalizzano il loro stile blockquote per farlo risaltare. In questo articolo, ti mostreremo come personalizzare lo stile blockquotes in WordPress e mostrarti 9 bellissimi esempi di stile blockquotes personalizzato.

WordPress ti consente di aggiungere blockquotes all'interno dei tuoi post e pagine utilizzando l'area della barra degli strumenti nella sezione di scrittura.

Questo aggiungerà un po 'di HTML nel tuo post che possiamo usare per personalizzare lo stile. Nota: stiamo usando la modalità testo nell'editor di post di WordPress. Di seguito è riportato un esempio di HTML che dovresti vedere.

 
Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane comode verbis depingere solebat. Urgente tamen et nihil remittunt. Un vero dispaccio, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam. Uomo saggio
 

Per personalizzare lo stile blockquotes nel tuo tema WordPress, dovremmo modificare il file style.css del tuo tema. Puoi farlo o andando a Aspetto »Editor nel tuo amministratore di WordPress o modifica i file tramite FTP.

Successivamente, è necessario utilizzare uno degli stili suggeriti di seguito e sovrascrivere gli stili blockquote. Se nessuno esiste, aggiungili semplicemente. Sei anche più che benvenuto nel combinare i due stili e personalizzare il desiderio del tuo cuore.

1. Blockquote CSS classico

Di solito le persone usano i CSS immagine di sfondo per aggiungere virgolette grandi in blockquote. In questo esempio abbiamo usato i CSS per aggiungere grandi virgolette.

 blockquote font-family: Georgia, serif; font-size: 18px; stile di carattere: corsivo; larghezza: 450 px; margine: 0,25em 0; imbottitura: 0,25em 40px; altezza della linea: 1,45; posizione: relativa; colore: # 383838; sfondo: #ececec;  blockquote: before display: block; contenuto: "\ 201C"; font-size: 80px; posizione: assoluta; a sinistra: -10px; inizio: -10px; colore: # 7a7a7a;  blockquote cite color: # 999999; font-size: 14px; blocco di visualizzazione; margin-top: 5px;  cita blockquote: before content: "\ 2014 \ 2009";  

2. Blockquote classico con immagine

In questo esempio abbiamo usato un'immagine di sfondo per le virgolette.

 blockquote font: 16px italic Georgia, serif; larghezza: 450px; padding-left: 70px; padding-top: 18px; fondo imbottito: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 3px solid #ccc; margine: 5px; background-image: url (http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); posizione di sfondo: centro sinistra; background-repeat: no-repeat; text-indent: 23px;  blockquote cite color: # a1a1a1; font-size: 14px; blocco di visualizzazione; margin-top: 5px;  cita blockquote: before content: "\ 2014 \ 2009";  

3. Semplice Blockquote

In questo esempio abbiamo aggiunto il colore di sfondo e il bordo sinistro tratteggiato invece dei blocchi. Sentiti libero di giocare con i colori.

 blockquote font-family: Georgia, serif; font-size: 16px; stile di carattere: corsivo; larghezza: 500 px; margine: 0,25em 0; imbottitura: 0,25em 40px; altezza della linea: 1,45; posizione: relativa; colore: # 383838; border-left: 3px dashed # c1c1c1; sfondo: #eee;  blockquote cite color: # 999999; font-size: 14px; blocco di visualizzazione; margin-top: 5px;  cita blockquote: before content: "\ 2014 \ 2009";  

4. Blockquote bianco blu e arancione

I blockquotes possono essere fatti su misura e possono essere altrettanto colorati come vuoi che siano.

 blockquote font-family: Georgia, serif; font-size: 16px; stile di carattere: corsivo; larghezza: 450 px; margine: 0,25em 0; imbottitura: 0,25em 40px; altezza della linea: 1,45; posizione: relativa; colore: #FFF; border-left: 5px solid # FF7F00; background: # 4b8baf;  blockquote cite color: #efefef; font-size: 14px; blocco di visualizzazione; margin-top: 5px;  cita blockquote: before content: "\ 2014 \ 2009";  

5. Utilizzo di Google Web Fonts per Blockquotes in CSS

In questo esempio di blockquote CSS abbiamo usato il font Droid Serif dalla libreria di Google Web Fonts.

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

6. Round Corner Blockquote

In questo esempio abbiamo il blocco con angoli arrotondati e abbiamo usato l'ombra esterna per i bordi.

 blockquote width: 450px; background-color: # f9f9f9; border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; stile di carattere: corsivo;  cita blockquote: before content: "\ 2014 \ 2009";  

7. Uso del gradiente come sfondo per Blockquote

In questo esempio di blockquote CSS, abbiamo usato il gradiente CSS3 per migliorare lo sfondo di blockquote. I gradienti CSS sono difficili, a causa della compatibilità tra browser. Raccomandiamo l'uso di colorlabs, generatore di gradiente CSS.

 blockquote width: 450px; colore: #FFF; sfondo: # 7d7e7d; / * Vecchi browser * / background: -moz-linear-gradient (in alto, # 7d7e7d 0%, # 0e0e0e 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 7d7e7d), color-stop (100%, # 0e0e0e)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, # 7d7e7d 0%, # 0e0e0e 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (in alto, # 7d7e7d 0%, # 0e0e0e 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, # 7d7e7d 0%, # 0e0e0e 100%); / * IE10 + * / background: gradiente lineare (in basso, # 7d7e7d 0%, # 0e0e0e 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 7d7e7d", endColorstr = "# 0e0e0e", GradientType = 0); / * IE6-9 * / border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; stile di carattere: corsivo;  cita blockquote: before content: "\ 2014 \ 2009";  

8. Blockquote with Background Pattern

In questo esempio abbiamo usato un'immagine di sfondo come pattern per 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; stile di carattere: corsivo;  cita blockquote: before content: "\ 2014 \ 2009";  

9. Utilizzo di più immagini con sfondo a blocchi

È possibile utilizzare più immagini in background blockquote utilizzando css. In questo esempio abbiamo usato blockquote: prima pseudo elemento per aggiungere un'altra immagine di sfondo al blocco.

 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; stile di carattere: corsivo;  blockquote: before position: absolute; margin-top: -20px; margin-left: -20px; contenuti: url ( 'http://example.com/wp-content/themes/your-theme/images/pin.png');  cita blockquote: before content: "\ 2014 \ 2009";  

Ci auguriamo che tu abbia trovato utile questo articolo per imparare a personalizzare lo stile dei blockquotes in WordPress. Se hai domande o suggerimenti, non esitare a lasciare un commento qui sotto.