Personalizar las etiquetas de CSS para diseños

Si vas a usar el diseñador de plantillas con la CSS (hoja de estilo en cascada) de la plantilla de tu blog, sigue las directrices descritas a continuación.

Configuración de 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.

Ejemplo

<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: $bgcolor;
   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": 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.

Uso de las variables

Después de configurar las variables, cuando quieras usar el valor de una variable, escribe $variable_name en la CSSb:skin.

Tipos de variables

Con el diseñador de plantillas puedes editar variables de CSS de determinados tipos. Cuando vayas a definir el tipo de la 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.

Más información sobre las CSS