Agregar nueva columna - Plantilla Herbert

Hoy os enseñaré como agregar una nueva columna a la plantilla Herbert.

En primer lugar, antes de realizar cualquier modificación, os aconsejo que hagáis la copia de seguridad de la plantilla.

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

@media all {

div#main-wrapper {
float: $startSide;
width: 66%;
padding-top: 0;
padding-$endSide: 1em;
padding-bottom: 0px;
padding-$startSide: 1em;
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 */
}

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: $endSide;
}

div#sidebar {
width: 30%;
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 */
}
}

Como podemos ver, al igual que ocurría con la plantilla Sand Dollar, la anchura tanto de la zona principal como de la barra lateral viene en porcentaje.

Lo que haremos será duplicar el código div#newsidebar realizando las siguientes modificaciones:

div#newsidebar {
width: 30%;
float: $startSide;
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 */
}

Además, cambiaremos el ancho de la zona principal del blog (div#main-wrapper), en vez de dejarlo en 66% lo vamos a definir en 40%.

También cambiaremos el ancho de las barras laterales (div#sidebar y div#newsidebar) en vez de 30% lo definiremos al 28%.

Hecho esto, accedemos al cuerpo de la plantilla (casi al final) y buscamos el 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>

Lo copiamos y pegamos antes de la línea <div id='main-wrapper'>, haciendo las siguientes modificaciones:

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

Guardamos los cambios, desde la opción Elementos de la página agregamos a esta nueva columna un gadget, guardamos de nuevo los cambios y accedemos a visualizar el resultado que debería ser el siguiente: