Las distintas zonas de un blog

Aquí puedes ver en directo lo que explico en las entradas de Tuneando el blog.

En cada zona verás el nombre, tal como aparece en el código, en rojo entre paréntesis.

.
Para el fondo de todo, (body), he usado este azul oscuro.

---------
Para el fondo de la zona útil, (outer-wrapper), estas mariposas en rosa claro.

---------
Para el fondo de la cabecera, (header), el cielo azul.

---------
Para el fondo de la zona de las entradas, (main-wrapper), seda azul.

---------
Para el fondo de la sidebar original, (sidebar-wrapper), la de la izquierda, esta seda roja.

---------
Para la sidebar añadida, (newsidebar-wrapper), la de la derecha, seda fucsia.

---------
Para el fondo del pie de página, (footer), seda verde.

------

Como puedes comprobar el fondo de las entradas, (.main .widget), es también distinto al de los elementos de las columnas laterales, (.sidebar .widget).

.

No he podido hacer que el fondo de los elementos de la columnas fuera diferente entre si. Quizás no he sabido añadir lo correcto al código, quizás no lo permita, ya sabeis que detrás de todo esto hay personas que de alguna manera deciden lo que vamos a poder hacer.

Pero espero que esta demostración os sirva para entender un poco mejor la plantilla.

Editado: 10 de mayo de 2008

A poco de abrir este blog, Marian me sugirió que hiciera lo mismo con los bordes, (podeis ver el comentario en esta entrada).

Anoche recogí el guante de su reto.

Aquí podeis ver todos los bordes aplicables a esta plantilla, (scribe), los cuales son aplicables a la mayoría de plantillas blogger.

Los bordes o marcos de las zonas.

Me dice Marian que porqué no he hecho lo mismo con los marcos o bordes que se ven el blog.
Se puede hacer que cada zona tenga un marco de un color específico creándole variables.
En Tuneando el blog he hecho varias entradas explicando cómo hacerlo, incluso allí he enmarcado los elementos de las columnas laterales con un color distinto al de las entradas.
De todas formas si quisierais hacer algo parecido a lo que veis aquí y no teneis claro donde ponerle el código para que enmarque, es muy fácil. Donde haya un background, debajo poneis un border.

La línea de código a incluir, para enmarcar toda la zona, es ésta:

border: 2px dashed $bordercolor;

(Descripción del código)
border: (le estás diciendo que ahí quieres un marco o borde).
2px (el grosor de la línea, en este caso 2 píxels, a más píxels, más gruesa).
dashed (por poner un ejemplo. Hay 8 estilos distintos de líneas. Al final de la entrada dejo una imagen de todos con sus nombres).
$bordercolor (la variable del color del borde, que luego podrás modificar en Fuentes y colores)
No olvides el punto y coma final o no te hará caso.

Si quieres crear una variable para el borde de una zona específica, por ejemplo la cabecera, en name debes llamarla headerbordercolor o headerBorderColor (depende de la plantilla) y en description Header Border Color.

Copia cualquiera de las existentes y pégala debajo de si misma. Cámbiale el nombre en los dos sitios respetando la forma en que están escritas en el código, (mayúsculas, minúsculas) y ya puedes aplicarla donde quieras. Por seguir con el ejemplo de la cabecera esta línea terminaría así: $headerbordercolor; o $headerBorderColor; (depende de la plantilla).
Si fuera para la sidebar la llamaríamos sidebarbordercolor / Sidebar Border Color y si quieres una que enmarque la sidebar y otra que enmarque el widget, o elemento, puedes llamarla widgetsidebarbordercolor /Widget Sidebar Border Color.
Si el sistema la reconoce hasta te saldrá el nombre en castellano en el listado de fuentes, si no lo hace te saldrá tal cual la hayas llamado.
Creé dos variables para la menubar en varias plantillas. A una la llamé menubarcolor y a la otra menubarbgcolor y las aceptó las dos y salen en fuentes y colores, así que mientras pongas el código correctamente no habrá problema.

Aquí tienes los estilos de bordes que hay.