Si vas a usar el diseñador de plantillas con la CSS de la plantilla de tu blog, sigue las directrices descritas a continuación.
Configurar las variables
En el apartado <head> de tu código, debes tener un par de etiquetas <b:skin> </b:skin>.
Las declaraciones de estilo de CSS irán entre esas dos etiquetas, junto con los nombres de las variables que consiguen que tu diseño funcione con la página Fuentes y colores.
El código CSS comprendido entre las etiquetas de comentario /* y */ no se mostrará en tu blog.
Aquí habrá una lista de variables, una para cada fuente o color que quieres que se pueda editar en la pestaña "Fuentes y colores". Cada variable debe tener los datos mostrados en el ejemplo anterior, a saber:
- "Variable name" (nombre de la variable): puede incluir letras o números. No puede haber nombres repetidos en una misma plantilla.
- "description" (descripción): añade la descripción que aparecerá en el apartado "Fuentes y colores".
- "type" (tipo): escribe "font" (fuente) o "color".
- "default": es el valor predeterminado. Para los colores, tiene que ser un código hexadecimal de color. Por ejemplo: #FF0066. Para las fuentes, será una lista que incluya el estilo (font-style), el grosor (font-weight), el tamaño (font-size) y la familia (font-family) de la fuente.
Utilizar las variables
Después de configurar las variables, cuando quieras usar el valor de una, escribe $variable_name en la CSS b:skin.
En el ejemplo anterior, hay una variable llamada colorfondo, configurada como "blanco" (#fff). En el código siguiente, puedes ver: background: $colorfondo. Así se pone el fondo ("background" en inglés) de color blanco, y puedes cambiarlo en el apartado "Fuentes y colores".
Nota: No tienes que crear variables para otros atributos de la CSS. Estos se pueden incluir en la CSS con sus valores normales, como ocurre con los atributos de margin: (margen) y padding: (relleno) del ejemplo anterior.