La menubar es esta barra de botoncitos que podeis ver bajo la cabecera.
Hace ya tiempo encontré en el blog de Rosa el modo de colocarla y os expliqué como hacerlo.
Posteriormente fui descubriendo como modificarla para darle el aspecto de botón, como ponerle a esos botones fondos que hicieran juego con el blog, ya fueran de color o de imagen, como crear variables para modificar la fuente y el color del botón tanto cuando se ve como cuando se pone el ratón encima y como aprovechar la zona del crosscol, un espacio que blogger gentilmente ha colocado bajo la cabecera de nuestras plantillas para que podamos poner publicidad.
A lo largo de este tiempo me han preguntado varias veces si se podia centrar cuando hay pocos enlaces, o alinearla con el resto del blog, cuando está llena de botones.
Todas las pruebas que había realizado hasta ahora daban como resultado que los enlaces se vieran en forma normal, uno bajo otro, con lo que ya había desistido de intentarlo.
Pero hoy, mientras estaba revisando todos los blogs para configurar el tema de los comentarios, he modificado los botones de los blogs de Utilidades, quitando el de google earth, (tema que tengo pendiente pero que no se como enfocar) y colocando en su lugar el de Gadgets.
También he añadido el del Diccionario y, al hacerlo, el último botón, correspondiente al Blog roll, ha quedado raro. Las dos palabras se han colocado una bajo la otra, ya que el botón entero no cabía en el espacio que tienen estos blogs, sin embargo seguia quedando una zona muerta a la izquierda.
Y de repente se me ha encendido la bombilla y he hecho una prueba.
¡Bingo!
La menubar se ha alineado con la sidebar, que en estos blogs está a la izquierda y el último botón ha recuperado su aspecto normal.
Luego, para ver si se podía centrar, he hecho la prueba en Música. ¡Perfecto!.
Es tan sencillo como añadir esta línea:
margin-$startSide: 0;
en este trocito de código: #menubar ul { antes del símbolo } que lo cierra, con lo que este trocito queda así:
#menubar ul {
list-style: none;
margin-$startSide: 0;
padding: 0 0 20px 0;
}
Si lo que quieres es centrarla en lugar de 0 pones la cantidad de píxels que creas necesarios para que empiece a verse. En el blog de música, por ejemplo, son 100.
En este caso has de expresarlo así:
margin-$startSide: 100px; (el 100 es un ejemplo)
Luego haces vista previa y vas reduciendo o aumentando esa cantidad según veas.
Solo una nota de atención: Si tu blog tiene una plantilla en la que las medidas vengan expresadas en % no vas a lograr centrarla, ya que el ancho del blog depende de la resolución de la pantalla con que se mire, con lo que lo que tu veas bien, otro puede verlo desplazado.
Y en la scribe a 3 columnas, no se ve en la misma posición si se mira en Explorer que si se mira con Firefox.
Por lo demás, en la minima ha quedado perfecto, tanto el alineado como el centrado, y se ve correctamente en los dos navegadores.
