.
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).
Ayudandote 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 del content/outer-wrapper.Puede ser inferior o igual pero nunca superior¿O.K?.
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 y modifí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.
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).
Ayudandote 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 del content/outer-wrapper.Puede ser inferior o igual pero nunca superior¿O.K?.
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 y modifí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.
.
11 comentarios:
Buena introducción al mundo de los toqueteos del html de la plantilla. Creo que falta una recomendación, y es la de hacer una copia de seguridad de la plantilla antes que nada al empezar a hacer modificaciones, que luego sale algo mal, y todo se va al garete.
Y también faltaría hablar sobre el header, que eso sí es jodio, porque habrá que adaptar cosas si tenías una imagen de fondo, etc...
Yo la verdad que me he cargado varias plantillas por intentar ensancharlas, y no había forma de colarlas bien.
Tu recomendacion yo la tengo puesta como obligación,ja,ja..."REcuerda que es obligatorio hacer...".Los robots leeis demasiado rapido,ja,ja,ja.
Al header es mejor dedicarle una entrada aparte....bufff
Yo tambien he reventao mas de una plantilla ja,ja,ja....
A mí me parece muy bien explicado.
Es que a Ulyses es imposible tenerlo contento del todo Escriba, siempre encuentra algo que mejorar, por eso es tan útil que lea tus posts,jeje.
(Ui, perdón que ahora se hace llamar Bender, no me voy a acostumbrar Uly).
Y que lo digas Lucia...
A ver!!Quiero decir que si,que es de vital importancia que Uly te lea ya que siempre te va a echar una mano y vas a aprender cosas.Para mi es un gran apoyo.
Lo de tenerlo contento yo creo que no es tan dificil...al fin y al cabo es sólo un robot,ja,ja,ja.
besos y un chorrito de acite para Bender.
Muy interesante... Tendremos que tomar nota. Se lo diré al Pitxi
COJO...el NUDO de todo esto!! sí, también quiero "ensanchar" (¿quién no ensancha entre comilonas en navidá?) Peeero noto que también tendré que ensanchar en proporción las variaditas imágenes de fondos (de la cabecera, del cuerpo, de la columna...) Ays. Mucho curro pa ya mismo. Me pondré en cuanto vuelva del aperitivo, que hay que empezar a "chisparse" con tiempo para atacar con el ánimo entretenido lo que se nos avecina...
bender: tooodo hay que toquetearlo, qué gustito. De todas formas, abusa de la vista previa y siempre te queda lo del botón azul (de la frustración) de "borrar cambios". A mí, en esto, me funciona.
(si alguien quiere ayuda... lo poco que sé, lo sé de diseño editorial y toqueteo de imágenes. glup.)
Tengo que probarlo, era una cosa que tenia ganas de toquetear. Gracias por la info y feliz Navidad.
sere muy torpe pero tus blog me ayundan mucho los e leido todos y me an servido de mucho , gracias y abrasos .
Jo soy de los torpes, al hacerlo en la parte de entradas-post se me hace mas ancho, pero los textos hechos no se aprovechan y se ve el margen VACIO, ademas me sale una ralla en medio vertical.
No se que he hecho mal o me he dejado por hacer... GRACIAS
Dejame la dirección del blog y le echaré un vistazo a la plantilla Eloy a ver si entre dos hacemos uno,je,je.
muchisimas gracias me ha venido que ni quelao!!! tiene sun seguidor mas!! pasa por mi blog a ver si me puedes aconsejar algo de la plantilla gracias!
Publicar un comentario