Esistono alcune linee guida da seguire per utilizzare il designer modelli con i CSS del modello del blog.
Impostazione delle variabili
La sezione <head> del codice deve contenere una coppia di tag <b:skin> </b:skin>.
Le dichiarazioni di stile CSS devono essere posizionate tra questi tag, insieme ai nomi delle variabili che permettono di integrare il design con la pagina Caratteri e colori.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>Il codice CSS racchiuso tra i tag di commento /* e */ non verrà visualizzato nel blog.
Qui sarà presente un elenco delle variabili, una per ogni carattere o colore della scheda "Caratteri e colori" che desideri che siano modificati. Ogni variabile deve avere le informazioni mostrate nell'esempio precedente e descritte qui:
- name – Può contenere lettere o numeri. Ogni nome del modello deve essere unico.
- description – Aggiungi una descrizione che verrà visualizzata nella sezione Caratteri e colori.
- type – "Font" (carattere) o "color" (colore).
- default – Il valore predefinito. Per i colori deve essere un codice di colore esadecimale, come #FF0066. Per i caratteri, deve essere un elenco nella forma carattere-stile, carattere-peso, carattere-dimensioni, carattere-famiglia.
Utilizzo delle variabili
Dopo aver configurato le variabili, quando desideri utilizzare il valore di una variabile, inserisci $variable_name nel css b:skin.
Il designer modelli supporta la modifica di una serie specifica di tipi di variabile CSS. Per impostare un tipo di variabile:
- le variabili colore forniscono una tavolozza di colori da selezionare nel designer modelli.
- le variabili carattere forniscono una selezione di caratteri con opzioni di dimensione, grassetto e corsivo nel designer modelli.
Nell'esempio riportato in precedenza, è presente una variabile chiamata bgcolor, impostato su bianco (#fff). La porzione di codice seguente è background: $bgcolor e converte il colore dello sfondo in bianco. Puoi modificarlo nella sezione "Caratteri e colori".
Nota: non hai bisogno di creare variabili di altri tipi di attributi CSS. Le variabili possono essere incluse nel CSS come lo sarebbero normalmente (come accade negli attributi margin: e padding: dell'esempio precedente).