Para usar el diseñador de plantillas con el CSS de la plantilla de tu blog, debes seguir algunas pautas.
Cómo configurar las variables
En la sección <head> de tu código, debe haber un par de etiquetas <b:skin> </b:skin>.
Las declaraciones de estilo de CSS se incluirán entre estas etiquetas, junto con los nombres de las variables que hacen que tu diseño funcione con la página de Fuentes y colores.
<head>
…
<b:skin>
<style type='text/css'>
/*
* Definiciones de las variables:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>El código CSS incluido en las etiquetas de comentarios /* y */ no se mostrará en tu blog.
Allí habrá una lista de variables, una para cada fuente o color que deseas que sea editable en la pestaña "Fuentes y colores". Cada variable debe incluir la información que se ve en el ejemplo anterior y que te describimos aquí:
- name: Puede incluir letras o números. Los nombres de tu plantilla deben ser únicos.
- description: Agrega una descripción que aparezca en la sección "Fuentes y colores".
- type: "Fuente" o "Color".
- default: El valor predeterminado. Para los colores, debe ser un código de color hexadecimal; por ejemplo, #FF0066. En el caso de las fuentes, deberá ser una lista con el formato estilo-fuente ancho-fuente tamaño-fuente familia-fuente.
Cómo usar las variables
Una vez que las variables estén configuradas, cuando quieras usar el valor de una variable, ingresa $variable_name en el css b:skin.
El diseñador de plantillas permite realizar modificaciones en un conjunto específico de tipos de variables CSS. Para configurar el tipo de variable, ten en cuenta lo siguiente:
- Las variables de color proporcionarán una paleta de colores para una selección en el diseñador de plantillas.
- Las variables de fuente proporcionarán una selección de fuentes con opciones de tamaño y de negrita o cursiva en el diseñador de plantillas.
En el ejemplo anterior, hay una variable denominada bgcolor, configurada en blanco (#fff). En el código siguiente, dice: background: $bgcolor. Esto hace que el fondo sea blanco; puedes cambiarlo en la sección "Fuentes y colores".
Nota: No es necesario crear variables para otros tipos de atributos CSS. Estos pueden incluirse en el CSS como se hace habitualmente (como sucede con los atributos margin: y padding: del ejemplo anterior).