Tag dei caratteri e dei colori per i layout

Se hai esperienza nell'uso dei codici HTML e CSS, puoi modificare i caratteri e i colori del modello nel modo desiderato. Tuttavia, se desideri che essi si integrino con la funzione Caratteri e colori dei layout di Blogger, devi seguire alcune istruzioni. In tal modo, potrai modificare i colori più facilmente nel caso in cui cambi idea in un secondo momento. È inoltre utile per condividere il modello con un altro utente che desidera personalizzare la propria versione.

Nella sezione del codice, è necessaria la presenza di un paio di tag . Le dichiarazioni di stile CSS verranno inserite tra questi tag insieme ai nomi delle variabili che consentono il funzionamento del tuo design con la pagina Caratteri e colori. Di seguito ne riportiamo un breve esempio prima di entrare nei dettagli:



...





La prima parte del codice CSS viene inserita tra i tag di commento /* e */ e non verrà visualizzata nel tuo blog ma utilizzata solo internamente da Blogger. Sarà disponibile un elenco di variabili, una per ogni carattere o colore che desideri sia modificabile nella scheda Caratteri e colori. Ogni variabile deve visualizzare le informazioni indicate nell'esempio sopra riportato e descritte di seguito:

* name - questo nome può contenere solo lettere o numeri e ogni nome del modello deve essere univoco.
* description - questo nome può essere più descrittivo e includere spazi. Verrà visualizzato nella scheda Caratteri e colori.
* type - può essere "carattere" o "colore".
* default - il valore predefinito. Per i colori, esso deve essere un codice colore esadecimale, ad esempio #FF0066. Per i caratteri, esso deve essere un elenco in formato font-style font-weight font-size font-family.

Dopo l'impostazione delle variabili, il resto del codice si presenta come un CSS normale, con un'eccezione. Ogni volta che desideri utilizzare un colore o un carattere per il quale hai creato una variabile, devi inserire $variable_name al posto del colore o del carattere effettivo. Nell'esempio sopra riportato, abbiamo creato una variabile chiamata bgcolor e l'abbiamo impostata sul bianco (#fff). Successivamente nel codice, anziché impostare la proprietà dello sfondo del corpo esplicitamente sul bianco, abbiamo inserito background: $bgcolor. Lo sfondo viene sempre visualizzato in bianco, con la differenza che, se lo desideriamo, possiamo modificare facilmente l'impostazione nella scheda Caratteri e colori.

Mentre lavori sul design del modello, puoi aggiungere diverse variabili per tutti i vari caratteri e colori che desideri controllare. Non sarà però necessario creare variabili per gli altri tipi di attributi CSS. Questi possono essere inseriti nel CSS seguendo la procedura normale (come nel caso degli attributi margin: e padding: dell'esempio sopra riportato).

Nota: per perfezionare i tuoi CSS, inizia qui.