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.