Modificare il Foglio di Stile: blockquote

La gran parte dei blogger che utilizzano la piattaforma di WordPress fanno uso di template pubblici affidandosi di fatto a dei temi sviluppati da terze persone. Sebbene la scelta di un tema dipenda fortemente da una serie di fattori contingenti, strutturali e di contenuto, non sempre un tema predefinito può accordarsi completamente alle nostre esigenze di webmastering. WordPress offre la possibilità  di modificare* un file paricolarmente utile per la personalizzazione del proprio tema: il foglio di stile (CSS).

Nell’immagine qui sotto, possiamo osservare una coppia di impaginazioni standard:

Il codice utilizzato nel primo esempio in alto a sinistra é il seguente:

blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

laddove la proprietà  CSS “margin” definisce lo spazio esterno ai bordi (in pixel), “padding-left” lo spazio interno a sinistra e “border-left” il bordo dell’elemento a sinistra (dimensione e colore).

Nel secondo caso, il codice ha una struttura piú complessa:

#content blockquote {font-style:italic; padding:0 10px 0 10px;margin:5px 0px 5px 20px; color:#000;
font-size: 1.0em; border-left: 5px solid #b0c4de; border-right: 5px solid #b0c4de; line-height: 1.2em; background: #f7f7f7;}

poiché vengono aggiunte delle ulteriori proprietà  riferite alla formattazione ed alla dimensione del carattere (font-style/font-size) nonché l’impostazione di un colore in particolare (#f7f7f7) per lo sfondo (background).

Di fatto, queste regole CSS contenute nel file style.css concorreranno al setting personalizzato nella rappresentazione delle citazioni nelle pagine del nostro sito. Vediamo ora come operare sulle impostazioni di base del file per l’editing del codice del selettore preposto alle blockquote.

*é necessaria l’installazione della NextGEN Gallery affinché la Polaroid Gallery possa funzionare correttamente.

**creata in precedenza con la NextGEN Gallery

Se per esempio desiderassimo aggiungere una immagine** alle nostre citazioni dovremo necessariamente operare sulla proprietà  “background”:

blockquote {
background-color: #D5D5D5;
background-image: url(./images/quote.gif);
background-repeat: no-repeat;
background-position: bottom right;
font-size: 120%;
color: #005771;
padding: 15px 50px 15px 30px;
margin: 20px 40px;
}

Nel dettaglio:

• background-color: definisce il colore dello sfondo
• background-image: definisce il percorso alla immagine
• background-repeat: definisce se l’immagine dovrà  essere inserita una o piú volte nell’area dello sfondo
• background-position: definisce la posizione della immagine nell’area dello sfondo: (in alto a sinistra/top left | in alto a destra/top right | in basso a sinistra/bottom left | in basso a destra/bottom right)

Nel codice di cui sopra, alla voce “background-image” viene definito il path alla immagine, ossia dove é allocato il file dedicato ad essa : (./images/quote.gif). In questo caso, /images/ é la cartella immagini del tema e /quote.gif/ il file immagine.

Se il Vostro tema non avesse una cartella preposta alle immagini non é un problema! Sarà  sufficiente inserire un link al file immagine caricato via ftp sul proprio server:

background-image: url(MioSito.com/images/quote.gif) oppure

background-image: url(http://MioSito.com/wp-content/uploads/quote.gif) ed anche

background-image: url("http://MioSito.com/wp-content/uploads/quote.gif").

Importante: poiché la dimensione (larghezza/altezza) della immagine non é variabile, evitare di inserire dei valori che superino i 50px per lato. Per trovare la giusta misura, dopo avere aggiornato il foglio di stile, fate qualche test nelle bozze degli articoli quotando una sola parola:

testing

dunque, la cornice di background sarà  il punto di riferimento in base al quale impostare correttamente le dimensioni del file immagine.

Per concludere l’analisi del codice, la proprietà  “font-size” definisce la dimensione dei caratteri in relazione a quella del post/pagina: 120% indica appunto che il testo contenuto nella finestra avrà  un incremento della dimensione dei caratteri pari al 20% rispetto a quelli leggibili nell’articolo.

*Attenzione: prima di procedere, effettuare il backup del file originale style.css.

**Il nome quote.gif riferito al file immagine con estensione .gif é di uso pratico personale; volendo, lo si può chiamare anche in un altro modo a proprio piacere.

Nota: per ovvie ragioni pratiche e di utilità , rimando la discussione di questo articolo nel forum dedicato: non fornirò assistenza tecnica nei commenti al post.