Quickribbon

miércoles, 21 de febrero de 2007

Modificar el ancho de la plantilla, tercera columna

La modificación del ancho de la plantilla puede traer a veces consecuencias irreparables y que a la larga nos puedan dar problemas, así que aunque siempre es recomendable el guardar la plantilla antes de empezar a cambiarla, en este caso aconsejo que guardéis la copia durante bastante tiempo ya que los problemas derivados de modificar los anchos y tamaños de las zonas de la plantilla pueden no ser visibles a corto plazo (textos que ya no encajan, imágenes que quedan cortadas.. etc). De todos modos, la mayoría de las veces no da problemas ni a corto ni a largo plazo y sin embargo nos da muchas ventajas, como el poder incluir una tercera columna en el Blog ya que muchas veces, al añadir widgets, imágenes y scripts... la columna lateral queda un poco recargada y resulta poco cómoda. Los pasos que os voy a contar son los que he hecho yo sobre esta plantilla, pero no pueden diferir demasiado en la mayoría de las plantillas que ofrece blogger.

Vamos a tener que bucear un poco por la plantilla y aprender para que vale cada una de las áreas del blog y familiarizarnos con ellas.

Las plantillas tienen varias áreas diferentes con sus medidas predeterminadas para que encajen y sean visibles. Estas áreas son:

- Outer Wrapper: Podemos decir que es la página en si, ya que todos los elementos tienen que caber dentro de ella así que el ancho de este área tiene que ser suficiente para que quepan el resto de secciones del blog. En esta plantilla el ancho en pixels era de 660 px

- Header Wrapper: La cabecera. En este caso también es de 660 px

- Main Wrapper: Es el contenido del Blog en si, la columna central donde irán los posts. Aquí tenía un ancho de 410 px ( a veces insuficiente para poder introducir vídeos, imágenes... etc)

- Sidebar Wrapper: La Columna lateral, que era de 220 px


Estos son los elementos que habrá que modificar pero siempre teniendo en cuenta que la suma de Columnas laterales + Contenido sea menor al Outer Wrapper. (Ojo con los paddings, ya que también suman)

Empecemos... si vais a la modificación de HTLM de vuestra plantilla, vereis que casi al principio hay un área donde están definidos todos estos parámetros. Más o menos así:


Aquí es donde se definen los elementos de la página con lo que para modificar los anchos no tenéis más que cambiar el valor de pixels en width. La mayoría hacemos esto para añadir una tercera columna con lo que vamos a ello. Primero tenemos que definirla. Lo más cómodo es copiar el código de la que ya hay y pegarlo justo debajo, pero hay que cambiarle el nombre así que por ejemplo la llamaremos :

#sidebar2-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Ahora ya tenemos definida la segunda columna lateral.. luego entraremos en los tamaños. El segundo paso es ir a otra zona de nuestra plantilla (en este caso es mejor trabajar sin expandir los widgets, para no liarnos)

Vamos a buscar un código parecido a este:


<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.
.
Aquí dentro estarán los WIDGETS que ya hay en esta columna
.
.
</b:section>
</div>


Copiamos todo el código y nos cargamos lo que hay entre las partes en negrita (son los widgets que hay en esa columna y no podemos duplicarlos)

Ahora lo renombramos para que se identifique con la segunda barra lateral y nos quedará este código:

<div id="sidebar2-wrapper">
<b:section class="sidebar2" id="sidebar2" preferred="yes">
</b:section>
</div>

Ahora viene otra cuestión importante. Depende de donde coloquemos este código, la columna lateral 2 se ubicará en diferentes zonas del blog así que si lo que queréis es tener una columna lateral a cada lado de los posts debereis pegar este código ANTES del código para los posts (sería el que empieza como (div id="main", o "content"... etc). Si quereis las dos barras una junto a la otra podéis pegar el código a continuación del código de la Sidebar que ya teníamos... espero que se entienda...

Por último y casi lo más importante, hay que definir los anchos de cada área para que no se superpongan unos sobre otros. En mi caso, los anchos han sido los siguientes: (evidentemente a día de hoy... pero quien sabe mañana.. ;) )

