sábado, 12 de junio de 2010

EL FONDO DE TU BLOG -- BODY






Fondos en un blog hay muchos, todos los background que veas en tu plantilla son, en realidad, fondos.

Así, hay un fondo en la cabecera, otro en la zona de las entradas, main, otro en la columna lateral, sidebar, e incluso puede haber uno al pie del blog, footer. Todos ellos los iremos viendo cuando explique cada una de estas zonas.

En algunas plantillas, como la mínima, hay un solo fondo para todo el blog, ya sea blanco, o negro, como en la mínima black.

Pero ya sea solo uno o varios, hay un fondo que es al que me refiero en el título como el fondo de todos los fondos y este se encuentra al principio de todo del código, justo bajo las variables, en body.

Body en inglés significa cuerpo, por eso se llama así a esa zona, ya que es donde se superponen todas las demás zonas que compondrán el blog.

Hay plantillas, como la harbor, que no tienen un background definido en un solo sitio, sinó en varios y la imagen final del blog la componen varias imágenes repartidas en varias zonas.

Pero incluso ésta dispone de un body en el que también hay un background.

Algunos modelos tienen una url en la linea del background de body.

En ocasiones, como en la scribe, esta imagen es la que se ve de fondo del blog, en otras, como en la harbor, esta imagen está abajo de todo.

Habitualmente en ese body hay un color, que es el que se verá si la imagen que contiene, caso de haberla, no se viera por algún motivo.

Así que si quieres personalizar tu blog cambiándole el fondo de todos los fondos, lo primero que has de hacer es averiguar qué modelo de plantilla usas y mirar qué hay en body.

Si solo pone background:#fff; o background:$bgcolor; o algo parecido, es que tu plantilla, en ese fondo, solo tiene un color liso.

En este caso, ponerle una imagen de fondo es tan sencillo como añadir, tras lo que hay, pero antes del punto y coma que finaliza la línea y dejando un espacio detrás del color, url("----------") poniendo, entre esas comillas, la dirección de la imagen que vayas a poner de fondo en lugar de esas líneas que he colocado yo.

Si en ese background además del color ya hay este código con una dirección, es suficiente con poner la de tu imagen en lugar de la que haya, pero asegurándote, mediante la vista previa, que tu imagen reemplaza la que hay. Ya te digo que en la harbor, si lo hicieras, solo verías tu imagen abajo de todo a la derecha.

Te digo que has de poner una dirección, porqué esa es una condición ineludible para que puedas ponerle un fondo: la imagen ha de estar en algún sitio de internet, ya sea un servidor propio, como imageshack o tinypic, o cualquier otro de este estilo, o en tu album de Picasa.

He hecho varias entradas explicando como subir imágenes a los distintos sitios que le dan una url, pero como dichas entradas están desperdigadas en varios de mis blogs, haré una explicando todos los sistemas a la vez, uno a uno, en forma más resumida, en este blog.

Bien, ya tienes la imagen colocada en el fondo, pero ¿como es esa imagen y como quieres que se vea?

Si la imagen que has puesto es pequeña, se ha de repetir a lo largo y ancho del fondo, de lo contrario solo se vería arriba de todo a la izquierda.
En este caso lo ideal es poner una imagen que, al repetirse, de sensación de continuidad, no de alicatado. Aquí puedes ver un ejemplo de continuidad pues, aunque la imagen que hay son unos ladrillos que forman una pared, no se ve donde acaba cada cuadrito que forma esta imagen.

aquí puedes ver un ejemplo de lo que he denominado alicatado.
Como podrás comprobar, en este caso se ve perfectamente donde empieza y acaba cada cuadro que forma este fondo y, como puedes ver, queda muy mal.

Si solo pones lo que he dicho, url("dirección"), la imagen se repetirá sola.

Pero quizá quieres poner una imagen grande que abarque todo el fondo.
En este caso has de añadirle algunas órdenes a este código.

Le has decir como se va a ver y lo lógico es que se vea desde arriba de todo y centrada, así que tras el paréntesis de cierre de la dirección, dejando siempre un espacio entre cada orden, has de añadir center top

También le has de decir que no la repita, añadiendo no-repeat

Un inciso en este caso: Ten cuidado con las imágenes grandes.
No todas las pantallas son iguales y lo que tu puedas estar viendo no ha de ser necesariamente lo que vean los demás.
Así, si tu pantalla es de 17" (pulgadas) tendrá poco más de 1200 pixels de resolución, con lo que una imagen que tengas en tu pc de esta medida de ancho, abarcará toda tu pantalla.
Pero si quien está viendo tu blog dispone de una pantalla de 22", tiene una resolución de 1660 pixels, con lo que, si mira tu blog a toda pantalla verá una zona sin imagen a ambos lados del fondo.
En este caso, el color del fondo del blog ha de ser una tonalidad que no desentone con la imagen.
Si, por ejemplo, quieres poner una imagen de un bosque en otoño, con la diversidad de colores que pueden tener los árboles, no quedaría bien un fondo blanco, ni rosa o azul. Lo suyo sería una tonalidad amarillenta, lo más parecida a la imagen que has colocado.

Otro tema es la altura de la imagen.
Un blog puede tener una altura casi infinita, dependiendo de la cantidad de entradas que se muestren y/o de las cosas que haya en la columna lateral.
Así, como una imagen tiene solo la altura de la pantalla, al bajar en el blog la imagen se acabará, con lo que se verá un fondo liso después de ella.

