Una nueva sidebar

Por último le he colocado una nueva sidebar.

Esta plantilla es de las más sencillas de hacerlo.

Para empezar, SIN expandir artilugios, buscas en el HTML, (la zona donde todo está escrito dentro de esos símbolos<>), el código de la sidebar que empieza por <div id='sidebar-wrapper'> y termina en el siguiente </div> lo copias encima de <div id='main-wrapper'>
Una vez pegado cambias sidebar-wrapper por newsidebar-wrapper y donde pone id='sidebar' pones también newsidebar.

Al copiar ese código entero se habrán copiado todos los elementos que tuvieras en la sidebar.
Borra de este nuevo código los que quieras que sigan en la sidebar antigua y deja en éste los demás. Luego, los que hayas dejado en la nueva bórralos de la antigua, de lo contrario te daría error al hacer vista previa.

Hecho esto, sube hacia el principio del código, el CSS, y busca esta línea /* -- layout -- */
debajo verás que pone #outer-wrapper { width: 800px;
cambia este 800 por 1000

Debajo está el código de la zona de las entradas: #main-wrapper { Allí le añades esta línea: margin-$startSide: 10px;

Más abajo está el código CSS de la sidebar que empieza por #sidebar-wrapper{
cámbiale el width: 264px por 240 donde pone padding-$endSide ponle 5px: y en padding-$startSide le pones 10px luego le añades esta línea: margin-$startSide:0;

Cópialo entero y pégalo debajo, cambiando sidebar por newsidebar, float: $endSide; por float:$startSide; y en la línea de margin que has añadido antes cambias start por end para que quede así: margin-$endSide:0;
(Esto son las separaciones de los contenidos a los márgenes finales del blog y a las entradas. Al dejarlos así, se verán equilibrados).

Vista previa y si todo va bien Guarda.

El fondo de la zona útil

Si quieres que el fondo de la zona útil se vea de un color o con una imagen diferente, has de borrar la dirección y el #fff que hay en la línea del background de outer-wrapper.
Para que se vea una imagen, pones en su lugar, entre los paréntesis, la de la tuya.

Si quieres que se vea un color liso, has de crearle la variable, pues esta plantilla no la tiene.

En este caso yo le creado dos.
A la primera la he llamado bgcolor /Background Color y en outer wrapper, en la línea del background he borrado todo lo que había después de los dos puntos y la he dejado así:
background: $bgcolor;

Luego he creado otra para la zona de las entradas y la he llamado mainbgcolor/ Main Background Color
y en la zona del main-wrapper he añadido background: $mainbgcolor;

Recuerda que para crear variables nuevas, para poder cambiar los colores en fuentes y colores, basta con que copies una cualquiera de las que hay, la pegues encima o debajo, o donde quieras en la lista de variables y le cambies el nombre y la descripción por la que sea adecuada a lo que vas a modificar. (En los ejemplos que te dejo arriba, la primera parte es el nombre y la segunda la descripción, ya lo verás en el código).

Luego una vez creada, has de añadir donde quieras poner un color modificable su nombre precedido del signo del dólar.

Solo has de tener cuidado de no equivocarte en su nombre o te dará error.

La menubar

Tanbién he añadido la menubar.
Para ello he aprovechado, como tengo por costumbre, la zona del crosscol.
Los códigos para ponerla puedes verlos aquí y para hacerlo aprovechando el crosscol, aquí.

Suelo añadirle variables a fin de que los botones se puedan configurar independientemente del resto, normalmente añado las que puedes ver aquí, pero en este blog he tenido que añadir la del borde, ya que de serie no la tiene.

El sistema para añadirla es el mismo que en los otros casos, solo cambiando el name y la description, que en este caso serán name= bordercolor, description= Border Color.
Y ya vereis las nuevas variables en Fuentes y colores.

Cuarto paso: Ponerle un fondo

Al igual que a las demás plantillas, este paso es muy sencillo. Basta localizar body y en la línea del background añadir, antes del punto y coma

url(ladireccion de la imagen) fixed

para que se coloque en el fondo la imagen que desees.

Con lo de fixed se logra que el blog se deslice sobre el fondo.

Tercer paso: Separar el pie del post

Un defecto muy grande que le encuentro a esta plantilla es que el pie del post está demasiado pegado a la entrada en sí, tanto que casi parece formar parte de lo escrito.

Habitualmente suelo poner los títulos de las entradas y los post-footer dentro de marcos, de manera que se note que, aunque forman parte de la entrada "no son" la entrada.

Pero en esta ocasión se me ha ocurrido aprovechar esta línea de separación que caracteriza a esta plantilla y poner una al final de la entrada, de manera que separase ésta del post-footer.

Para ello he copiado estas dos líneas del código de h2

background: transparent url(http://www.blogblog.com/snapshot_sable/bg-header1_$startSide.gif) bottom $startSide no-repeat;
padding-bottom: 2px;

y las he pegado en esta zona .post { pensando que quedaría al final de la entrada.

Al hacer vista previa he visto que si, que estaba al final de la entrada, pero que ésta incluye el post-footer, con lo que se veia debajo de éste.

Como dice aquel: NO PROBLEMO.

Primero la he copiado en la zona donde pone post-footer junto a otras cosas, pero no era ahí, así que he montado este pedacito de código

.post-footer {
background: transparent url(http://www.blogblog.com/snapshot_sable/bg-header1_$startSide.gif) top $startSide no-repeat;
padding-bottom: 2px;
padding-top: 6px;
}

cambiando bottom por top, para que la línea se viera arriba del post-footer.

¡Bingo! Esa era la solución, como puedes ver.