Personaliza tu plantilla (9): dando un toque de color

Si utilizando las herramientas de la entrada anterior habeis elegido ya vuestra paleta de colores, sólo falta aplicarla! En esta entrada vamos a ver cómo colorear cada parte del blog, con lo que se puede conseguir rápidamente unos resultados asombrosos; aquí va un ejemplo (algo chillón para que se diferencie bien cada parte):











Este paso además nos servirá para aprender a familiarizarnos con la localización de las diferentes partes del blog, lo que nos será muy útil para posteriores cambios.

Para esta parte, unos cuantos consejos: será fundamental que useis y abuseis de la vista previa, porque es muy difícil encontrar una buena combinación de colores. Deben contrastar entre ellos, pero no matarse. Y recordad que un blog es principalmente un lugar de lectura, así que sed misericordes con vuestros lectores y elegid colores que no hagan lagrimear los ojos.

Y ahora, dónde hay que hacer cada cambio? Nos situamos en Diseño/Edición de HTML y buscamos las siguientes líneas:

- El fondo del blog (en el ejemplo, en mostaza):
body { background:$bgcolor;
Sólo hay que sustituir $bgcolor por el código hexadecimal del color elegido para el fondo del blog, teniendo cuidado de anteponerle el símbolo #, así por ejemplo: background:#D8D8D8;

- El outer-wrapper: es el cuerpo del blog, envuelve las entradas y la sidebar, incluyendo también el header o cabecera y el footer o pie del blog (en el ejemplo, en azul)
#outer-wrapper {
Justo debajo de esta línea añade esta otra, con el código hexadecimal del color elegido en vez de códigohexadecimal, cuidando de no borrar el símbolo #:
background:#códigohexadecimal;
Por ejemplo background:#D8D8D8;

- El main-wrapper: el fondo de las entradas (en el ejemplo, en crema)
#main-wrapper {
Procedemos de la misma forma que en el outer-wrapper, añadiendo justo después la siguiente línea cambiando donde pone códigohexadecimal por el de nuestro color y manteniendo el símbolo #:
background:#códigohexadecimal;
Por ejemplo background:#D8D8D8;

- El sidebar-wrapper: el fondo de la sidebar o barra lateral (en el ejemplo, en verde)
#sidebar-wrapper {
Y hacemos exactamente igual que hemos hecho con el outer-wrapper y el main-wrapper.

Después de muchos cambios y probatinas usando la vista previa, cuando estemos satisfechos con la combinación de colores guardamos la plantilla y ya tenemos lleno de color el blog! Ahora podeis hacer otros cambios de colores, como el del título y la descripción del blog, los títulos de las entradas y de la sidebar, los enlaces... lo que se os ocurra!