Para evitarlo, se ha de fijar la imagen, de forma que el blog se deslice sobre ese fondo y la imagen ha de ser tan alta como la pantalla, (unos 900 pixels).

También has de tener en cuenta que no todos los servidores almacenan la imagen en su medida real. Picasa, por ejemplo, tiende a reducirlas, con lo que una imagen grande almacenada allí no sirve de mucho en este caso.

Para que el blog se deslice sobre el fondo se ha de añadir fixed a esa línea del background, detrás de las órdenes anteriores y antes del punto y coma.

Este fixed también se puede añadir aunque la imagen sea pequeña y abarque todo el blog, por largo que sea, para dar esta sensación de deslizamiento.

Si has pinchado en el enlace que te he dejado del blog con fondo de ladrillos, verás que éso es lo que hace la zona útil de aquel blog.

Pero ¡cuidado! este efecto solo se produce en blogs con medidas fijas. En los modelos que usan % en sus medidas este efecto no se produce.
Eso es debido a que en estos casos, la zona útil del blog abarca toda la pantalla, lo mires como lo mires, con lo que el body está pero no se ve de la misma forma que en los otros casos.

Y siempre, siempre, siempre, haz vista previa antes de guardar la plantilla, pues es más sencillo borrar los cambios que tratar de recordar qué habia ahí antes de que añadieras algo.

Resumen. Códigos del background de body.

background:#fff; o background:$bgcolor; background:$bgColor;
(solo hay un color de fondo ya sea escrito en modo hexagesimal, o por variable. He puesto dos modos distintos en que puede estar escrita esta variable).

A partir de aquí voy a usar solo la segunda opción, que es la de la minima, aunque puede ser que en tu blog se vea la primera, (cuando no se puede cambiar el color del fondo desde fuentes y colores, como en la rounders4) o la tercera, por que la variable se escribe de otro modo, como en la Denim y otras.

background:$bgcolor url("dirección");
Hay un color, que quizá no se vea y una imagen que se repetirá a lo largo y ancho de la pantalla y del blog.

background:$bgcolor url("dirección") fixed;
Hay un color de fondo que seguramente no se verá, una imagen que se repetirá a lo largo y ancho de la pantalla y sobre la que se deslizará la zona útil del blog.

background:$bgcolor url("dirección") no-repeat center top fixed;
Hay un color de fondo que posiblemente se verá, una imagen grande que no se repetirá, centrada desde ariba de todo y fija para que el blog se deslice sobre ella.

Otras variantes de este código:

background:$bgcolor url("dirección") repeat-y;
Hay un color de fondo, que se verá y una imagen que solo se repetirá a lo largo del blog, (si no especificas nada lo hará a la izquierda del todo). La imagen se moverá junto a la zona útil del blog.

background:$bgcolor url("dirección") repeat-y right top;
Hay un color de fondo que se verá y una imagen que se repetirá a lo largo del blog, pero a la derecha.

En estos casos la imagen se vería al principio o al final de todo de la pantalla, con lo que si tu blog tiene las medidas originales, (la zona útil de la mínima, por ejemplo, tiene 660 píxels de ancho), si quien está viendo tu blog tiene una pantalla de 22" y suele ver los blogs a toda pantalla, verá la imagen perdida a la izquierda del todo.

Si has ensanchado tu blog, y quien lo esté viendo usa una resolución menor que tu blog, la imagen quedará debajo de la zona de las entradas o de la sidebar.

Si deseas poner una imagen así, pero pegada a alguna de las zonas de tu blog, eso has de ponerlo en el background de dicha zona, modificando paddings para que lo que contenga, ya sea las entradas o los gadgets, no se superpongan a la imagen. (Ya llegaremos a eso).


Un par de cosas más antes de terminar este tema:

He visto en varios blogs fondos colocados mediante un código en un elemento HTML/Javascript.
Suelen funcionar bien, pero no lo recomiendo. Lo ideal es ponerlo como explico aquí.
El motivo es muy sencillo. El fondo es lo primero que se ve.
En conexiones lentas, los navegadores suelen tardar un poco en mostrar todo el contenido del blog, con lo que, si el código del fondo está en un gadget, hasta que no aparezca ese gadget, aunque no se vea en el blog, no se verá el fondo.
También he visto que eso suele pasar en blogs a los que previamente no se les ha quitado el fondo que tenian, así que el navegador muestra primero el fondo original, dándole al blog un aspecto extraño.
Cuando finalmente aparece el fondo que se ha de ver ya te das cuenta de como es realmente ese blog, pero...

Por otro lado tened cuidado al poner una url en el blog.
Algunos sitios ofrecen fondos "gratuitos" y te dan la url a copiar para que lo pongas.
Mira bien esa url.
Si no es algo así: http://dirección.jpg o http://dirección.gif si contiene más de un http no la uses.
Es posible que incluya publicidad indeseada la cual se verá en un recuadro de tu blog y que aparecerá donde menos lo desees.
Esto suele pasar sobretodo, con ese sistema que te digo de fondo colocado en un gadget.
Suelen darte un código más largo, que es el que hace funcionar la imagen como fondo, pero también incluye publicidad, ya sea a la propia página que te ha ofrecido el servicio, ya sea a otro sitio y luego todo son consultas de como quitar ese recuadro indeseado.

0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones