Cambiar el color de la barra lateral del blog

Tal y como expliqué en esta entrada anterior del blog, podemos personalizar los colores de la plantilla a nuestro gusto.

De lo único que no me di cuenta es que cada plantilla es diferente, al igual que ocurre con el tema de agregar nuevas columnas, por lo que pueden variar los elementos que encontremos dentro de la opción Diseño -> Fuentes y colores.

¿A que me refiero con esto?
Por ejemplo, si utilizamos la plantilla Rounders o cualquiera de sus variaciones podremos cambiar el color de la barra lateral desde la opción Fuentes y colores con tan solo seleccionar el color, mientras que si utilizamos la plantilla Mínima veremos que la opción para cambiar el color de la barra lateral no aparece en Fuentes y colores por lo que tendremos que realizar una pequeña modificación en el código HTML de la misma.

Esto es justamente lo que veremos en esta entrada, el código que debemos insertar para poder cambiar el color de la barra o barras laterales que tenemos en el blog cuando no dispongamos de la opción correcta en la opción Fuentes y colores.

El código citado en esta entrada pertenece a la plantilla Mínima, aunque para el resto no debería variar mucho.

En primer lugar, no estaría de más hacer una copia de seguridad de la plantilla tal y como indico en esta entrada del blog.

A continuación, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de la barra lateral cuyo código es el siguiente:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Como podemos comprobar en el código anterior, no tenemos la propiedad Background que es la que nos permite seleccionar el color de fondo de la barra, por lo que tendremos que añadirla, quedando el código de la siguiente forma:

#sidebar-wrapper {
width: 220px;
float: $endSide;
background:#ff0000;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Como podéis ver lo único que he añadido es la propiedad Background junto con el color en hexadecimal. No hace falta decir que el color podéis elegir el que queráis, y para obtener el valor hexadecimal del mismo podéis utilizar la opción Fuentes y colores del blog o bien cualquier programa de retoque fotográfico que tengáis instalado en vuestro ordenador.

Una vez añadido este código, solo nos queda guardar los cambios y visualizar el resultado.

6 comentarios:

Unknown dijo...

Efectivamente a mi me pasó. No encontraba la opción de cambiar el color de fondo, desde diseño.

Bueno, ahora desde el código, tal y como indicas me ha salido. Sólo falta encontrar los colores apropiados.

gracias

José M. dijo...

De nada

maria dijo...

hola estuve leyendo la entrada pero sq mo encunetro el codigo de definicion de la barra lateral
ayuda plis
gracias :)

José M. dijo...

Hola María,

pues te puedo asegurar que está, porque yo lo sí lo he encontrado en tu blog.

Consulta la entrada Buscar código HTML en la plantilla del blog, tal vez te sirva de ayuda para localizar el código.

Como sugerencia, basta con buscar el texto #sidebar-wrapper. Con tan solo poner este texto en la barra de búsqueda te aparecerá de inmediato el código y comprobarás que las líneas de código que le siguen se corresponden a las que yo he escrito en el post.

Espero que puedas encontrarlo, un saludo :-)

Pufitito545 dijo...

oye, eso de #sideber-wrapper me dice que no existe ayudame plis necesito ayuda yaa

José M. dijo...

Hola Pufitito545

es #sidebar-wrapper

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.