Come inserire i parametri del blockquote (citazione) nella sezione Caratteri e Colori di Blogger.

Se il vostro blog ha già una classe che definisce lo stile della citazione allora avrete nella sezione head del vostro modello una riga di codice che inizia con

blockquote { oppure con .post-body blockquote {

nel caso in cui non la abbiate ho già trattato l’argomento di come sia possibile

• Creare una classe di stile per il blockquote -

Adesso voglio fare un ulteriore passo in avanti e mostrare come si possa inserire nella sezione Caratteri e Colori di Blogger i dati per cambiare

1. Colore al testo delle citazioni
2. Colore dello sfondo delle citazioni
3. Colore del bordo delle citazioni

Se avete già inserito il blocco di codice di cui all’articolo citato precedentemente dovrete toglierlo per procedere con questa personalizzazione decisamente più raffinata (e si potrebbe arricchire ulteriormente ma non vorrei esagerare ).

Andate su Layout > Modifica HTML e salvate il modello completo da usare per un eventuale back-up. Cercate la parte in cui ci sono le variabili supportate dal modello e in mezzo incollateci il seguente codice

<Variable name="blockquotebgColor" description="Colore di sfondo citazione"
  type="color" default="#FFEAE9" value="#ffddf4">
<Variable name="blockQuoteColor" description="Colore testo citazione"
  type="color" default="#003366" value="#380494">
<Variable name="blockquoteBorderColor" description="Colore bordo citazione"
  type="color" default="#003366" value="#380494">

nel modo in cui è mostrato in questo screenshot

I codici dei colori inseriti non sono poi così importanti come vedremo in seguito, mentre la descrizione della variabile, di colore rosso, la potete ovviamente cambiare con una di vostro maggior gradimento.  Adesso cercate la zona del modello in cui sono presenti le varie dichiarazioni di stile ed incollateci il seguente codice

/* -----   BLOCKQUOTE   ----- */

blockquote {
  margin: 10px 20px 10px 20px;
  padding: 10px 15px 0px 15px;
  line-height: 1.6em;
  font-size: 90%;
  color: $blockQuoteColor;
  background: $blockquotebgColor;
  border: 1px dashed $blockquoteBorderColor;
}

In questo screenshot si vede il punto in cui l’ho inserito in questo modello

L’importante è inserirlo alla fine di un altra dichiarazione di stile cioè dopo la chiusura di una parentesi graffa. Per quanto riguarda le personalizzazioni colorate di rosso ho inserito i seguenti parametri che possono ovviamente essere modificati

1. 90% significa che la dimensione dei caratteri sarà del 10% più piccola di quella di default
2. 1px è la larghezza del bordo della citazione. Ho messo la misura minima ma può essere aumentata
3. dashed fa sì che il bordo sia tratteggiato come del resto gli altri bordi di questo blog. Si possono anche scegliere gli attributi solid per ottenerlo come linea continua oppure dotted per averlo punteggiato.

Non resta altro che Salvare il modello.

Fatto questo andate in Layout > Caratteri e Colori e vedrete che saranno presenti le altre tre opzioni di modifica dei colori che avete appena aggiunto

Le tre nuove caselle sono state evidenziate di giallo nel precedente screenshot. Per cambiare colori basterà selezionare il dato che ci interessa, inserire il colore prescelto o direttamente cliccando sulle caselle dei colori del nostro blog oppure inserendo il codice del colore in notazione esadecimale nell’apposito spazio. Per rendere le modifiche effettive si clicca su Salva Modifiche. Nella parte bassa della finestra del browser possiamo anche vedere l’anteprima delle nostre modifiche.