Personalizar las etiquetas de hojas de estilo en cascada (CSS) para los diseños

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.

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: $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.

Tipos de variables

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.

Más información sobre CSS

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?