Agregar nueva columna - Plantilla Mínima Lefty

En esta entrada veremos cómo agregar una nueva columna a la plantilla Mínima Lefty y sus derivaciones.
En primer lugar, realizaremos la copia de seguridad de la plantilla tal y como explica en esta entrada del blog.

Una vez realizada la copia, accedemos a la ficha Diseño -> Edición de HTML y buscamos el siguiente código:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Modificamos el 660 px por 870 px para aumentar el ancho del blog.

Ahora, vamos a definir la nueva columna. Para ello, copiamos el código que aparece justo debajo del main-wrapper y lo pegamos realizando las modificaciones necesarias, quedando el código de la nueva columna de la siguiente forma:

#newsidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Una vez que hemos realizado estas modificaciones en la definición de los objetos de la plantilla, vamos a agregar definitivamente la nueva columna. Para ello, buscamos y copiamos este código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>

Una vez copiado, lo modificamos y pegamos justo debajo, quedando el nuevo código de la siguiente manera:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Seleccionamos de nuevo el código de la barra lateral inicial (sidebar-wrapper) y lo pegamos antes de la línea <div id='main-wrapper'>

Guardamos las modificaciones realizadas en la plantilla y nos dirigimos a la opción Elementos de la página.

Agregamos un nuevo gadget a la nueva columna para poder comprobar su existencia en el blog, guardamos de nuevo los cambios y comprobamos que el resultado debería parecerse a la siguiente imagen.

Como podemos comprobar las dos columnas han quedado en el mismo lado. Para poder una a cada lado, accedemos de nuevo a la opción Edición de HTML, buscamos el siguiente código

#main-wrapper {
width: 410px;
float: $endSide;
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 */
}

y modificamos la alineación (float) al valor $startSide.

Para terminar con esta plantilla, si queremos igualar el espacio que hay entre la barra lateral y la zona de las entradas, añadimos la siguiente línea de código en la definición de la barra lateral (sidebar-wrapper).

padding-$endSide:1em;

Guardamos los cambios y comprobamos el resultado final.