Tuneando la moto

La menubar

2008-03-09T14:19:00.004+01:00

Para poner la menubar en esta plantilla, si quieres que tenga un aspecto similar a la que ves, has de crearle las variables que le faltan a la plantilla original, de lo contrario el código que te incluyo aquí no funcionará y te dará error.
Así que empecemos por esta parte.
En la entrada anterior te he contado como añadir una variable para el borde. Si no lo has hecho, hazlo ahora, pues es una de las que vamos a utilizar y añade dos más. Una para el botón que se ve y otra para el botón cuando pones el ratón encima. son estas:

<Variable name="botonmenubarcolor" description="Boton Menubar Color" type="color" default="#cccccc" value="#d2fcca"><Variable name="botonmenubarbgcolor" description="Boton Menubar Background Color" type="color" default="#ffffff" value="#ffce9e">

Resitua el código para que se alinee con los que hay, más que nada para saber qué es qué.
Una vez pegadas, puedes hacer vista previa, pues el hecho de que todavía no se utilicen no afecta al funcionamiento del código.
Si ves que carga bien, SIN expandir artiligios baja a buscar este código:

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='El título de tu blog (cabecera)' type='Header'/> </b:section> </div>

y justo debajo pegas este:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'><b:widget id='LinkListX' locked='true' title='Menubar' type='LinkList'/> </b:section>

Fíjate que he remarcado en rojo una X. Eso es porqué aquí, en su lugar, has de poner el número que corresponda a la lista de enlaces que todavía no tienes.
Si ya tienes alguna lista de esas, en el código las verás así: b:widget id='LinkList1' o 'LinkList2', etc. Mira cuantas tienes y cambia la X por el número que corresponda. (Si no estás segur@ pon un número alto, 20 o 30 o más).
---
Luego sube al sector del CSS y encima de esta línea:
/** Page structure tweaks for layout editor wireframe */
pegas esto:

#menubar h2 {
display:none;
}
#menubar ul {
list-style: none;
padding: 0 0 20px 0;
}
#menubar li {
float: left;
background-color: $botonmenubarcolor;
border: outset 2px $borderColor;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: $linkColor;
}
#menubar a:hover {
background-color: $botonmenubarbgcolor;
color: $hoverLinkColor;
}

Haz Vista previa y si la página carga bien, pues de momento no la verás, guarda plantilla.
Y ya puedes ir a Elementos de la página para empezar a poner tus enlaces en ella como si fuera una lista normal de enlaces.
Y en Fuentes y Colores verás las nuevas variables para modificar el color de los botones a tu gusto.
---
ADVERTENCIA
Cuando copias y pegas un código, a veces los espacios que separan las órdenes desaparecen y al hacer Vista previa da error o no funciona bien.
Si te ocurriera algo así, vigila que estén todos los que hay aquí y si ves que falta alguno pónselo.
Sobre todo en la zona del HTML, que cada definición está separada de la que le sigue por un espacio, por ejemplo estas dos class='header' id='header' aquí el espacio está entre ' y id.

Enmarcar los elementos y las entradas

2008-03-09T13:06:00.003+01:00

Si quieres enmarcar los elementos de la columna lateral y las entradas, has de añadir la orden a las zonas que las definen.
Para enmarcar las entradas, agrega esta línea

border: solid 1px $linkColor;

