Como expliqué en esta entrada, en la que muestro de forma simple lo que es una plantilla, un blog está compuesto de capas que se van superponiendo.
Cada una de estas capas puede tener su propio fondo.
Simplemente hay que añadir, si no existiera, en el apartado correspondiente a la zona en la que quieras aplicar el fondo, la línea de estilo que le dice al navegador qué es lo que ha de mostrar ahí, tal como explico en la entrada dedicada al body.
Si se trata de una imagen, ha de estar alojada en algún sitio para que pueda ir a buscarla y mostrarla.
Si se trata de un color liso, le hemos de decir exactamente cual es.
En éste caso hay dos formas de hacerlo; o escribiendo en la plantilla el código del color o creando/usando una variable para ello.
Los colores.
Para que el navegador pueda mostrar un color, no basta con decirle que tal cosa va a ser roja.
Como tonalidades de rojo hay muchísimas, le hemos de decir cual de ellas queremos que muestre y la forma de hacerlo es diciéndole exactamente cual es.
Pero ¿como decirle, por ejemplo, que queremos que sea un rojo fuego tirando a anaranjado aunque no muy naranja y si ha de ser más bien tirando a oscuro o a claro? Muy simple. Sabiendo exactamente como se denomina este color en el código internacional de colores.
Así, si en lugar de esta parrafada le decimos que muestre el #e12709 mostrará algo similar a ésto: Este sería el color de marras. Que como puedes ver se diferencia del #bf0d1d que es este rojo más granate.
Aquí a la derecha podeis ver un chisme que permite saber el código del color.
Al pinchar en un color o matiz del círculo que rodea al cuadrado, (aparte de que os saldrá un anuncio que no puedo quitar y que tendreis que cerrar por la crucecita), el color se colocará en el rectángulo de encima, con una cifra.
Pinchando en distintos puntos del interior del cuadrito vereis que no solo cambia el tono del interior del rectángulo, sinó que irá cambiando la cifra que contiene.
Eso es el código hexagesimal de ese matiz concreto.
No todos los navegadores los interpretan exactamente igual. He observado que Explorer tiende a oscurecer los colores y no hay forma humana de evitarlo, así que si quereis ver algo en un color concreto, basaos en como lo muestre el navegador que acostumbreis a usar.
Como he dicho antes podemos incluir el color que queramos ver en un fondo, de dos formas, por medio de ese código o con una variable.
Resumiendo:
El fondo de cualquier lugar se define en la línea del background de las siguientes formas:
Solo un color liso
background: #ffffff; o background: $bgcolor;
En el primer caso este código daría un fondo blanco. Cambiando la cifra cambiará el color. Solo podrás cambiar el color modificando esta cifra en el código de la plantilla.
En el segundo caso saldría el color que está pensado como fondo general. Para poner uno distinto has de poner otra definición, p. ej. $sidebarbgcolor (si creas o existe una específica para la sidebar), $mainbgcolor (si creas o existe una específica para el fondo de la zona de las entradas, etc. y podrás modificarlos en Fuentes y Colores.
Con una imagen
background: url(la direccion de la imagen);
y todas las variantes que comento en la entrada del body.
En ocasiones se ponen las dos cosas juntas, background: $bgcolor url(direccion);
Esto puede ser por dos motivos; porqué se trata de una imagen grande o como precaución.
En el primer caso se coloca un color de fondo afín a la imagen en previsión de que se vea el blog en una pantalla más grande que la imagen. De esta forma se le da continuidad a dicha imagen y no queda feo.
En el segundo caso siempre se verá la imagen pero si se diera el caso que la página o servidor, donde esté alojada, no funcionara por algún motivo, se vería el color de fondo que hayas elegido.
Si solo hay la dirección siempre se verá blanco
0 comentarios:
Fondos ¿donde y como? Colores