.

15 de mayo de 2013

Como hacer un fondo de la cabecera transparente

Escrito por
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.

4 comentarios:

  1. Hola! Muy interesante. Aunque llevo días volviéndome loca para conseguir la opción 1 o la 3. La 2 no me convence su diseño. Yo quiero todo el blog blanquito, pero con la cabecera transparente, para poder hacer un efecto "flotante". ¿Son muy complicadas las otras dos opciones?

    ResponderEliminar
    Respuestas
    1. Hola Elena, gracias por tu comentario. En cuanto a las modificaciones de las plantillas, yo también soy autodidacta. En la práctica sólo he realizado lo que se explica aquí, la opción 1 no debería ser demasiado complicada de hacer. Hay que tener claro donde empieza y termina el código de la cabecera. Se corta, se pega un poco más arriba en el código, antes de que empiece content. El problema que puede haber es que se pierdan algunos valores del CSS y se tengan que volver a poner de nuevo. Pero no lo he echo nunca.

      Eliminar
  2. ¡Muchas gracias por tu consejo! Busqué en la plantilla el código de la cabecera, lo corté y lo pegué no sé muy bien dónde, jeje, pero fuera del content, eso lo tenía claro, y voilá, mi cabecera ya era transparente y el resto del blog mantenía su formato. Efectos colaterales: lo que habías pronosticado, que algún atributo de la cabecera se perdió. El único del que yo me percaté es que la cabecera se había descolocado totalmente, y no coincidía con el cuerpo del blog (debía estar unos 200 px alineada a la izquierda…). Después de varios intentos fallidos de recolocarla desde la plantilla, le di la orden de centrarla desde CSS y perfecto! Igual algún programador se tira de los pelos por chapucera, pero a efectos prácticos he conseguido el diseño que buscaba ;-)
    Ahora sólo me falta acabar de diseñar el blog, widgets, botones, firma, etc. (casi nada!) pero conseguí mi objetivo con la cabecera. ¡Muchas gracias!

    ResponderEliminar
  3. Muchas gracias! me sirvió :)

    ResponderEliminar

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.