Diseño de la cabecera del blog

Para describir el proceso de modificación de la cabecera de mi blog comenzaré por comentar como he creado la imagen de El Vuelo del Cóndor. Después de dar unas cuantas vueltas por internet, buscando una imagen apropiada, descargué esta foto de un cóndor de Andes.org.

Esta foto tiene una gran ventaja: el fondo es de un azul bastante uniforme. Sin embargo, intentar recortar el cóndor de la foto usando el Paint hubiera sido muy laborioso, así que recurrí al Photoshop 8 (poco a poco me voy modernizando). En primer lugar volteé horizontalmente la imagen porque resultaba más conveniente para el diseño que tenía en mente.

Tras esto acudí al menú Selección y, en él, a la opción Gama de Colores. Al hacerlo aparece una pequeña ventana y el cursor toma la forma de la herramienta de seleccionar color. Usando el cursor, seleccioné uno de los píxeles cercanos a la esquina superior izquierda y establecí el valor de tolerancia al máximo posible. Con esto, el Photoshop selecciona los píxeles de ese color y todos los que se le parezcan, en este caso todos los del cielo. Hecho esto, marqué la casilla Invertir para que en lugar de seleccionar el cielo seleccionara el cóndor, lo que me permitió cortar exactamente la figura del cóndor de la foto. Ni que decir tiene que todo esto no hubiera sido posible si el fondo hubiera sido de un color menos uniforme o si el cóndor hubiera sido parcialmente azul, pero afortunadamente no era el caso. Otro día comentaré como recortar una imagen menos propicia.

Como fondo elegí una de las magníficas panorámicas obtenidas por mi amigo Pablo en las cumbres de Gran Canaria. Ya sólo tenía que pegar el cóndor encima de la foto para obtener la imagen de la cabecera. A la izquierda del cóndor puedes ver el Roque Nublo, muy pequeñito, mientras que a la derecha se encuentra el Roque Bentayga. Sólo para evitar confusiones, una aclaración: no hay cóndores en Gran Canaria. A parte de mí, quiero decir.

Una vez descrita la forma en que generé la foto de la cabecera voy a comentar cómo modifiqué la hoja de estilo de La Coctelera para incorporarla a la cabecera del blog.
En primer lugar hay que incluir la foto en la cabecera utilizando el siguiente trozo de código:

 #cabecera {
   background: 
      url('http://www.lacoctelera.com/myfiles/condor/cabecera.jpg')
      repeat-x #F1C600 top right;
   height: 280px;
   text-align: right;
 }
 

La primera línea de este código (debido a lo larga que es está dividida en tres partes para que quepa en el cuadro) indica que la cabecera debe utilizar como fondo el fichero indicado, que he subido a la web utilizando las utilidades que La Coctelera proporciona a tal efecto. Además indica que la foto debe colocarse en la esquina de arriba y a la derecha y, si fuera necesario para completar la página, debería repetirse sólo en el eje horizontal. El valor hexadecimal indica el color que debe rellenar el espacio de la cabecera si la foto, por algún motivo, no puede cargarse.

La segunda línea de código indica la altura de la imagen, 280 píxels, mientras que la tercera indica que el texto que se situará en la cabecera será alineado con el márgen derecho. Esto será suficiente para que aparezca la foto en la cabecera, aunque no hay que olvidar que previamente eliminé las pestañas Blog y Amigos que hubieran aparecido justo encima de la foto.

A continuación debemos indicar el formato en el que se mostrará el título del blog. Para esto utilizo el siguiente trozo de código:

 #cabecera h1 {
 	font-family: "Arial Black", "Arial", sans-serif;
 	font-size: 3em;
 	float: none;
 	padding-top: 230px;
 	padding-right: 25px;
 }
 

La primera línea indica el tipo de fuente en el que se mostrará el código y la segunda que esta fuente debe aparecer al triple de su tamaño original. Las dos últimas líneas indican que el texto aparecerá a 230 píxeles del margen superior y a 25 del margen derecho. Es importante tener en cuenta que esta última línea no hubiera surtido efecto si no hubiera indicado previamente que el texto iba a ser alineado a la derecha.

La línea de en medio está con el propósito de cancelar cualquier posible elemento flotante, debido a que el título se veía en algunos navegadores como si las líneas se hubieran montado una encima de otra. Un elemento flotante es, por ejemplo, la típica figura alrededor de la que se organiza un texto dentro de un artículo. No domino mucho este tema y tampoco tengo claro cual era la causa real del problema, pero el caso es que añadiendo esta línea se soluciona.

El color del título no puede ser determinado dentro del trozo de código anterior porque no sólo es un texto sino que además es un enlace al propio blog. Por este motivo, para cambiar el color del título hay que añadir lo siguiente:

 #cabecera h1 a {
 	color: #F1C600;
 }
 #cabecera h1 a:hover {
 	text-decoration: none;
 }
 

La primera parte del código indica el color del título. El valor hexadecimal corresponde al mismo tono de amarillo que hay en la barra bajo la foto. Para determinarlo tuve que hacer la chapuza de copiar la pantalla y pegarla en el Photoshop para, seleccionando un cualquier punto interior de la imagen de la barra, ver los valores de los componentes RGB. La segunda parte del código indica que cuando el ratón pase por encima del título (la palabra clave hover se usa para indicar esta acción) el texto no se subraye como es habitual, ya que quedaría un tanto feo en el nuevo formato.

Una vez configurado el título hay que adaptar apropiadamente el formato del lema del blog que aparece debajo. Para ello he introducido esta última modificación de la hoja de estilo:

 #cabecera p.desc {
 	font-family: "Arial", sans-serif;
 	font-size: 1.5em;
 	float: none;
 	width: auto;
 	padding-right: 31px;
 	color: #FFF;
 }
 

Este código sobrescribe la clase desc dentro de la cabecera. Primero se indica el tipo de fuente y luego que ésta debe aparecer un 50% más grandes que la original. Luego se desactivan los elementos flotantes. La cuarta línea establece los márgenes al modo automático; sin esta línea no sería posible alinear el lema a la derecha de la misma forma que el título, aunque desconozco el motivo exacto por el que pasa esto. Finalmente se indica la distancia respecto al margen derecho y el color del texto.

Y esto es todo. El principal problema para realizar estas modificaciones es la falta de acceso a la hoja de estilo original de La Coctelera. Sin ver la hoja no podemos saber que la cabecera se corresponde con el identificador cabecera, que el título se corresponde internamente con el nivel de títulos h1 o que existe la clase desc dentro de la cabecera. Un ejemplo claro es que, al ser desc una clase y no un identificador, para referirse a ella hay que usar un punto y no una almohadilla. Pero si no sabes que desc es una clase y que, además, está anidada dentro de la cabecera, puedes escribir un código erróneo y estar dando palos de ciego toda la vida sin atinar con el problema.

Afortunadamente disponemos de una pequeña ampliación del navegador Firefox, llamada Web Developer, que permite ver la hoja de estilo o incluso comprobar dinámicamente como quedaría cualquier cambio en ella.

Para concluir, quiero dar las gracias una vez más a mi amigo Pablo, gran experto donde los haya en diseño HTML y CSS, por compartir conmigo sus conocimientos. Si no fuera por su inestimable ayuda, ninguna de estas modificaciones hubiera sido posible.

servido por condor 4 comentarios compártelo