AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Como poner una imagen a cada lado del titulo del blog

viernes, 21 de agosto de 2009

Cero cool me planteó este reto en una consulta en el cbox.
Quiere poner un gift en uno de los lados y una imagen jpg en el otro.
En principio le dije que tendría que partir la cabecera en 2 partes, pensando en poner una imagen en una de ellas, el gift, como background y la otra a través de Editar del elemento de la cabecera. (Ya sabeis que poner un gift en la cabecera mediante el sistema de editar, suele dar muchos problemas a la hora de eliminarlo).

Pero cuando empecé a hacer pruebas en un blog, en el que había cargado una de mis plantillas que ya tenía una imagen a la derecha, colocada en el background, me encontré con muchas dificultades para alinear la segunda imagen, ya que a través de editar la imagen se coloca detrás del título y no era eso lo que Cero cool me pedía.

Intenté ponerla como background de la partición, pero no acababa de quedarme bien, así que se me ocurrió partir la cabecera en 3 partes, dejando el elemento del título en la parte central.

Hice las modificaciones al código y, como pudisteis ver ayer, los que pinchasteis en el enlace que dejé en la otra entrada, el sistema funcionó.

Lo primero que deberías hacer es entender un poco como es el código de la cabecera, de esta forma tendrás más claro el porqué de los cambios que voy a explicar, y te ayudará a aplicar tus propias variantes a esos cambios.
En esta entrada del manual, he hecho un repaso a estos códigos. Échale un vistazo.

En cuanto a las modificaciones que vas a ver a continuación, recuerda que están hechas en una plantilla minima, con lo que es posible que algunas cosas, sobre todo del CSS, sean distintas en tu plantilla. Pero si te fijas en el significado de lo que voy a explicar, no creo que te resulte difícil aplicarlos en cualquier otra plantilla que tenga una cabecera normal, del estilo de la mínima.

En plantillas como la dots, que no dispone de cabecera, propiamente dicho, o en plantillas que ya tienen dibujos en la cabecera, primero hay que modificarla, creando la cabecera, en la dots, o eliminando todas las imágenes que contenga, en otros modelos, para que quede un espacio limpio de polvo y paja, antes de empezar a aplicar lo que voy a contar a continuación.


El primer paso que di fue crear los dos espacios exteriores en el contenedor de la cabecera (header-wrapper).

Así que bajé al HTML y dejé el código original que es éste:


así


Con esto habia creado los dos espacios.

Ahora voy a explicarte el porqué de estos códigos.

El código original dice que hay un contenedor, (header-wrapper), que contiene una sección, (header), que a su vez contiene un widget, Header1.

Con la modificación le digo: que el contenedor general, header-wrapper, contiene 3 zonas, cada una especificada con un div para poder modificarla a gusto.
Cada una de estas zonas pertenecerá a la misma sección, header, pero cada una de ellas tendrá una id propia.
Así, a la zona de la izquierda la he llamado header-left, he dejado la original, header, en el centro y he llamado header-right a la de la derecha.

Como a las secciones laterales les iba a poner la imagen como background, no contienen ningún widget, ni hay posibilidad de añadirlos, aunque esto podría modificarlo y poner las imágenes desde un gadget imagen o desde un gadget HTML/Javascript, pero no lo recomiendo.
Básicamente porqué en el CSS vamos a darle unas medidas fijas a estas 3 zonas, a fin de que tengan la misma altura y la cabecera se vea proporcionada y si pones en alguno de los dos una imagen mayor es posible que no se vea entera.

NOTA: Si vas a hacer algo así, procura que las dos imágenes tengan unas medidas parecidas.

Sigamos.
Hecha esta modificación en el HTML, subí a la zona del CSS para darle a las dos zonas nuevas sus propiedades.
Así que añadí los códigos para que se vieran, y se vieran bien.

Déjame hacer un inciso: Si tu blog tiene las medidas originales, coincidirán con el código original, si lo has ensanchado has de aplicar tus cálculos para que funcione bien y los 3 espacios salgan alineados dentro del contenedor. En el blog en el que hice la prueba, estas medidas son superiores a las originales, ya que lo ensanché para poner la segunda sidebar, pero en las explicaciones me basaré en las medidas y códigos originales.
Vamos a ver el código original cachito a cachito y te iré explicando qué le he modificado y te iré diciendo qué cahitos le he añadido, tal como se ven en mi blog.

El CSS del header empieza con esto:

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


Este borde, junto a otro que hay en header, forma el doble borde de una minima original.
Si quieres que siga teniendo ese doble borde, has de poner double en lugar de solid y al menos 5px en lugar de 1px, ya que vamos a eliminar el borde de header, de lo contrario se descontrola todo.
A esta zona le añadiremos la línea de la altura, antes del signo } de cierre.
height:XXXpx; siendo XXX la altura que tenga tu imagen. Puedes añadirle algunos píxels para que no quede pegada al borde, eso queda a tu elección.

Lo siguiente que encontramos es header-inner

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

Este trocito lo eliminamos y lo sustituimos por éste:

#header-left {
background: url("
aqui la dirección de la imagen de la izquierda") no-repeat;
background-position: $startSide;
float:left;
width: XXXpx;
(la medida de ancho de tu imagen)
height: XXXpx;
(el mismo alto que en header-wrapper)
margin:0 auto 10px;
}

¡Cuidado! Si tu cabecera tiene las medidas originales, tiene solo 660 píxels de ancha, así que, teniendo en cuenta que has de repartirlos en 3 partes, ya que la suma del ancho de las 3 zonas no puede sobrepasar la del ancho de header-wrapper, la imagen no debería ser más ancha que un tercio de esos 660 píxels, pero has de tener en cuenta el título de tu blog. Si es muy largo, al dejarle un espacio de la medida de la sidebar, se verá en varias líneas. Si vas a dejar las medidas originales, te recomendaría que abusaras de la vista previa, y fueses modificando los anchos basándote en tu título. Enseguidas verás como.