Header-Wrapper: Lo he dejado como estaba, pero seguramente lo cambiaré más aelante para que el título no quede tan pequeño... pero esto es a gustos.

Outer Wrapper: Lo he llevado hasta 860 px

Main - Wrapper: Lo he aumentado un poco, hasta 450 px

Sidebar-Wrapper: La he estrechado de 220 px a 150 px

Sidebar2-Wrapper: Idéntica a la anterior, pero le he añadido 30px de padding para que haya un poco de separación entre ella y el contenido del blog... es decir, esto:


#sidebar2-wrapper {
width: 150px;
float: left;
padding: 30px;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Las líneas en rojo son las que he añadido a mayores.

Esta explicación es válida para plantillas de base Minima, pero el método es similar para todas ellas, aunque las hay que es más complejo.

23 comentarios:

Paco dijo...

Hola. Estoy siguiendo tus pasos para que en mi blog la columna de los posts sea mas ancha (lo de la tercera columna aun no lo necesito). En principio cambiando el width funciona, pero se me quedan las marcas redondeadas en la cabecera en la anchura que había antes.

No se si me he explicado. Podrías ayudarme a solucionarlo.

Gracias

Zaebos dijo...

si, te entiendo... eso se debe a que para cada columna hay un gráfico asociado. Fíjate que en cada una hay un background que se coresponde con un .gif. Lo que tendrías que hacer es cambiar esos gifs por unos nuevos adecuados al ancho que has escogido y luego subirlos a imageshack o cualquier otro y poner la url de esa imagen el lugar de la url que tienes ahora.

tylelly dijo...

Saludos Zaebos: Puedo parecer muy comodo, pero es que pierdo mucho tiempo en querer dejar a mi gusto mi blogs, y la atencion debe ser la informacion que trasmito no sus modificaciones.

Con estas entrada te estoy pidiendo si es posible que me pases el codigo HTML de tu plantilla, para copiarla, facilitandome la labor, ya que la veo idonea para lo que busco.

Aunque tendre que buscar o me expliques como paso los sidebars a cada lado, no como los tienes tu.

Posiblilidades que las pestañas de las categorias se abran como una persiana para que salgan enumeradas las etiquetas que comprenden cada una de ellas.

Una pregunta ¿existe una plantilla, que pueda tener funcion de una galeria fotografica?.

Mi blog es AXIT foto, y no solamente tengo fotografias echas por mi, sino que cuelgo noticias, bigrafias, links, etc.

Esperando que no te moleste mi solicitud, estando a tu disposicion y dentro de mis posibilidades para lo que necesites.

Atentamente Tylelly

Zaebos dijo...

No me molesta en absoluto.. de hecho, en la categoría descargas puedes bajar esta plantilla (algunos widgets no están todavía incluidos). el problema radica en que muchas modificaciones tienen que hacerse en cada plantilla ya que dependen de los feeds de tu blog, scripts que deben ser configurados para cada URL.. etc.

De todos modos, ahora ando un poco atado de tiempo, pero en breve intentaré dejar una plantilla para descargarse como la que estoy usando yo pero con las columnas a ambos lados,que veo que es algo que se demanda bastante. De paso intentaré incluir en ella los trucos y widgets que se puedan preinstalar en la plantilla y que no requieran modificarse para cada página en concreto.

Si te interesan plantillas orientadas sobretodo a la fotografía tal vez te guste esta:
http://2006-photo-a-day.blogspot.com/

que la puedes descargar aqui:
http://creating-template.blogspot.com/2006/05/photo-blog-template.html

tylelly dijo...

Gracias por la respuesta tan rapida.
La plantilla orientada a la fotografia, deberia tener la posibilidad de agruparse las imagenes en temas, cada tema tendria sus archivos de imagenes especificos, los cuales se veran en pequeño y clikando encima de ellas salga la imagen grande.
Y con respeco a la persiana de las categorias, no me has comentado nada ¿ es posible?

Atentamente Tylelly

Zaebos dijo...

