Tratando de entender el Header (1)

La posibilidad de agregar elementos predefinidos en Blogger no es algo malo, aunque tampoco es algo bueno, simplemente, se trata de una herramienta más. Sin embargo, a la hora de personalizarlos, cuando ya le hemos perdido el miedo a la plantilla, algunos de esos elementos nos presentan dificultades que no son sencillas de superar.

Es el problema de lo automático, alguien cree conocer todas las respuestas y genera un código para que abarque todas las posibilidades ... todas, excepto esa que nosotros querríamos utilizar.

El Elemento Header, para mi gusto, es el peor de todos porque si alguna vez se les ocurrió mirarlo, verán más de cincuenta líneas de un código confuso y en donde se hace complicado encontrar la punta del ovillo así que, para empezar a jugar un poco con este elemento, por el momento, simplemente nos vamos a olvidar de su existencia y lo dejaremos tal como está. Sólo usaremos CSS.

Partimos de una Plantilla Mínima porque es la mejor forma de entender qué significa cada cosa (ver ejemplo online).

El header no es otra cosa que un rectángulo en la parte superior de nuestra página. Cuando Blogger procese los datos y muestre nuestro blog, se habrá creado un código HTML similar a este:

<div id="header-wrapper">
  <div id="header" class="header section">
    <div id="Header1" class="widget Header">
      <div id="header-inner">
        <div class="titlewrapper"> acá veremos el título del blog </div>
        <div class="descriptionwrapper"> acá veremos la descripción del blog </div>
      </div>
    </div>
  </div>
</div>

A ese rectángulo se lo identifica con un ID (un nombre único) y, por defecto, se denomina header-wrapper. Tiene un ancho igual al ancho total de nuestra página, sin importar cúal sea esta y además, en el caso de la Plantilla Mínima, tiene un borde y un margen inferior que lo separa de las columnas de entradas y la sidebar:

#header-wrapper
  border: 1px solid $bordercolor;
  margin: 0 auto 10px;
  width: 860px;
}

Dentro de ese rectángulo, hay otro cuyo ID es header y que también tiene un borde y como hay un margen alrededor, se ve como un doble recuadro:

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Erámos pocos y adentro de ese hay otro rectángulo más llamado header-inner con propiedades que por el momento, podemos ignorar.

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

Recién ahora, adentro de ese, se encuentran los textos. En titlewrapper el tíitulo de nuestro blog que se muestra con una etiqueta de encabezado H1 y un enlace en todas las páginas excepto en el home. Debajo, en descriptionwrapper esta la descripción (si hemos puesto una) y se muestra con una etiqueta P.

Las propiedades del título y la descripción las encontramos en cuatro definiciones y todas ellas, tienen ajustes de márgenes, establecen los colores y tipos de fuente de esos textos, etc.

#header h1 { ....... }
#header a { ....... }
#header a:hover { ....... }
#header .description { ....... }

Como en esta etapa no vamos a tocar el código HTML, nos concentramos en manipular un poco esas propiedades CSS.

Primero, vamos a ponerle una imagen de fondo, un pattern que se repita y eventualmente cambiamos el tamaño de las fuentes:

#header-wrapper {
  background: transparent url(URL_imagen) repeat left top; /* la imagen de fondo */
  border: none;  /* le quito el borde */
  height: 100px;  /* le doy una altura igual a la imagen */
  margin: 0;   /* le quito el margen */
  width: 860px;  /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: center; /* centro el título */
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: #000;
  font-size: 80px
  letter-spacing: 0;
  line-height: 100px /* le pongo el mismo valor de la altura de la imagen para centrarlo verticalmente */
  padding: 0;
  margin: 0;
  text-transform: none;
}
#header a { /* defino el color del título cuando es un enlace */
  color: #000;
  text-decoration:none;
}
#header .description { /* no quiero ver la descripción así que la oculto */
  display:none;
}

El resultado sería algo como este ejemplo. Nada del otro mundo.