Los siguientes cachitos corresponden a la zona del título. En header tenemos ésto:

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


Aquí añadiremos estas 3 líneas, antes del signo } de cierre:
float:left; (para que se alinee)
width: XXXpx; (el ancho que necesites para el título)
height: XXXpx; (la altura de header-wrapper)

y eliminaremos la linea del borde.

#header h1, #header a, #header a:hover y #header description, en principio lo dejaremos igual ya que son los códigos que indican como se van a ver las letras del título.
Podemos quitar las líneas de text-transform para que las letras no salgan todas en mayúscula, o modificar los paddings para separar el título de la parte de arriba del elemento y/o la descripción del título. En ambos casos se modifica la primera cifra que hay en la línea del padding, que es la que corresponde a la separación superior.

Y a continuación añadimos el trocito de código que controlará la zona de la derecha:

#header-right {
background: url("aquí la dirección de la imagen de la derecha") no-repeat;
background-position: $endSide;
float:right;
width:XXXpx; (el ancho de la imagen)
height: XXXpx; (la altura de header-wrapper)
}

Una vez hecho esto, habiendo colocado las medidas, pero antes de poner las direcciones de las imágenes, te recomendaría que hicieses vista previa.

Si todo ha ido bien, verás el título en el centro, (ya lo estaba seguramente), pero te darás cuenta de como se ve ahora.
Si ya se viera bien, ya podrias añadir las direcciones entre los paréntesis, entre las comillas.

Si vieras que necesitas más espacio para el título, pero al quitárselo a las zonas exteriores las imágenes no cabrán, aumenta el width de header wrapper, pero también deberás ensanchar el blog, ya que esta medida, 660px es la que tiene la zona útil del blog y no quedaría muy bien que la cabecera fuese más ancha.

Además has de tener en cuenta el modelo de plantilla, ya que en algunas la cabecera está integrada en el ancho general del blog, y no se puede ensanchar solo la cabecera.
Ya sabeis que he ensanchado varias plantillas. En el directorio podeis ver los enlaces a los blogs donde lo explico, cada uno con su propia plantilla, en una lista de la columna central.

Con este sistema de cabecera partida, también puedes añadir a la zona del título, #header { un fondo distinto al resto de la cabecera, simplemente añadiendo la línea background: seguida de un color, ya sea en variable o en código hexagesimal, y/o una imagen.

Todo es cuestión de imaginación.

Como la muestra está en un blog de pruebas y es muy posible que algún dia cambie la plantilla, haré capturas de pantalla para que veais como ha quedado. De paso probaré algunas variantes a este código y también lo capturaré y lo explicaré en otras entradas.

Imprime esta entrada

10 comentarios. ¿Quieres añadir el tuyo?

  1. Marian ha dicho
  2. Bueno, pues pa ya que me he ido, a la cabecera a enredar con ella.Lo he puesto en el blog de una amiga que tiene una imagen grande puesta por ella.Queria darle una sorpresa.

    Me ha costado un pelin por esas cosas de blogger que de vez en cuando pasan pero lo he conseguido aunque he tenido que quitarlo ya que la imagen puesta por ella no he podido eliminarla. Pero lo hare para poder personalizar el titulo libremente.
    Así que guapisima, un montón de gracias por seguir investigando para nosotros.
    Sobre el layout no he hecho nada todavia y hoy ya estoy arta de blogger.
    Besos.

  3. Eulalia ha dicho
  4. Ya me enviarás la dirección cuando hagas algo de esto, así podré ver tus experimentos.
    Un besazo.

  5. Cero Cool ha dicho
  6. EUREKA, LO LOGRE!!! (^_^)
    Muchísimas gracias, desde ahora me uno a su club de fans. (n_n)
    Si alguien quiere ver:
    El Retorno del Jedi
    http://jedicerocool.blogspot.com

  7. Eulalia ha dicho
  8. ¡Chapeau! cero cool.
    Te ha quedado de coña.
    Un abrazo-

  9. Loladealmeria ha dicho
  10. Eulalia soy la pesá de siempre, gracias por leerme, je je.
    Queria preguntarte como se hacen la tarjetas esas de cumpleaños, mi blog cumple un año y ando muy liada, me gustaria hacer algo sencilo y facil de hacer, ¿ tienes alguna entrada donde lo indiques???
    gracias por tu paciencia.
    Bss desde Almeria

  11. Eulalia ha dicho
  12. Lola:
    Yo las preparé con power point, pero me parece que hay una pagina que las hace, aunque no se cual es.
    No se si conoces a Vesta, ella las hizo en algún sitio online. Seguro que si le preguntas te indica donde.
    Un abrazo.

  13. Loladealmeria ha dicho
  14. Eres un sol , muchas gracias. Las tuyas estan geniales. besss

  15. TutoGuiaBeRuby ha dicho
  16. hola! lindo blog, se agradece su aporte. yo quiero poner un icono en la direccion de mi blog se podra?
    dejo mi direccion:

    http://tutoguiaberuby.blogspot.com

  17. Eulalia ha dicho
  18. Supongo que si que se puede, he visto gente que usa un icono propio, aunque hasta ahora no lo he usado, por tanto ignoro como se hace.
    Saludos.

  19. Sagraldar ha dicho
  20. Hola Eulalia, es la primera vez que uso un consejo de tu blog y me gusta como queda. ¡Gracias por explicarlo tan claro!

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.