El header de Blogger (jugando un poco) : Vagabundia

Continuando con la idea de ver si es posible flexibilizar la rigidez aparente del header de Blogger, vamos a un ejemplo que he puesto en un blog de pruebas 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;}

Y con esto, termina el juego

10 comentarios:

Fernandooo1: ¿Y yo? ¿También la habré robado inescrupulosamente? xD!

Ese .gif me inspira confianza.

El header terminó muy, muy bien al final.

Sin mucha imagen... jugando con el CSS.; 12:29 AM
Poca Tinta: Que bien esta de Lujo!!!, como lo hiciste hace un tiempo estuve intentando subir un gif animado y no me dejaba. Pero el que sabe es el master.

Saludos maestro, deja un sin numero de opciones para jugar, espero los chicos anormales de blogger no lo cambien.; 2:24 AM
JMiur: ¿Alguien dijo robar? ... digamos ... tomar prestado ;)

Si, da para jugar y en realidad, todo es CSS y no toqué el código de Blogger, esa era la idea.

Lo del gif es pura casualidad. Algunos, los subes y funcionan, otros, no y en ese caso los subes a otro sitio y listo.; 2:35 AM
Gem@: Genial, me diste una idea voy a ver si furula ;); 10:56 AM
JMiur: Jajajaja Suerte, Gem@, ya despertaste mi curiosidad :); 1:56 PM
Anahí: Muy buen blog, che, te felicito, hacés perder el miedo hasta a las fórmulas químicas, ja,ja .
Salú2.; 8:06 PM
JMiur: Saludos Anahí, por ciero, odio las fórmulas químicas :D; 9:23 PM
HaCk CrAcK: Esto seria una imagen y la estubiste modificando con CSS?, para agregar los textos y todo eso?; 1:16 PM
JMiur: No es una imagen sino el header de un blog real que utilizo para hacer pruebas: ACÁ; 4:25 PM
HaCk CrAcK: Ahh un header, ahora entiendo, gracias!!; 6:26 PM