Imposible, imposible.. no lo creo, pero viendo lo que me comentas creo que blogger se te va a quedar pequeño, tal vez necesites crear una página desde cero con tu propio espacio para poder meter flash, animaciones y demás.... lo que dices de las categorías... por lo que creo entender... sería algo similar a lo que tiene este blog, que tb. es un blog de ayuda que suelo consultar.

http://stubborn-fanatic.blogspot.com

tylelly dijo...

Si señor esa es la idea, Intentar no tan cutre, y como veo que en blogger se puede hacer, ahora es buscar el metodo.

Tengo un problema grave, no se ingles y no conozco los lenguajes de programacion, me muevo mucho por intuicion.

Me has echo sonreir con lo de "Imposible, imposible.. " y te agradezco tus aportaciones.

Ya cococes mis necesidades, si puedes echarme un capote, aqui lo estoy esperando.

Tienes un logo con codigo html para poder ponerlo en mi blog, me apetece hacerlo.

Saludos.

Zaebos dijo...

Supongo que podría echarle un vistazo.. después de todo es una manera muy elegante de poner las ctegorías... mi problema es que ando algo liado con el trabajo y tal con lo que tardaré un tiempo... de hecho la frecuencia con la que posteo aquí es muy irregular, pero no me olvido... lo del logo... pues mira.... no tengo, la verdad... pero te lo agradezco... es otra tarea pendiente...

tylelly dijo...

acabo de darme de alta en safari para windows ( por cierto me da error) y en la pagina siguiente de apple fijate en las columnas laterales, que hacen la misma funcion de las pestañas pero mejor colocadas. la direccion es la siguiente http://www.apple.com/startpage/

Otra forma de de colocar las categorias, enlaces etc. con lo que descongestionas las barras laterales, te queda muy elegante y sin tanta informacion innecesaria, para el que no la busca.

Perdona por el trabajo que te estoy dando, aunque sea a largo plazo.

Un abrazo Tylelly

UNAprofetecno en redDada dijo...

Hola! después de mucho buscar me encuentro con tu post que al parecer es lo que necesito para cambiar el ancho de mi tercer columna, pero no logro hacerlo. Mi template se llama underwater y ya tiene las tres columnas, pero la derecha es muy ancha (o bien la de los post, no sé bien) y cuando le agrego cosas se va hacia abajo porque no cabe a lo ancho del espacio que le queda. Será que podrás ayudarme? Mucho no vas a encontrar porque estoy migrando lentamente de spaces live. Mi dirección es http://unaprofetecno.blogspot.com
Gracias y saludos

Zaebos dijo...

Depende de la estructura de tu template en concreto. Pero más o menos en todas encontramos los mismos elementos. Si se te superpone una sidebar sobre el area de posts o bien algunos elementos cargan debajo es debido a que no cabe todo. Tienes que asegurarte que dentro del #outer wrapper "caben los demás". El outer tiene que ser suficientemente ancho para que la suma de las columnas y el área de posts no superen su tamaño.

Si quieres tener una columna lateral de 250px, un área de posts de 450 px y una tercera columna de otros 250 px, el outer-wrapper tiene que ser al menos de 950 px... me explico?

UNAprofetecno en redDada dijo...

La verdad es que no entendí nada. Pero gracias a tu contestación pude saber cómo buscar un "paso a paso" porque no tenía idea de cómo se llamaba el área total(outer wrapper)ni tampoco los demás wrapper para qué servían (es que recién estoy incursionando en blogger después de aprenderme todo sobre spaces live). Sobre todo porque cuando me puse a buscar en mi código, el outer y los demás no tienen el tamaño expresado en px sino en porcentajes.
Te agradezco muchísimo tu ayuda y que me hayas contestado tan rápido.
Ahora sí que quedó bien mi blog.
Saludos y hasta siempre.

UNAprofetecno en redDada dijo...

Me había olvidado de preguntarte cómo puedo hacer para poner el título de la cabecera más abajo, porque tapa parte de la imagen. Es el título por defecto del nombre del blog...a ése me refiero.
Saludos y gracias nuevamente.

CharlieRVesco dijo...

