Cargando...
Meta microcosmos: Personaliza tu plantilla (9): dando un toque de color
BIENVENIDO AL META!!!

Espero que algo de lo que encuentres en tu visita te sirva para mejorar y personalizar tu blog.
Para encontrar más trucos prueba con las pestañas situadas justo encima de estas líneas, usa el buscador de trucos que hay a la derecha o navega por las categorías que encontrarás en la sidebar bajo el título "Aquí encontrarás".
Si tienes cualquier duda, puedes preguntarme sobre lo que desees en un comentario e intentaré ayudarte lo antes posible.
Y si algo te ha sido útil, déjame igualmente un comentario y me encantará ver el truco implementado en tu blog!

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!

13 comentarios:

Rosa dijo...

Deben contrastar entre ellos, pero no matarse.

Ja,ja,ja, ¡cuantas veces he dicho yo algo como eso! Si es que en algunos blogs los "palos" son continuos y evidentes. Vamos, que a veces, acabas de entrar y talmente es como si te dieran a ti misma un puñetazo en el ojo. Ja,ja,ja.

¡Enhorabuena por los tutoriales! desde luego el que estando aquí no sea capaz de hacer un blog decente es que no lo va a hacer nunca...

¡Abrazos!

Yo misma dijo...

Gran Rosa, es que la gente olvida que los blogs son sitios para leer. Y glitters, gifs que se mueven y brillan, colores chillones... no es que ayuden mucho!

Estoy contenta con la idea de intentar volcar todo lo que he aprendido sobre personalizar plantillas en esta serie de entradas. Pero creo que me voy a eternizar... empiezo a dar consejos y no paro!

Sylvia dijo...

Gracias por tu respuesta. Estoy disfrutando mucho con tu blog, sobre todo por la claridad con la que explicas las cosas que para novatas como yo nos es de muchísima utilidad. Si no fuese por gente como tú, otros muchos que he visto en tus enlaces, algunas estaríamos como un pulpo en un garaje. También quiero agradecerte tu disposición para ayudarme. De momento me voy manejando bien con tus explicaciones, pero ¡insisto¡: MUCHAS GRACIAS

Yo misma dijo...

De nada de nuevo, Sylvia! y cuidado con disfrutar toqueteando la plantilla, quedarás totalmente atrapada!!! Aquí me tienes para lo que necesites, saludos!!!

TILIE dijo...

Gracias, por fin pude cambiar el color de mi fondo de plantilla.

Yo misma dijo...

Tilie, me alegro! Te han quedado fenomenal los distintos tonos de naranja, hacen el blog muy cálido y agradable!

geraxzz dijo...

las iamgenes esas como el lapiz por ejemplo, no dejan tener una buena vizualiasion del contenido de la pagina,o quizas sea el navegador pero lo dudo.

Agustín Laitán dijo...

Hola, mi pregunta no se si va aqui pero aqui va: quiero poner una linea o imagen al final de cada entrada como hago? quiero que sea la misma para todos como al final de la tuya que pones dos lineas dibujadas. En que parte del codigo pongo mi imagen? Mi idea es separar mas las entradas que me salen muy juntas. Gracias de antemano y muy bueno tu blog. Gracias por las ayudas que das. Saludos

blogcar dijo...

DRM issues, and apparently, and something that really gets on my pecks, a tiny audio editing mistake... doh! That is 100% my fault.
Bingobingo online

blogcar dijo...

Over the daily limit or something and won't let me post via the web, SMS or any 3rd party. Nice.
Sightline Payments Kirk Sanfordslots spel

Reformas Madrid dijo...
Este comentario ha sido eliminado por el autor.
Reformas Madrid dijo...

a mi este diseño me encanta!! no molesta a la vista! y es muy limpio y elegante..

reformas
reformas

Publicar un comentario

ENTRADAS MÁS POPULARES