Plantilla Rounders 4 con sidebars a ambos lados

Hace ya tiempo, en alguno de los comentarios de este blog se me preguntaba como se podía pasar de una plantilla Rounders 4 (como la plantilla primigenia de este blog) a una en la que tuvieramos columnas laterales a ambos lados. La verdad es que anduve un poco liado, pero estos días he vuelto a retomar el blog y me he acordado de esa cuestión.

La solución para transformar la plantilla pasa por una serie de incursiones en el editor HTML con la que los errores son bastante habituales así que es conveniente hacer una copia de nuestra plantilla por si las moscas... ;)

Los pasos que cito a continuación son teniendo en cuenta que el punto de partida sea una ROUNDERS 4 sin modificaciones en las sidebars, es decir, una ROUNDERS nativa o al menos lo más posible en la estructura.


Lo primero que vamos a hacer es cambiar ciertos parámetros de la anchura total del blog. Buscamos en nuestra plantilla este código:

#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

Cambiamos el valor 740 por 995

Justo a continuación encontraremos este otro fragmento:

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}

En la linea resaltada añadimos 15px de manera que nos quedará así:

margin:15px 0 0 15px;

Seguimos bajando por la plantilla y un poco más abajo encontraremos esto:

#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

Justo detrás añadiremos esto:

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

#newsidebar-wrap1 {
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url
("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding: 10px 0 8px;
}

Al haber variado los tamaños y teniendo en cuenta que esta plantilla tiene los bordes redondeados tendremos que sustituir las imágenes para los bordes del header y del footer.

Buscamos la primera sección :

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url
("http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url
("http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Las líneas en rojo son las nuevas imágenes que tendremos que poner en lugar de las de la plantilla original.

Hacemos exactamente lo mismo con la siguiente sección:

#footer-wrap2 {
background:$titleBgColor url
("http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
padding:8px 0 0;
color:$titleTextColor;
}
#footer {
background:url
("http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:8px 15px 8px;
}

Bueno, ya queda poco... ;)
Buscamos esta sección y añadimos la linea en rojo:

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #newsidebar-wrap,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

Unas líneas más abajo encontraremos el ancho del #outer wrapper que hay que sustituir por 995 pixels, así que nos quedará de esta manera:

body#layout #outer-wrapper {
width: 995px;
}

Ya sólo nos queda un paso por dar. Buscamos esta sección:

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>

y justo encima ponemos todo esto:

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

Con esto ya debería de estar todo perfectamente. Ahora tan sólo nos queda guardar y una vez comprobado que no hay errores, ir a la plantilla de diseño y colocar los widgets, códigos... etc que deseemos para adecuar nuestro blog al nuevo estilo.

Si tenéis alguna duda o algo no va bien (exceptuando erratas que puedan haber surgido) podeis revisar paso a paso el proceso en Tips for New Blogger.