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.
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>
#header-wrapper border: 1px solid $bordercolor; margin: 0 auto 10px; width: 860px; }
#header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }
#header-inner { background-position: center; margin-left: auto; margin-right: auto; }
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 { ....... }
#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; }
#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;}
#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 */
}
#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; }
52 comentarios:
Manipulando, manipulando pero una que no sabe ha dejado la descripción por los suelos.
JMiur, cómo puedo acercarla (subirla)
hacia el título?
Todos mis blogs son iguales, si puedes ver uno, te lo agradecería.
(Me gustaría que no quede pegada al menú)
Un beso
Lo que genera esa separación es el padding del título:
#header h1 {
..................
padding: 75px 71px 4.5em;
}
4.5em es la separación entre el título y lo que está debajo (la descripción); ese valor es muy alto (4 veces y media la fuente o sea unos 180 pixeles) y por eso se separa tanto. Reduce ese valor y ambos textos se juntarán.
JMIUR no había caído en la cantidad de códigos del header!!!, hace tiempo que coloco una imágen y ya :)...que tengas un lunes bonito!!!
Genial, JMiur!:)
¿Explicarás también cómo controlar los wigets laterales? Especialmente, hay uno con el que me llevo muy muy muy mal: el de las imágenes. No consigo ubicarlas como quiero, siempre me quedan arriba a la izquierda, y demasiado pequeñas; o por el contrario, quedan tan grandes que me desplazan el resto de los elementos. Pensaba que estos elementos suministrados por blogger eran herméticos, pero ya veo que no. Gracias, buena entrada!!
Muchas gracias, ya corrijo.
Hola Jmiur e gustaría que visitases este blog http://descargaloquequieres.blogspot.com/ me han dicho varias personas que al encoger un pokito, lo más minimo la ventana con que lo ves, la sidebar de la izquierda se va al final del todo, en un principio crei que era por la nube 3d pero no, porque he probado a quitarla y sigue yendose hacia el final al encoger un poquito la ventana, la otra sidebar se va adaptando segun voy encogiendo la ventana pero pero la otra se baja, ayudame please :(
Puedes contactarme aqui mjcc122@hotmail.com
ZonZo: En realidad, si son herméticos, justamente por eso, es mejor evitarlos. Ese es, a mi juicio, el caso del elemento Imagen. Es mejor no usarlo y usar un elemento HTML que es el más flexible y el que te permite hacer y deshacer a tu antojo.
Ana: Las plantillas de tipo fluido son complejas de manejar. En este caso, tal vez podrías reducir el ancho porcentual de esa sidebar izquierda para evitar ese defecto. Probablemente, si en lugar de 20% dijera 18 o 16%, mejoraría.
Hola JMiur. Otra vez por aquí :-| ... consultando por el siguiente problema en mi blog Avibert. Tengo el menú separado del header. Apliqué el código correspondiente para acercarlo, pero sin éxito. Esto sucede en FF; en IE se ve bien.
Algo similar me sucede con la widebar y las sidebar. Puse esto en el código y no se mueve. En este caso se ve igual en los dos navegadores. Qué puede estar pasando?.
Gracias por tu atención.
Manfenix:
En el header, eso es porque UL que es la lista donde tienes el menú, posee, por defecto, un margen. Lo eliminas así:
ul.navtop {
margin:0;
padding:0;
}
En la sidebar hay varios márgenes agregados.
Todos los widgets tienen un margen inferior (ese, yo no lo quitaría por ahora)
.sidebar .widget {
margin:0 0 1em;
}
Tanto en #sidebar-wrapper como en #newsidebar-wrapper se establece un padding superior: padding-top:10px y esos dos los quitaría
Por último, la calse sidebar también tiene un padding tanto superior como inferior de 2em y también podría quitarse:
.sidebar {
.....
padding:2em 0.5em;
}
JMiur, ambos problemas solucionados gracias a tus indicaciones. Muchas gracias :P
Me alegro, Manfenix :)
Hola JMiur, me atrevo hacer a molestarte con lo siguiente ¿cómo puedo hacer que la imagen que tengo en la cabecera del blog sea un enlace? seguramente será algo obvio, pero yo me estoy iniciándome en este mundo y todavía voy dando "palos de ciego". Muchísimas gracias. Tu blog me entusiasma!!! :P
Inés, por defecto, es un enlace pero sólo cuando no estás en el home de tu página justamente porque es un enlace al home ¿No funciona así ahora? Tendría que verlo para contestarte con más precisión.
Efectivamente hasta ahora no me había dado cuenta que sólo cuando no estás en home funciona como enlace. Mil disculpas por molestar. :S
No es nada, Inés. Fue una pregunta lógica :)
JM, eres mi "maestro".... Saludos desde Valencia.
Hola JMiur. Tengo una consulta respecto de la ubicación de imágenes en el header. Es posible ubicar dos imágenes gif animadas pequeñas en las esquinas superiores del header, superponiéndose a una tercera que abarca todo el header?
Casi todo es posible. Pueden ponerse varias imágenes etc pero, es difícil responder sin ver algo concreto. Fíjate en esta entrada, por ejemplo.
La idea es colocar una imagen animada gif en cada esquina superior del header wrapper, manteniendo la imagen actual del header (subida esta última a través del panel de control). Intenté ubicar los códigos correspondientes a las imágenes animadas, siguiendo los pasos indicados en la entrada de referencia, uno en el header-wrapper y otro en el header. Pero no funcionó. Podrías darme alguna pista para lograrlo?
Gracias, :)
Debería verlo aunque sea con errores así que sól opuedo darte detalles generales.
Agregale a #header-wrapper la propiedad position:relative;
#header-wrapper {
.............
position:relative;
}
Ahora bien ¿donde están esos gifs? Coloca dos etiquetas IMG dentro del header-wrapper. Por ejemplo, colcoaré una imagen que ya usas y la pondré dos veces antes del </div>
<img id="fondo1" src="http://img338.imageshack.us/img338/4623/casaw.gif"/>
<img id="fondo2" src="http://img338.imageshack.us/img338/4623/casaw.gif"/>
Podría entonces agregarles porpiedades a cada una:
#fondo1 {position:absolute;top:100px;left:100px;}
#fondo2 {position:absolute;top:100px;right:100px;}
Con position:absolute; podría ubicarlas a mi gusto, dentro del rectangulo del header y con left top bottom y right las posiciono.
Genial JMiur. Ya puedes ver en mi blog lo que intentaba hacer por otro medio. Es realmente sencilla y eficiente esta solución. Muchas gracias y Felices Fiestas!!!!, :P
Perfecto. Ahí veo las campanitas :D
Jmiur.
Saludos.
tengo una pregunta amigo, como hago para separar el header top de la pagina en mi blog.
Es decir, mi blog es de una sola columna y le he colocado una sombra alrededor que sobresale hacia todos los lados en chrome y firefox; pero en la cebecera la sombra queda cortada porque esta pegada al top de la pagina. Quisiera que el blog quedara como un cuadro centrado en la pagina. Como hago?
Gracias de antemano.
Disculpa, no dejé la dirección de mi blog
para que comprendas mi pregunta.
es:
http://dhesc.blogspot.com/
saludos amigo.
Fero:
Como tu perfil es inaccesible, no puedo ver el blog y no puedo responderte.
Jmiur.
Disculpa que no te dejé antes la dirección de mi blog.
La coloqué en un comentario luego pero ahora veo que el formulario no lo publicó.
Mi blog es
http://dhesc.blogspot.com
Gracias.
Ahora si, Fero :D
Centrado en la pantalla, será complicado o imposible a menos que uses JavaScript porque, debería calcularse la altura libre que variará con la resolución de la pantalla de cada visitante y con el navegador que utilice o cómo lo tenga configurado. Además deberá calcularse la altura de eso que se mostrará.
Lo razonable sería establecer un margen superior e inferior para que se despegue de los bordes del navegador; eso, lo resuelves fácilmente cambiando la propiedad margin de outer-wrapper que ahora dice:
#outer-wrapper {
.......
margin:0 auto;
}
Por algo así:
margin:30px auto;
eso dejara ún margen de 30 pixeles arriba y abajo; si sólo lo quieres arriba, usas esto:
margin:30px auto 0;
claro, el valor de 30px es el que quieras; cuanto más alto sea, más "bajará".
Jmiur!
Gracias! ha quedado tal cual como deseaba que quedara!
Eres un genio.
Tengo una consulta mas si no es mucha molestia:
Tal como lo has expresado en tu entrada llamada "sombras nada mas..." la diferencia de las sombras en los navegadores me esta volviendo loco.
En Chrome, se ve muy bien el efecto de sombra alrededor del outer-wrapper, pero en Explorer no me queda el mismo efecto.
Entiendo que hay diferencias.
Pero, ¿hay alguna forma de que en IE la sombra sobresalga por todos los bordes como si estuviese detrás de las entradas? O, si no es posible,
¿como hago para colocar una linea alrededor gris de tal manera que quede como un cuadro con sombra paralela?
Muchas gracias por tu amabilidad.
Saludos
http://dhesc.blogspot.com
Fero:
El tema de las sombras en IE es compeltamente distinto, es un filtro que existe desde hace mucho pero, tiene sus limitaciones y para que se asemeje, hay que usar magia :D
Los detalles no pdría dártelos porque los desconozco, sólo lo he usado de manera muy limitada pero, ellos tienen bastantes explciaciones y ejemplos, tal vez esta página sirva de ayuda.
Ahora bien, dado el tipo de sitio que estás armando, yo, aconsajearía usar hacks de tal modo de diferenciar la forma en que se verá el blog en IE y en el resto de los navegadores. Eso se hace colocando condicionales así:
<!--[if IE]>
<style>
... estas propeidades sólo se aplicarán a Internet Explorer ...
</style>
<![endif]-->
De esa manera, podrías seguir usando la sombra y en IE, si no encuentras un método que te guste, colocar un borde. Ese borde iría en el mismo lugar. Un ejemplo simple:
#outer-wrapper {
.......
border:1px solid #CCC;
}
Jmiur.
Muchas gracias, he colocado el borde gris y a mi parecer a quedado perfecto :)
Muchas gracias!
Perfecto, me alegra que encontraras una solución satisfactoria.
Hola.
Soy muy novata en esto y aunque gracias a tus turoriales he modificado prácticamente toda mi plantilla, tengo una problema. He cambiado la cabecera por un diseño propio que he introducido con la herramienta del Blog para sustituir la que venía por defecto. Le he dado mas margen de alto pero no consigo que desaparezca un tramo de otro color que pertenecía a la plantilla. No sé como hacer para que desaparezca. Si me puede ayudar se lo agradecería enormemente.
Mi blog es redecohogar.blogspot.com
Muchísimas gracias
Un saludo
No estoy seguro si te refieres a esto pero, hay un color de fondo definido para el header que puede quitarse si buscas esto:
#header-wrapper {
.......
background:#2E94AB;
}
Y eliminas esa propeidad de background que puede no decir eso exactamente pero, es indiferente, simplemente, elimínala y sólo se verá la imagen que ahs colocado.
Hola de nuevo.
Eliminé el elemento pero continúa el color detrás de la cabecera que medirá unos 50px. Este color ya estaba en la plantilla cuando hice las modificaciones puesto que dentro estaba el texto de la cabecera original. Como digo ha pesar de cambiar las medidas no consigo que desaparezca. La plantilla es de Techbuzz.
Gracias de nuevo
Un saludo
Cristina:
A ver si es esta parte, un color "celeste" arriba a ambos lados del header. Si es eso, es una imagen de fondo que está acá:
#head-top {
.......
background: transparent url(.... header.gif) repeat-x scroll left top;
}
Si eliminas esa propeidad, desaparecerá. Allí también hay un margen; eso lo puedes dejar, modificar o eliminar.
Muchísimas gracias J.Miur, se solucionó el problema, que alivio. Ya solo me queda una pregunta más sobre esa plantilla para comenzar a optimizar el blog. Me gustaría eliminar las pestañas que venían debajo de la cabecera y colocar en su lugar un menú horizontal desplegable, el caso es que lo he intentado varias veces, pero el menú se coloca sobre las entradas y la sidebar, desplazando ambos contenedores. Lo mismo me ocurre si intento crear una página estática se coloca sobre el título del primer post. Hay alguna manera de solucionar este problema. Gracias de nuevo por tu ayuda, no sabes lo mucho que lo agradezco.
Un saludo
Tendría que verlo aplicado pero, ahí, ahora hay un DIV donde se ve un menú:
<div id="menu-module">
Podrías coloar tu nuevo menú allí mismo, reemplazando el contenido o bien, crear otro DIV con otro ID y copair y pegar las propiedades del anteriro. Si lo colocas justo debajo , deberías ver uno tras otro:
<div id="menu-module">
.........
</div>
<div id="NUEVOmenu">
.........
</div>
Lo he intentado todo durante varios días, pero no hay manera, cualquier intento de colocar un menú horizontal bajo la cabecera del blog y por tanto sobre el main wrapper, hace que este se sobreponga sobre el main y la sidebar. Creo que es problema del diseño de la plantilla que como novata no se muy bien donde puede estar esta condición. Si me pudieses ayudar te lo agradecería.
Muchísimas gracias por todo.
Un saludo de nuevo
Cristina
¿Es un menú que reemplazaría al que ya existe?
Necesitaría verlo puesto para decirte qué modificar. Para que la prueba no perturbe al blog, colócalo y ocúltalo con CSS; por ejemplo si estará en un div, escribe algo así:
<div id="NUEVOmenu" style="display:noen;">
......... y aqui pones el menú nuevo
</div>
De ese modo, no se erá pero podré hacerlo visible y revisarlo.
Alguien me puede decir, como quitar el efecto de sombra alrrededor de las fotos que subo ? muchas gracias.
El estilo está definido en tu plantilla, dice algo así:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: transparent;
border: 1px solid transparent;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
Basta quitar todo eso de:
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
Hola, tengo el siguiente problema, al insertar una imagen para el blog en la cabecera (desde Diseño) y no salir como quería la eliminé pero ahora me sale el espacio sin datos, es decir, sin el título ni descripción del blog, pero en sólo desaparece en la versión de pc en la versión móvil si sale ¿?.
Te agradecería si me puedes ayudar, mi blog es http://dondecomesanti.blogspot.com.es/
Gracias.
Imposible saber cuál es el problema. Simplemente, elimina el widget Header, guarda y vuelve a colocarlo; de ese modo, se restaurará el widget original de Blogger.
Gracias por la respuesta, pero ya he realizado ese paso y al eiminar el widget no me aparece ni en versión pc ni móvil. Lo restauro con el widget "Cabecera" de blogger y me vuelve a aparecer en la versión móvil pero no en la versión de pc que sigue saliendo el espacio sin texto en la cabecera.
En este momento, en ese blog, se ve el widget Header nornal con texto.
Hola me encanto el post y fue de mucha ayuda pero me podrias ayudar? esque estoy renovando mi blog y quiero que la imagen de cabecera quede encima de mi menu o sea que la imagen de mi cabecera
No sé cuál es el blog al que te refieres.
Hola !!! He probado a cambiar el Css y también he modificado el html pero no consigo que el título y la descripción me salgan centrados ( al contrario...salen más centrados utlizando left en vez de center ) podrías ayudarme ? http://sixlooks.blogspot.com.es/ Muchas gracias
Es porque estás poniendo una cantidad enorme de padding y no hay necesidad alguna; ahora dice algo como:
#header-wrapper #blog_title {
font-size: 3em;
padding: 82px 200px 0 339px;
text-align: left;
}
y debería decir :
#header-wrapper #blog_title {
font-size: 3em;
padding: 82px 0 0;
text-align: center;
}
Lo mismo con la descripción:
#header-wrapper h2 {
font-size: 1.5em;
padding: 0;
text-align: left;
}
Muchísimas gracias, ya conseguí solucionarlo. Tal vez también podrías ayudarme en lo siguiente: quiero eliminar la columna de la derecha ( en diseño no puedo hacerlo por ser una plantilla modificada ) y agrandar el cuerpo principal..dónde lo hago en html? Gracias. Un saludo
El contenido lo puedes quitar buscando y borrando el div cuya id es sidebar-wrapper
De todos modos, eso no resolverá el tema ya que la igen de fondo del blog muestra dos columnas:
http://3.bp.blogspot.com/-JeyFtNxNLN8/URQtJAge2QI/AAAAAAAACRc/sGF_IS8uQi4/s000/container_bg.jpg
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...