Ricerca
Cancella ricerca
Chiudi ricerca
App Google
Menu principale

Personalizzazione di tag CSS per layout

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.

Esempio
<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.

Tipi di variabile

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).

Ulteriori informazioni sui CSS.

Hai trovato utile questo articolo?
Come possiamo migliorare l'articolo?