CSS: Variables Definitions en Blogger

En la estructura de la plantilla Blooger tenemos una parte dentro de la cabeza (head) que es especial de Blogger, llamada Variables Definition, que es un poco especial porque a una parte de ella la puedes cambiar sin entrar en la plantilla y otra parte no. Lo primero que hay que aclarar que las Variables Definitions de Blogger son una especie de alternativa al CSS. Lo que hacen es poder hacer cambios , y que está relacionado con las siguientes partes del head, el CSS Content y el CSS Mobile. Teniendo esto claro, vamos a ver como está estructurado el código y como modificar sus valores directamente sobre la plantilla para obtener cambios en el aspecto de nuestro blog.

Vamos a trabajar directamente sobre la plantilla Simple de Blogger para que puedas seguir todas las indicaciones una por una. Si observas cada uno de los códigos tiene los mismos elementos.

• Variable name. Es el nombre que debemos buscar en el código CSS de la plantilla. Si por ejemplo el nombre es body.font, en cada sitio que aparezca se asignara el formato elegido.
• Description. Es el nombre que lo describe y puede verse en el Editor de Plantillas.
• Type. Explica el tipo de variable que se trata, por ejemplo "font" para fuentes de texto, o "color" para el color de una fuente.
• Default. Es el valor por defecto de la plantilla, de forma que si no tocas la plantilla verás que Defalult y Value son el mismo valor, pero el Default no hay que tocarlo a no ser que quieras crear una plantilla nueva. Este es el valor que utiliza el Editor de Blogger si usas la opción de "volver a los valores predeterminados".
• Value. Es el valor asignado a la variable y el que modificaremos si queremos cambiar la plantilla. Por ejemplo, en el caso de que sea una fuente, se puede poner el tamaño (12px) y el tipo de fuente (Arial, Times new roman, serif... ). Para el color hay varias formas de asignar el valor, el más frecuente es un valor con seis números como este: #123456. Hay que recordar que los valores se escriben siempre entre comillas.

/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
</Group>

Con esto podrás leer con claridad cada línea y como podrás imaginar para modificar el código CSS lo habitual es sólo cambiar la propiedad Value, que es la que por ejemplo define que color vamos a asignar. El siguiente punto es que saber que hay parte de las Variables Definition que están dentro de 13 grupos (en la plantillas Simple), que además son los valores que puedes ver y cambiar desde el editor de plantillas. Estos grupos los identificarás porque se inician por la etiqueta <Group description ... > y se cierra con </Group>.

13 Grupos, con sus variables y lo que codifican.

 Page Text (texto general de la página)
  body.font  (fuente del texto general de la página)
  body.text.color. (color del texto general de la página)
 Background (fondos)  
  body.background.color (color del fondo del "cuerpo", de la página Web)
  content.background.color (color del fondo del contendor)
  header.background.color (color del fondo de la cabecera)
 Links (enlaces)
  link.color (color normal del enlace)
  link.visited.color (color del enlace cuando se ha entrado)
  link.hover.color (color del enlace al pasar por encima)
 Blog Title (titulo principal)
  header.font (fuente de la letra del título)
  header.text.color (color de la letra del título)
 Blog Description (descripción del blog)
  description.text.color (color del texto)
 Tabs Text (Texto del menú)
  tabs.font (fuente del texto del menú)
  tabs.text.color (color del texto del menú)
  tabs.selected.text.color (color del texto seleccionado)
 Tabs Background (Fondo del menú)
  tabs.background.color (color del fondo del menú)
  tabs.selected.background.color (color del fondo del menú) 
 Post Title (título de la entrada)
  post.title.font (fuente del título de las fuentes)
 Date Header. (fechas de la entrada)
  date.header.color (color de la fecha del post)
  date.header.background.color (color del fondo de la fecha)
 Post Footer (pie de página de la entrada)
  post.footer.text.color (color del texto del pie de la entrada)
  post-footer.background.color (color del fondo)
  post-footer.border.color (color del borde del pie de la entrada)
 Gadgets (Los elementos laterales extra)
  widget.title.font (fuente del texto)
  widget.title.text.color (color del texto)
  widget.alternate.text.color (color del texto alternativo)
 Images (Formato de las imágenes)
  image.background.color (color del fondo)
  image.border.color (color del borde)
  image.text.color (color de texto que hay bajo la imagen)
 Accents (Detalles)
  body.rule.color (color de la línea del separador)
  tabs.border.color (color del borde de las tablas)

Si has observado el código en esta primera parte verás  que todas las variables que se muestran en los grupos son de 2 tipos: colores y fuentes. Sólo se pueden definir estos dos aspectos, ya que estas dos variables son las que te permite modificar a través de la Edición Avanzada del editor de plantillas de Blogger. Cosas que no puedes hacer aquí es insertar gradientes, mover el título hacia la derecha, etc. Aparte, aun quedan un montón de Variables Definition que no están dentro de los grupos y sólo puedes modificarlas desde la plantilla de forma directa, que iremos explorando en otros artículos para no alargarnos demasiado.

Cambiar la plantilla de Blogger desde Variables Definitions. Hay muchas cosas que puedes hacer, vamos a ver por poner un ejemplo la personalización del texto que aparece debajo del Título describiendo nuestro blog.

1. Hacer que la descripción de la cabecera cambie de color. En este caso, como la variable description.color.text ya existe en la plantilla de Blogger Simple, sólo tenemos que modificar el código de color gris oscuro  #777777 a negro #000000. Recuerda que tienes que cambiar Value y no Default, pues si lo haces de la forma incorrecta no verás ningún cambio en el blog.
Buscamos la línea siguiente.

<Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#777777"/>

Y lo transformamos en:

<Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#000000"/>

2. Hacer que la descripción de la cabecera tenga formato. Ahora es un poco más complejo porque tenemos que añadir el código que nos interesa y luego unirlo a la sección normal de CSS de Blogger.

• El primer paso es crear el código. 
<Variable name="description.text.font" description="Description Font" type="font"
         default="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px Cuprum, Tahoma, Arial, sans-serif"/>


• El segundo paso es pegar el código dentro del grupo.

<Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#000000"/>
     <Variable name="description.text.font" description="Description Font" type="font"
         default="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px Cuprum, Tahoma, Arial, sans-serif"/>
     </Group>

• El tercer paso es modificar el código CSS de la plantilla para que "llame" al nuevo código que hemos añadido. Para ello Buscaremos en la plantilla Simple de Blogger este código o uno equivalente si trabajas con otro template.

Header .description {
font-size: $(description.text.size);
color: $(description.text.color);

Lo cambiamos por

Header .description {
font-size: $(description.text.font);
color: $(description.text.color);

Para completar este segundo ejemplo y dejar el código libre de restos, quedaría hacer una cosa: buscar en las variables definition el de Blogger  en el que está description.text.size y tras encontrarlo se elimina, ya que ahora ya no tiene ninguna función. Y aún nos queda una sorpresa, al añadir este código a las "Variables Definitions" esta nueva característica aparecerá en el Editor y desde allí podrás cambiar a partir de ahora el tipo de fuente de la descripción.