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.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='colorfondo' description='Color de fondo de la página'
type='color' default='#fff'/>
*/
body {
background: $colorfondo;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>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.
Con el diseñador de plantillas puedes editar variables de CSS de determinados tipos. Cuando vayas a definir el tipo de variable:
- Si es de color, el diseñador de plantillas presentará una paleta de colores para que selecciones uno.
- Si es de fuente, el diseñador de plantillas presentará un surtido de fuentes, con opciones de tamaño, negrita y cursiva, para que elijas.
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.