El header de Blogger (jugando un poco)

Continuando con la idea de ver si es posible flexibilizar la rigidez aparente del header de Blogger tratando de utilizar nada más que las propiedades CSS. Sólo se trata de jugar un poco.

Subo una imagen (robada inescrupulosamente), un gif animado de 70x60 que milagrosamente funciona. Dejo marcada la opción de ver los textos y la imagen. Además, cambio el título por esto:

<b>Blogger</b> se despertó

Y la descripción por esto:

Pero sólo por un <i>ratito</i><br/>
<a href="http://vagabundia.blogspot.com/">Volver al blog</a>

Guardo y el resultado no es muy agradable:

El CSS por defecto de una plantilla mínima nos muestra algunas propiedades así que es hora de ver de que de tratan y así intentar modificarlas aunque este nuevo código de Blogger no nos lo hará fácil.

El código original

#header-wrapper { /* es el bloque contenedor de todo el encabezado */
border: 1px solid $bordercolor; /* tiene un borde */
margin: 0 auto 10px; /* está centrado (auto) */
width: 660px; /* normalmente, el ancho es igual que el de #outer-wrapper */
}

#header { /* es el bloque interior */
border: 1px solid $bordercolor; /* también tiene borde */
color: $pagetitlecolor; /* el color de los textos */
margin: 5px; /* es más chico que el anterior por eso vemos dos bordes */
text-align: center; /* todo el contenido estará centrado */
}

#header-inner { /* es el bloque con la imagen */
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header h1 { /* es el texto del título del blog */
font: $pagetitlefont; /* la mayoría de las propeidades definen el tipo de fuente */
margin: 5px 5px 0;
letter-spacing: .2em;
line-height: 1.2em;
padding: 15px 20px .25em;
text-transform: uppercase;
}

#header a { /* el texto del título del blog es un enlace */
color: $pagetitlecolor;
text-decoration: none;
}
#header a:hover {color:$pagetitlecolor;}

#header .description { /* es el texto de la descripción */
color: $descriptioncolor;
font: $descriptionfont;
letter-spacing: .2em;
line-height: 1.4em;
margin: 0 5px 5px;
padding: 0 20px 15px;
max-width: 700px;
text-transform: uppercase;
}

#header img { /* es ... vaya uno a saber qué es */
margin-$startSide: auto;
margin-$endSide: auto;
}

Una propiedad que podriamos agregar a header-wrapper es background es decir, como la imagen que coloco en el header no es un banner sino que es pequeña, puedo poner otra; en este caso, quiero que se vea a la derecha así que le agrego esto:

background: transparent url(URL_imagen) no-repeat right 50%;

¿Cómo subo la imagen a Blogger? La agrego en un post cualquiera, tomo nota de la dirección y luego elimino el código generado.

Ya que voy a manipular el código, para evitar problemas es buena práctica agregarle una propiedad que defina la altura de todo el header; para eso, usamos height.

#header-wrapper {
background: transparent url(URL_imagen) no-repeat scroll right 50%;
border: 1px solid #CCCCCC;
height: 216px;
margin: 0 auto 10px auto;
width: 660px;
}

El bloque header es el rectángulo que está dentro del anterior. Elimino el borde y, como en el caso anterior, podríamos colocar otra imagen como fondo pero, esta vez a la izquierda:

background; transparent url(URL_imagen) no-repeat left 50%;

#header {
color: #666666;
height: 216px;
margin: 5px;
}

header-inner es clave; es el rectángulo que nos muestra la imagen que hemos subido y aparecerá centrada porque tiene margin-left y margin-right establecidos como auto. Como quiero que se vea más a la derecha, se los voy a quitar. Es poco lo que podemos hacer ahí ya que lo que hace Blogger es colocar los datos directamente en la plantilla con un código que a primera vista asusta:

<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl 
+ &quot;\&quot;); &quot;
+ &quot;background-position: &quot; + data:backgroundPositionStyleStr
+ &quot;; &quot; + data:widthStyleStr
+ &quot;min-height: &quot; + data:height + &quot;px;&quot;
+ &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;'
id='header-inner'>

En fin eso, sólo coloca la imagen que subimos y cuyos datos guarda Blogger para luego generar esto:

<div style="background-image: url(URLimagen);
background-position: left center; width: XXpx; min-height: XXpx;
background-repeat: no-repeat;"
id="header-inner">

En caso de emergencia, es allí donde debemos modificar las cosas pero, vamos a tratar de obviarlo así que sólo eliminaremos el centrado:

#header-inner {
background-position: center;
}

En el título, los cambios afectan a la fuente de texto salvo margin que sólo lo mueve a la izquierda 60 pixeles. También se agrega una propiedad width; eso es algo que siempre debemos hacer cuando se trata de ubicar bloques:

#header h1 {
color: #000000;
font-family: Arial;
font-size: 24px;
letter-spacing: -1px;
margin: 0 0 0 60px;
padding: 0;
width: 400px;
}

Lo mismo ocurre con el texto de la descripción:

#header .description {
color: #999999;
font-family: 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size: 13px;
letter-spacing: 1px;
margin: 0 0 0 65px;
max-width: 700px;
padding: 0;
text-transform: uppercase;
width: 400px;
}

Para poder ubicar los textos, le agrego una definición, usando la clase header. Con margin, bajo los textos:

.Header {
margin-top: 110px;
}

Y lo que falta es establecer las propiedades de los formatos extras de esos textos:

#header h1.title b { /* la negrita el título */
color: #2788CF;
font-family: Georgia;
font-size: 40px;
}

p.description i { /* la itálica de la descripción (no la uso) */ }

p.description a {  /* el enlace agregado a la descripción */
color: #2788CF !important;
font-family: Tahoma;
font-weight: bold;
}
p.description a:hover {color: #CC6600 !important;}