Agregar nueva columna - Plantilla Thisaway

En esta entrada veremos cómo agregar una nueva columna a la plantilla Thisaway 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 {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}

Empezaremos modificando el ancho del blog, por lo que en el código anterior sustituimos los 760 píxeles por 990 px.

Esta misma modificación la haremos en el código:

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}

A continuación, buscaremos el siguiente código:

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
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 encontrado, lo copiamos y lo pegamos justo debajo, realizando las modificaciones oportunas en el nombre y alineación de la barra, por lo que el código nuevo sería el siguiente:

#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
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 insertaremos la nueva columna en el cuerpo (body) de la página. Para ello, 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>

Éste es el código de la columna lateral que tenemos a la derecha del blog. Lo que haremos será copiar y pegar este código justo antes de la línea <div id='main-wrapper'>

Una vez pegado el código, modificaremos el nombre y eliminaremos los gadgets puesto que no pueden estar duplicados, por lo que el código de esta nueva columna quedará de la siguiente forma:

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

Guardamos los cambios efectuados en el código de la plantilla y, mediante la opción Elementos de la página (ficha Diseño), agregamos un gadget nuevo a la barra lateral creada.

Si guardamos los cambios y visualizamos el resultado, comprobaremos que la barra lateral derecha aparece en la parte inferior por falta de espacio.

Para solucionar esto, vamos a modificar el ancho de las barras laterales. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la definición de ambas barras, es decir, los siguiente códigos:

barra lateral izquierda -> #newsidebar-wrapper {

barra lateral derecha -> #sidebar-wrapper {

Estos son los códigos con los que empieza la definición de ambas barras, lo único que tendremos que hacer es modificar el valor del ancho, que lo determina la propiedad width, a 220 píxeles en vez de 269 px que es el ancho que tiene definido actualmente.

Guardamos de nuevo los cambios y el resultado debería parecerse a la siguiente imagen:

Llegado a este punto, ya solo nos hace falta maquillar un poco la apariencia del blog eliminando o retocando las imágenes que aparecen tanto en el encabezado del blog como a derecha e izquierda que es el borde que visualizamos, en este caso, de color marrón más oscuro.

Si decidimos eliminar ambas imágenes solo se perderá ese aspecto redondeado en la parte inferior del encabezado y el borde derecho e izquierdo que aparece en marrón más oscuro.

A continuación os indico donde están definidas, en el código HTML de la plantilla, ambas imágenes y que cada uno decida si quiere eliminarlas o bien retocarlas bien con Photoshop o cualquier otro programa de retoque fotográfico.

Código que define la parte inferior del encabezado:

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat $startSide bottom;
}

Si decidimos eliminar la imagen, este código quedaría de la siguiente forma:

#header-wrapper {
padding-bottom: 15px;
}

Y, por último, os indico el código donde está definida la imagen que hace que aparezca ese borde a derecha e izquierda:

#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}

Al igual que antes, si decidís eliminarla, el código quedaría de la siguiente forma:

#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9;
}

Hecho esto, guardaríamos los cambios y el resultado, habiendo eliminado ambas imágenes, sería el siguiente:
Por cierto, hablando de programas de retoque fotográfico os he indicado que lo podéis hacer con Photoshop o cualquier otro programa.

Otro programa de retoque fotográfico es Gimp, cuya página principal podéis visitar haciendo clic en este enlace, y cuyo funcionamiento podéis aprender mediante este blog cuya autora es misaani.