a la zona del .main .widget { Cambiando solid por dotted, dashed, double, etc. para variar el estilo de la línea, 1px por 2px 3px etc. para variar su grosor y $linkColor por cualquier otra definición de color o por #xxxxxx (donde xxxxxx corresponde al número del color) si quieres ponerle un color diferente.
---
Ten en cuenta que esta plantilla no tiene muchas variables de color, así que si no quieres repetir colores, ni tener que andar trasteando en el código cada vez que quieras modificar el de esta línea, te aconsejo que crees la variable para ella añadiendo a la zona de variables esta:
<Variable name="borderColor" description="Border Color" type="color"default="#669922" value="#f7993b">y en la línea que menciono arriba su definición a fin de que quede así:

border: solid 1px $borderColor;

Después añades esta línea

padding: 10px;

para separar el contenido del borde.
---
Para enmarcar los elementos de la columna lateral, haces lo mismo en .sidebar .widget {
añadiendo ambas líneas al código existente.
---
Por otro lado también puedes separar con una línea o dos el pie de la entrada.
Para hacerlo, en la zona del .post-footer { añades una de estas líneas o las dos.

border-top: dotted 1px $borderColor; (la de arriba)
border-bottom: dotted 1px $borderColor; (la de abajo)

Fíjate que en este caso he cambiado el estilo de línea. Al igual que antes, puedes modificarlo a tu gusto.
Recuerda que si no has añadido la variable te dará error, en tal caso pon $linkColor en ambos sitios.

Cambiar el fondo de la zona útil

2008-03-09T11:53:00.004+01:00

Con zona útil defino la parte del blog donde aparecen las entradas y la columna lateral.
Para poner ahí un fondo distinto del que tiene el blog, en #outer-wrapper { la línea del background que se ve así:
background: $mainBgColor url(http://www.blogblog.com/moto_mr/innerwrap.gif) top $endSide repeat-y;
ha de ser así:
background: url(direccion de la imagen) repeat;
---
Variantes de este tema.
Si solo cambias la dirección pero no el resto de la línea, puedes poner una imagen a lo largo de la sidebar, a la derecha.
Si es muy grande, las cosas y las letras se verán encima, así que vigila el color.
Si es pequeñita, una cenefa fina, para que no se superpongan las letras de la columna lateral, en .sidebar .widget { verás que pone margin: 12px 0 13px 0; cambia el primer 0 por 10px o 15px para que eso no suceda, de manera que la línea se vea así:
margin: 12px 15px 13px 0;
---
Si tu plantilla es de las modernas verás varias líneas de margin, en este caso has de variar la de margin-$endSide y dejarla en esos 10px ó 15px en lugar de 0.
Cambia también el padding de este mismo bloque y ponlo en 10px; con ello separarás un poco los elementos del borde y entre si.
Con todos estos cambios, este bloque del código debería verse así:

.main .widget {
margin-top: 12px;
margin-$endSide: 10px;
margin-bottom: 0;
margin-$startSide: 0;
padding: 10px;
}

si tu plantilla es de las actualizadas, o así

.main .widget {
margin: 12px 10px 13px 0;
padding: 10px;
}

si es de las antiguas.
---
Puedes ver un ejemplo de esto en este blog donde a lo largo de la derecha de la columna lateral hay unas pequeñas mariposas.

Cambiar el fondo del blog

2008-03-09T11:34:00.004+01:00

Si quieres poner un fondo personal, como el que ves aquí, en body { verás esta línea:

background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y; que deberia quedar así:

background: url(la direccion de tu imagen) repeat fixed;

Fíjate en lo que hemos hecho: Borrar el color del fondo, #692, borrar su posición top center y su distribución repeat-y, para dejarle la orden de que repita a lo largo y ancho del blog con repeat y que no se mueva al bajar la página con fixed.

---

Si lo que quieres es poner una imagen encima del fondo, de esas que se mueven como las que tengo en Tuneando la scribe, no borres el color del fondo, salvo que prefieras que la imagen se vea en fondo blanco. El resto déjalo como digo que ha de quedar.

Ensanchar el blog

2008-03-09T11:16:00.004+01:00

Para ensanchar el blog, supongamos que a 800 píxels, que es la medida de la imagen que hay en la cabecera, localiza esta zona: #outer-wrapper { y cambia el 692 por 800.

También tendrás que ensanchar un poco lo que hay dentro del blog, pues queda muy separada la columna lateral de las entradas, así que en #main { cambia el 400 por 550 y en #sidebar { el 226 por 230.

Estas medidas que te doy son orientativas, lo único que has de tener en cuenta es que la suma de ambas sea 20 píxels menor que el total, pues de lo contrario la sidebar se cae y se coloca debajo de las entradas, ya que hay que dejar espacio entre ambas columnas.

Puedes ensancharlo más, si tu imagen fuera más ancha que la que de aquí, pero siempre respetando esos 20 píxels para separar ambas zonas.

Poner una imagen en la cabecera

2008-03-09T09:41:00.004+01:00

Puedes poner una imagen en la cabecera del blog de dos maneras, a través de Editar, del elemento Cabecera o título, o directamente desde el código.

Si lo pones desde Editar, en la plantilla la cabecera se adaptará a la imagen, pero dependiendo de las medidas, el blog se verá descompensado. Si la imagen es más ancha que el blog, sobresaldrá por la derecha, si es más estrecha, se verá parte de la zona de la cabecera por la derecha.

La altura se adapta automáticamente.

Si la colocas desde el código la cosa se complica un poco, pero lo veremos después.

De manera que, de un modo u otro, tendrás que retocar el código, a menos que desde Editar pongas una imagen que tenga el ancho exacto de la zona de cabecera de la plantilla original, que son 692 píxels, tal como advierten en el propio elemento cuando lo abres para editarlo.

Así que vamos a ver como colocar y adaptar la imagen y la plantilla en ambos casos.

La que ves aquí está colocada desde Editar, así que empezaré por éste.

---

Una vez colocada la imagen y visto como queda, si sobrepasa la zona útil pinchas en Edición de HTML y antes que nada le das a Vista previa, de esta manera ya la tienes a la vista para ir comprobando los cambios.

Luego, conociendo el ancho de la imagen que has colocado, en el caso de este blog eran 800 píxels, pues se trata de una imagen de free web page headers, tendrás que ensanchar el blog

y retocar otras cosas, que veremos en la siguiente entrada, pues no he logrado que acepte la orden de centrarla sin ensancharlo.

---

Para colocarla desde el código:

En esta plantilla el código de la cabecera está divido en dos secciones, #header-wrapper y #header h1 y en ambas hay una dirección entre paréntesis.

La primera que ves, header-wrapper, corresponde a la mitad inferior de la zona de la cabecera, donde están el subtítulo y la cenefa que la separa de la zona del blog.

La segunda, header h1, corresponde a la zona del título.

Para colocar una imagen y que se vea bien, has de cambiar la dirección que hay en header-wrapper por la tuya, y añadir, esta línea

height: xxxpx;

donde xxx será la cantidad que necesitas para que la imagen se vea bien, que suele ser algo menor que la de la imagen. (Por ejemplo, la imagen que ves arriba mide 800 x 200, colocada desde el código la altura final ha sido de 180px. Más de eso aparecía una línea verde por arriba.)

Después has de borrar la dirección que hay en header h1 entre paréntesis.

Vista previa y si se ve bien ya puedes Guardar.

NOTA

Si no modificas el ancho del blog, la imagen se adaptará automáticamente al ancho de la cabecera, caso de ser más ancha, recortándose lo que "sobra" por la derecha.

Si es más estrecha, seguirá viéndose el fondo original, verde, gris, o rosa, también por la derecha.