Ahora, busquemos otra alternativa, en lugar de colocar una imagen tipo pattern, colocaremos una imagen que ocupe todo el ancho. Tendrá que tener como mínimo 860 pixeles que es el ancho del blog del demo pero, podría ser mayor, no pasará nada. Los códigos no varian mucho del ejemplo anterior:

#header-wrapper {
  background: transparent url(URL_imagen) no-repeat left top; /* la imagen de fondo NO SE REPITE */
  border: none;  /* le quito el borde */
  height: 100px;  /* le doy una altura igual a esta imagen */
  margin: 0;   /* le quito el margen */
  width: 860px;  /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: left; /* coloco el título a la izquierda */
  margin: 0;
  padding: 15px 0 0 60px; /* y desplazo el título hacia abajo y hacia la derecha */
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: #000;
  font-size: 80px
  letter-spacing: 0;
  line-height: 120px /* le pongo el mismo valor de la altura de la imagen para centrarlo verticalmente */
  padding: 0;
  margin: 0;
  text-transform: none;
}
#header a {color: #000; text-decoration:none;}
#header .description {display:none;}

El resultado es el que se ve en este otro ejemplo.

No es necesario usar una imagen que se repita o que ocupe todo el rectángulo, podemos usar imágenes más pequeñas y ubicarlas en cualquier posición. Lo mismo podemos hacer con los textos; no es necesario que siempre se muestren de la misma manera, para esto nos valemos de la propiedad position que nos permite ubicar algo en cualquier parte con absoluta precisión:

#header-wrapper {
  background: transparent url(URL_imagenPequeña) no-repeat left top; /* la imagen de fondo NO SE REPITE */
  border: none; /* le quito el borde */
  height: 159px; /* le doy una altura igual a esta imagen */
  margin:0 0 50px 0; /* le voy a poner un margen inferior para tener más espacio */
  position: relative; /* establezco esta propiedad para poder posicionar de manera absoluta el contenido */
  width: 860px; /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: left;
  margin: 0;
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: DarkTurquoise;
  font-size: 80px
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  text-transform: none;
  position: absolute; /* digo que voy a ubicarlo de de manera absoluta */
  bottom:-30px; /* y lo coloco bien abajo (se sale del rectángulo) */
  left:110px; /* y a la derecha */
}
#header a { /* defino el color del título cuando es un enlace */
  color: DarkTurquoise;
  text-decoration:none;
}
#header .description { /* esta vez quiero ver la descripción */
  color: SlateGray;
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
  position: absolute; /* también la voy a ubicar de de manera absoluta */
  top: 100px; /* y lo coloco más arriba (la superpongo con el título) */
  right: 120px; /* y la muevo mucho más hacia la derecha */
}

El resultado sería este.

Tampoco estoy limitado a usar una sola imagen, puedo usar varias si las coloco en los distintos rectángulos interiores (ya que hay varios, los usamos. Probamos con dos imágenes, una a cada lado:

#header-wrapper {
  background: transparent url(URL_imagenPequeñaDerecha) no-repeat 80% 50%; /* la imagen de fondo la ubico a la derecha */
  border: none; /* le quito el borde */
  height: 159px; /* le doy una altura igual a esta imagen */
  margin: 0;
  position: relative; /* vuelvo a establecer esta propiedad */
  width: 860px; /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: left;
}
#header-inner { /* la segunda imagen la pongo en este rectángulo */
  background: transparent url(URL_imagenPequeñaIaquierda) no-repeat left 50%; /* la imagen de fondo la ubico a la izquierda */
  height: 159px; /* debo darle dimensión para que se vea la imagen */
  width: 100%;
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: #FD7E00;
  font-family: Garamond; 
  font-size: 100px
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  text-transform: none;
  position: absolute; /* digo que voy a ubicarlo de de manera absoluta */
  top:20px; /* y lo ubico donde quiera */
  left:125px;
}
#header a { /* defino el color del título cuando es un enlace */
  color: #FD7E00;
  text-decoration:none;
}
#header .description { /* esta vez quiero ver la descripción */
  color: SkyBlue;
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
  position: absolute; /* también la voy a ubicar de de manera absoluta */
  top: 120px;
  right: 145px;
}

Y aquí lo tenemos en un demo.