Hola, este tutorial es justo lo que necesitaba para mi blog, me ha venido de perlas.

Muchas gracias por poner cosas tan utiles para el resto de los mortales (y por unas explicaciones tan sencillitas que permiten comprender el como opera cada cosa ;))

CharlieRVesco dijo...

he tenido un problema totalmente inusual... la columna de la izquierda queda bien, aparentemente, y la de la derecha... se me pone abajo.

Bien, lo primero es que la tercera columna, la de la derecha, no se me largue abajo y me desajuste el blog.

El otro problema es al querer añadir nuevos elementos a la primera columna, ya que me muestra esta de forma muy extraña, como si se superpuiera a la columna main. ¿que puedo haber hecho mal?

gracias por adelantado. www.densetsumagazine.com

Zaebos dijo...

Si una de las columnas aparece abajo del resto es porque el ancho del blog no es suficiente para alojar todos los elementos.. asegurate que el outerwrapper sea mayor que la suma de las sidebars y el main.. pero asegurate también de que incluyes en las sumas los paddings (que son las separaciones )... probablemente ahí esté el fallo.

El que se superponga una a otra puede ser debido a lo mismo... aunque ahí ya pueden afectar muchas otras cosas.... de todos modos... la estructura de la que hablo en el post es muy sencilla y se ajusta a la plantilla Minima... si tienes otra puede que haya más elementos que influyan en el resultado final... mi consejo es que revises los tamaños de todos los elementos a ver si superan el ancho del outerwrapper

Zruc dijo...

Hola, ya tengo mis tres columnas!!!!
Lo único, un problemilla, es que no consigo colocarla en el lado izdo, algo estoy haciendo mal... no me queda claro.
A ver si me puedes echar una mano, te lo agradeceria.

FRIAS, Antonio dijo...

Hola. Estuve viendo tu plantilla y me gusta el menu horizontal que usas. La pregunta es: parece que no tenes enlaces para desplegar cosas del menu. Como los almacenas. Perdoname la ignorancia, pero tengo serior problemas para poner la info, y no quiero llevarla a enlaces por que dejeran de interesarse por mi sitio. Ayudame por favor. Gracias. Dios te Bendiga.

Zaebos dijo...

hmmm... no estoy seguro de entenderte del todo, pero no almaceno nada... cada una de las pestañas es un enlace a una categoría... blogger se encarga de actualizar cada una de ellas cada vez que incluyes la categoría en el post. El menú es simplemente una manera de mostrar las categorías, pero no difiere en nada al sistema habitual de blogger. Lo único a tener en cuenta es que cada categoría nueva que creemos aumentará el número de pestañas por lo que afecta al diseño de la plantilla de tal manera que si no quieres que se acumulen filas y filas de pestañas, antes de optar por este método es mejor tener claro cuantas categorías vamos a tener.

Antonio dijo...

Lo que pasa es que no se expresarlo tecnicamente. El blog http:/cristianoantoniofrias.blogspot.com, tengo cosas propias y tambien tengo que agregarle temas de salud y otros. Si te fijas, en el mío tengo puesto por categorias, pero en el archivo me los manda asi nomás. Y puse un menu horizontal, que no puedo definirlo, por que tiene que tener todo lo que tiene, pero quiero ver de almacenarlo yo, por que si mis lectores van a la pagina de enlace que tiene, corro el riesgo de que vayan alla siempre. Y vos lo tenes en un mismo lugar a todo. Ademas tuve que hacer otro blog para ese menu, y asi voy a tener que hacer uno por cada categoria. Ayudame por favor. Dios te bendiga

Anónimo dijo...

Amiable dispatch and this mail helped me alot in my college assignement. Thanks you as your information.

Anónimo dijo...

hola, espero me puedas ayudar, soy nueva en ésto y al buscar en el código no encuentro nada con wrapper, es decir en el código no aparece la palabra wapper y pues no puedo modificar los px para hacer la plantilla mas ancha

Anónimo dijo...

ahora mismo estoy agregando este blog a mis favoritos. lo recomendare

nursing scholarships

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas