Tuneando la snapshot

Una nueva sidebar

2008-08-07T00:17:00.004+02:00

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

2008-08-06T01:05:00.003+02:00

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

2008-07-27T11:50:00.003+02:00

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

2008-07-26T18:38:00.002+02:00

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

2008-07-26T18:00:00.005+02:00

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.

Segundo paso: Ensanchar el blog

2008-07-26T17:31:00.004+02:00

Como la cabecera que he colocado mide 800 píxels y el blog sólo 700, lo he ensanchado.

En primer lugar en esta zona

#outer-wrapper {
width: 800px;

dejando, como ves, en 800 el ancho total del blog.

Eso dejaba mucha distancia entre las entradas y la sidebar, así que he ensanchado la zona de las entradas por aquí

#main-wrapper {
width: ---px;

Primero le he dado 100 píxels de mas, que son los que le he añadido al blog, pero quedaban muy pegadas las dos zonas.
Finalmente tras muchas pruebas lo he dejado en 460 píxels.
También he dejado en esos 460 la última línea de este código, otro width que sigue a una orden que no tengo muy claro qué significa, pero la "experiencia" me dice que si hay dos medidas dentro de un mismo trocito de código, y ambas son del mismo plano, lo mejor es que sean iguales.

También he visto que al ensanchar el main, unas líneas que hay bajo la fecha y bajo el título quedaban fuera de sitio.
Las he buscado y encontrado, aquí:

h2, #comments h4 {
background: transparent url(http://www.blogblog.com/snapshot_sable/bg-header1_$startSide.gif) bottom $endSide no-repeat;

es la que hay bajo la fecha y bajo los títulos de la sidebar.

h3 {
background: transparent url(http://www.blogblog.com/snapshot_sable/bg-header1_$startSide.gif) bottom $endSide no-repeat;

es la que hay bajo el título de las entradas.

El problema era que en el código se dice que están al final de la zona que ocupan, así que le he cambiado la orden para que aparezcan desde el principio y donde ponia $endSide ahora pone $startSide en las dos.

Nuevo problema: Al hacer esto, la línea que hay bajo los títulos de la sidebar se veia solo una línea recta, sin ese dibujo que hay al final.
Me he dado cuenta de que el problema era que al decirle en el primer apartado, h2, que se colocara desde el principio, al ser la línea más larga que el ancho de la sidebar, no se veía el final de la línea que es lo mejor de ella.
De manera que he añadido este código debajo de h2

.sidebar h2 {
font-size: 1em;
margin-top: 2em;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 0;
color: $sidebarcolor;
background: transparent url(http://www.blogblog.com/snapshot_sable/bg-header1_$startSide.gif) bottom $endSide no-repeat;
padding-bottom: 2px;
}

Como ves es idéntico al que había, excepto por el hecho de que este código afecta solo a los títulos de la sidebar y en él no he variado la posición de la línea (recuerda que en los otros dos se ve $startSide).
Al especificar que este código afecta solo a los títulos de la sidebar, ésta se ha desvinculado del código inicial, el h2 original, y ha pasado a tener sus propias órdenes.

El resultado puedes verlo tu mism@. La línea en cuestión se ve a la izquierda en la zona de las entradas, y desde la derecha en la sidebar.

Primer paso: La cabecera

2008-07-26T17:02:00.001+02:00

A petición de Cameron, voy a ir tuneando esta plantilla.
He empezado por la cabecera, ya que fue su consulta: Como poner una cabecera personal sin que se vea la original que hay debajo.

Pues bien, para lograrlo has de localizar esta zona del código /* -- layout -- */ y en ella las zonas en que está dividida la cabecera, que son las siguientes:

#header-wrapper {
.descriptionwrapper {
.description {
#header-inner {

y eliminar en todas ellas las líneas del background y una de un borde que está en .description{

Una vez eliminado todo esto, ya puedes cargar tu banner o imagen en Editar del elemento del título, con lo que se verá la imagen sin verse nada detrás, que era su problema.