Como hacer un fondo de la cabecera transparente

Ahora que hemos empezado a ver como está estructurado el documento de una template de Blogger podemos aplicar algunos trucos para modificar el diseño de una parte de Blogger como la cabecera. Para ello es fundamental darse cuenta de que la apariencia del blog se crea a capas, que están unas delante de otras. Eso quiere decir que de normal sólo ves la capa que está arriba de todo y las demás quedan abajo ocultas, siendo la única excepción cuando una capa es transparente. La otra cosa que hay que tener en cuenta es que cada una de las plantillas básicas de Blogger en el editor muestra diferentes Variables, así que voy a modificar la plantilla Sencilla y usando la variante que tiene un fondo de color naranja.


Entra en el Editor de plantillas de Blogger para personalizarla, selecciona en el menú el apartado Avanzado y dentro de ellas ves al grupo "Fondos". Verás que puedes modificar tres fondos el de toda la página (body) el contenido (content) y el tercero de la cabecera donde puedes cambiar el color. Pero además de modificar el color usando la paleta, también tenemos la opción de añadir la opción "transparente" que se ve como un botón a cuadros blancos y grises. Si esto lo aplicas sobre el Header, el fondo de la cabecera se hará transparente y podrás ver el fondo del contenido que es blanco, ya que la cabecera en esta plantilla está dentro de Content. Así que a partir de aquí se abren varias posibilidades.

1. Sacar la cabecera del apartado de la caja "content".
2. Hacer que la caja "content" sea transparente y dar color sólo a los posts.
3. Hacer transparente a la caja "content" y crear otra caja blanca que incluya el resto del contenido.

Vamos a realizar la opción 2 que es en principio la más sencilla, así que ya puedes dar el paso de hacer que el contenido sea también transparente. A continuación guardamos la plantilla y tenemos que ir al Editor de HTML para añadir algunos códigos.

1. Buscamos dentro del código CSS Variables Definitions el grupo que determina los fondos de las páginas, que será algo así.

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
   </Group>

2. Pegamos una nueva variable con el fondo blanco de los posts.

<Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>

y quedará como

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
    <Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>
</Group>

3. Enlazamos la nueva variable con el código normal CSS, añadiendo allí ($post.background.color) y también le damos un poco de espacio interior (15 píxeles) para que cuando escribamos las entradas no queden las letras pegadas al margen.
Buscamos este código o similar...

.post {
  margin: 0 0 $(post.margin.bottom) 0;

 }

4. Y añadimos unas líneas para que quede así.

.post {
  background-color: $(post.background.color);
  margin: 0 0 $(post.margin.bottom) 0;

  padding: 15px;
 }

5. Guardamos la plantilla Sencilla y ya la tenemos con un fondo de la cabecera transparente y las entradas sobre un fondo blanco para que puedan ser leídas de forma sencilla.