miércoles, 29 de agosto de 2012

Jugando con el ancho del blog, las entradas y la sidebar.

Hoy vamos a explicar como modificar el ancho total del blog así como la parte tanto destinada a las entradas como a la sidebar.

Esto que para los bloggers experimentados es una verdadera chorrada para los recién llegados como el que les habla fue en su día una tragedia griega...

¿Has visto cuanto espacio queda a ambos lados del blog?.¿No te gustaría poder aprovecharlo?.Pues muy sencillo.

En plantilla/edición html marca expandir plantilla de artilugios.Recuerda que es obligatorio antes de hacer nada guardar una copia de toda la plantilla(descargar plantilla completa).

Ayudándote del buscador de tu navegador busca #outer-wrapper {, ("cuerpo del blog") o bien #content {.

Aquí cambia el valor que viene en pixeles (px) aumentando la cantidad donde pone width,(ancho).El mio por ejemplo es de 960px.

Hay algunas plantillas que traen ademas del #outer-wrapper un segundo código #content-wrapper {.

Has de poner el mismo valor,960px por seguir con el ejemplo, en ambos.

Utiliza vista previa para ver el resultado antes de guardar cambios.Notarás como se ha ensanchado todo el blog en su conjunto.

Ahora vamos a ensanchar el cuerpo de los post,("main"), o lo que es lo mismo,el sitio destinado a las entradas.

Para ello has de modificar el valor del ancho,(width) ,buscando el código #main-wrapper { .De nuevo usaremos la vista previa tantas veces como sea necesario.

Por ultimo modificando la cantidad del width en #sidebar-wrapper { lograremos ensanchar la sidebar.

Es muy importante que la suma de los anchos main+sidebar nunca sea superior al total del ancho delcontent/outer-wrapper.Puede ser inferior o igual pero nunca superior.

Como curiosidad podéis cambiar la posición de vuestra sidebar (a la derecha o a la izquierda) cambiando en el apartado "float" el right por left o viceversa dentro de #sidebar-wrapper {.

También podemos jugar con el tamaño de las fuentes tanto de los post como de la sidebar modificando el porcentaje donde dice font-size pero creo que será mejor no marear más la perdiz...

Todo esto os resultara muy útil a la hora de cuadrar cabeceras y evitar desplazamientos inesperados de la sidebar .

A menudo habrás comprobado que en ocasiones la sidebar se te desplaza debajo de los post.Hay mil razones pero las más corrientes son dos.

Seguramente has añadido un nuevo elemento html que la ha "descuadrado".Comprueba cual es ymodifícalo o en su defecto tendrás que ir pensando en eliminarlo.A veces es tan sencillo como eliminar el codigo <center>; que suelen traer y que deja materialmente sin espacio al elemento en cuestión al intentar centrarlo en la sidebar.Asegurate que se adapta en tamaño al ancho de tu sidebar.

La segunda y muy común es debido a que hemos metido en un post una imagen o elemento similar que sobrepasa el tamaño del cuerpo del post.(el width del main-wrapper que decíamos antes).Al no tener espacio físico automáticamente desplazara a nuestra intrépida sidebar justo debajo del final de la última entrada del blog.

2 comentarios:

  1. hola tengo un problema , he puesto una imagen tiene un alto mucho mayor al que tiene mi contenedor de entrada , por ende me pone un scroll para seguir viendo la imagen hacia abajo , quisiera eliminar ese scroll aumentando el alto de mi contenedor de entrada , como puedo hacerlo , espero una pronta respuesta . gracias

    ResponderEliminar
    Respuestas
    1. Hola amigo (a) Me queda un tanto complejo darte ayuda así no más por lo cual te pido que por favor me dejes el link de tu sitio o blog para verificar el error y poder ayudarte con una solución precisa.

      Saludos,

      Eliminar

SÍGUENOS EN: