El cabezón del blog (Blog para torpes)
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"
5 Comentarios
1 Fernando 28/09/2007 10:10:17

No voy a entrar a rebatir tus amplios y siempre certeros conocimientos tecnicos, por lo que tendremos que dejarlo aparte e ir directamente a la parte menos técnica, donde evidentemente haces agua por todos los lados.

1.- Llenar una vitrina de copas, no es dificil, sobre todo si le decis a Ronaldinho, que se las traiga de recuerdo de los diferentes pubs o discotecas que frecuenta. Esas nos valen, las importantes son las altas y gordas, de las cuales creo que careceis salvo que os conformeis con dos como parece.

2.- Animaos con los resultados del principio, que luego cuando llegan los momentos importantes, ya sabies lo que os pasa. Hay que recordaros que el primer titulo perdido es la copa de Cataluña, titulo menor, salvo que lo ganeis vosotros.

3.- Parece que hay otros que no pierden el ritmo

4.- A los que me refiero, siguen de lideres ,asi que , ya sabeis aprovecharos del titulo de segundones, que es el que teneis asumido y evidentemente os ha correspondido durante largos años.

5.- HALA MADRID, por si las dudas.

2 Martin 28/09/2007 13:49:54

Hola Fernando, menos mal que te conozco y se que eres buen chaval, porque tu comentario es un poco borde, cuando te pones la camiseta de Raul te ciega la pasión.

En lo único que estoy de acuerdo es en las copas de Ronaldhino, que oportunidad perdimos el verano pasado de venderlo ¡¡¡, pero le daremos un boto de confianza, todavía nos tiene que dar muchas alegrías.

Y que no te se olvide, estas cosas son efímeras, vosotros seguir viviendo de recuerdos y del regalo que os hicimos la liga pasada.

Un abrazo y no trabajes mucho, yo acabo de llegar a casa, he mirado los comentarios del blog y ahora voy a comer.

3 Miguel Angel Calvo 18/02/2009 19:39:14

Nicolás,

me da la sensación que tu problema se solventaría con algo de este estilo

background-repeat: no-repeat

4 nicolas 18/02/2009 14:59:36

que tal buen dia, muy buena tu pag

te ecribo porque tengo la sigueinte duda: pongo una imagen de fondo y no entiend porque se me repite varias veces en la pantalla, y yo solo quiero que se vea en grande y una sola vez

desde ya muchas gracias

nicolas

5 Martín 20/02/2009 15:46:18

Hola a todos, no había visto esta consulta, pero ya veo que Miguel Angel la ha contestado.

De todas formas yo no pongo background-repeat: no-repeat, igual esto es lo correcto, pero el "no-repeat" seguido de la imagen es suficiente, por lo menos a mi me funciona con todos los navegadores.

Un saludo

Comentar
El comentario quedará pendiente de aprobación

SIDRA400
El cabezón del blog (Blog para torpes)
SIDRA400
Entrada