El cabezón del blog (Blog para torpes)
Martin   27 Setiembre 2007
No soy yo, me estoy refiriendo al Header.
Ayer por la noche termine el documento de "Eres de izquierdas ???", mientras veía como ganaba el Barça 4-1 al Zaragoza, yo no se como seguimos jugando la Liga y la Champions, vaya forma de perder el tiempo ¡¡¡, que nos las adjudiquen directamente ¡¡¡, si ya sabemos quien las va a ganar, pero en fin, si les hace ilusión y no queda mas remedio seguiremos jugando mientras hacemos sitio en las vitrinas para poner las copas.
El Header, como su nombre indica es la parte de arriba del blog, consiste en un template HTML donde definimos las clases y donde metemos los campos de título y descripción, bueno en el mío si esta la descripción, en el ejemplo no, si alguien se ha bajado el ejemplo pongo el código, se trata de añadir la línea de la descripción al template Header, ya sabéis, abrimos la base de datos desde el cliente Notes, HTML templates, Blog templates, editar el Header.
Image:El cabezón del blog (Blog para torpes)
Ahora vamos a ver donde definimos el tamaño,el fondo, tipo de letra, etc,etc, para eso abrimos blix.css, la editamos, botón derecho, buscar "header", podemos ver todo el código relacionado con la cabecera del blog.
Bueno, este es facilito, pero me explicare un poco con lo básico y después pondré un ejemplo en el blog que tenemos un poco enmerdado para que podías ver como cambiar el fondo del header en función de la página que seleccionemos, recordar que hemos movido el Sidebar para la izquierda y el Content a la derecha pero el fondo del Container lo hemos dejado como está, o sea mal, en la entrada anterior he explicado como arreglarlo.
Lo mas importante el tamaño, y el fondo se lo decimos aquí:
Image:El cabezón del blog (Blog para torpes)
He copiado dos partes de la hoja de estilos y las he juntado en la imagen superior, podéis ver que el tamaño es 100px, jugar con los padding para ver el efecto.
Importante, podéis ver que la clase h1, tiene un padding-top de 50px, esto lo que hace es dejar el Título en el centro de la cabecera, si queréis moverlo, por ejemplo, a la derecha, deberéis añadir una línea que ponga padding-left xxpx, terminar la línea con ";".
Otra cosa, al añadir el campo "Descripción", debéis también crear la clase, pongo una imagen para que no os liéis, y para que no se junte con el "Título", debéis añadir padding-bottom en la clase h1 que veis en la imagen.
El background, #F0F9F9 es el color del fondo, tiene su importancia, aunque en teoría no se ve porque la imagen lo tapa, si tarda en enseñar la imagen, mientras se esta viendo el fondo, imaginaros que decido que el texto sea blanco y el fondo también, con la imagen igual queda elegante pero hay unos segundos donde nos se ve nada, hasta que cargue la imagen, son pijadas pero ya que nos ponemos vamos a tratar de hacerlo bien.
Fondob.jpg es un recurso de imagen, te crear tu fondo, vas a la hoja de estilos y le pones el nombre del archivo. Este fondo yo siempre lo hago de 1000px, la altura tiene menos importancia, bueno relativamente, lo importante es que no la repita por la derecha y que no quede en blanco por debajo, no se si me explico bien. Lo de 1000px, es por si me da por cambiarle el tamaño al "Container", imaginaros que tengo un blog para una resolución de 800X600 y decido cambiarle el tamaño, la jodimos si la imagen es de 800, me la tengo que volver a currar.
Bueno esto no tiene mucho mas, ahora voy a contar que hay que hacer para mostrar una imagen diferente en función de la página que mostremos, en mi caso yo le quito el header a todo las páginas menos a la principal, pero como suelo enredar bastante igual mañana ya no está así.
Voy ha hacer que cuando seleccionemos "Archivo", cambie el fondo del Header, lo hago en "torpes2" y pongo una pequeña explicación.
Si picáis en "Archivo", sale un pisano sobando, además cambia el tamaño del header, no queda muy fino, el tamaño no debería cambiar, lo he hecho así para que cante y se vea claro.
Que fue lo primero que hice, copy/paste en hoja de estilos de los códigos que se ven en la imagen superior, donde pone header le puse header1, después le cambie la imagen de fondo.
Lo siguiente, cree un nuevo "blog template", es recomiendo que sea nuevo, aquí el copy/paste me ha dado algún problema, nombre del nuevo "Header1", que le mete dentro ??? lo mismo que tiene el "Header", pero claro tengo que cambiarle el "id", ahora será, "header1", lo salvo y me voy al siguiente paso, cual sera ???, pues cambiarle en la página del archivo "Blix document for archive", (cuidado, ahora no es un blog template, es una page template" que use el nuevo blog template que hemos creado, o sea, el "Header1".
Los resultados los podéis ver en este enlace, con esto acabo con la sección de "El cabezón del blog"
SIDRA400
Entrada