Agregar nueva columna - Plantilla Denim

Siguiendo con el tema agregar columnas al blog, hoy dedicaré esta entrada a la plantilla Denim y sus variantes.

Antes de empezar, aclararé que como la explicación es la misma en todas las plantillas, a partir de hoy iré directamente al código que hay que modificar sin detenerme mucho en explicaciones puesto que las tenéis en las entrada del día 17 de Abril.

En primer lugar, antes de hacer cualquier modificación hacemos la copia de seguridad de la plantilla tal y como está explicado en esta entrada.

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

#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

Éste es el código de la barra lateral que tenemos a la izquierda del blog. Lo que haremos será copiar este código y lo pegarlo justo debajo modificando el nombre sidebar por newsidebar y la alineación (float) por $startSide.

A continuación, bajamos casi hasta el final de la plantilla y, en el cuerpo de la página (body), buscamos el código siguiente:

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

Éste es el código de la barra lateral derecha que tenemos en el blog junto con los gadgets. Lo copiamos y lo pegamos justo antes de <div id='main-wrapper'>

Eliminamos los gadgets que tiene incorporada la barra lateral, porque si no lo hacemos nos dará error por duplicidad de gadgets ya que hay algunos que son únicos y no pueden estar duplicados.
Además cambiaremos el nombre sidebar por newsidebar tal y como hemos hecho anteriormente, y el resultado final del código debería ser este:

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

Una vez hecho esto, guardamos los cambios, accedemos a la ficha Diseño -> Elementos de la página y agregamos un gadget a la nueva barra para poder apreciar la existencia de la misma.

Guardamos de nuevo los cambios y comprobamos el resultado.

A continuación, necesitamos modificar el ancho del blog puesto que como podemos ver la barra derecha aparece en la parte inferior por falta de espacio.

Accedemos de nuevo a la ficha Diseño -> Edición de HTML y buscamos el siguiente código dentro del apartado Content:

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

Tenemos definido un ancho para el blog de 760 píxeles que modificaremos al valor 990 px.

Guardamos los cambios y comprobamos que el resultado se debería parecer a la imagen que se muestra a continuación: