JMiur [E]

La posibilidad de agregar elementos predefinidos en Blogger no es algo malo, aunque tampoco es algo bueno, simplemente, se trata de una herramienta más. Sin embargo, a la hora de personalizarlos, cuando ya le hemos perdido el miedo a la plantilla, algunos de esos elementos nos presentan dificultades que no son sencillas de superar.

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>
A ese rectángulo se lo identifica con un ID (un nombre único) y, por defecto, se denomina header-wrapper. Tiene un ancho igual al ancho total de nuestra página, sin importar cúal sea esta y además, en el caso de la Plantilla Mínima, tiene un borde y un margen inferior que lo separa de las columnas de entradas y la sidebar:
#header-wrapper
border: 1px solid $bordercolor;
margin: 0 auto 10px;
width: 860px;
}
Dentro de ese rectángulo, hay otro cuyo ID es header y que también tiene un borde y como hay un margen alrededor, se ve como un doble recuadro:
#header { 
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Erámos pocos y adentro de ese hay otro rectángulo más llamado header-inner con propiedades que por el momento, podemos ignorar.
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
Recién ahora, adentro de ese, se encuentran los textos. En titlewrapper el tíitulo de nuestro blog que se muestra con una etiqueta de encabezado H1 y un enlace en todas las páginas excepto en el home. Debajo, en descriptionwrapper esta la descripción (si hemos puesto una) y se muestra con una etiqueta P.

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 { ....... }
Como en esta etapa no vamos a tocar el código HTML, nos concentramos en manipular un poco esas propiedades CSS.

Primero, vamos a ponerle una imagen de fondo, un pattern que se repita y eventualmente cambiamos el tamaño de las fuentes:
#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;
}

Ahora, busquemos otra alternativa, en lugar de colocar una imagen tipo pattern, colocaremos una imagen que ocupe todo el ancho. Tendrá que tener como mínimo 860 pixeles que es el ancho del blog del demo pero, podría ser mayor, no pasará nada. Los códigos no varian mucho del ejemplo anterior:
#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;}

No es necesario usar una imagen que se repita o que ocupe todo el rectángulo, podemos usar imágenes más pequeñas y ubicarlas en cualquier posición. Lo mismo podemos hacer con los textos; no es necesario que siempre se muestren de la misma manera, para esto nos valemos de la propiedad position que nos permite ubicar algo en cualquier parte con absoluta precisión:
#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 */
}

Tampoco estoy limitado a usar una sola imagen, puedo usar varias si las coloco en los distintos rectángulos interiores (ya que hay varios, los usamos. Probamos con dos imágenes, una a cada lado:
#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:

Anónimo  

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

Responder
JMiur  

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.

Responder
Unknown  

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!!!

Responder
Sr. D. Javier de García  

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!!

Responder
Anónimo  

Muchas gracias, ya corrijo.

Responder
ana  

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

Responder
JMiur  

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.

Responder
Manuel Alberto  

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.

Responder
JMiur  

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;
}

Responder
Manuel Alberto  

JMiur, ambos problemas solucionados gracias a tus indicaciones. Muchas gracias :P

Responder
JMiur  

Me alegro, Manfenix :)

Responder
Inés  

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

Responder
JMiur  

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.

Responder
Inés  

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

Responder
JMiur  

No es nada, Inés. Fue una pregunta lógica :)

Responder
Blog de Fieras.  

JM, eres mi "maestro".... Saludos desde Valencia.

Responder
Manuel Alberto  

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?

Responder
JMiur  

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.

Responder
Manuel Alberto  

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?

Responder
Manuel Alberto  

Gracias, :)

Responder
JMiur  

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 &lt/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.

Responder
Manuel Alberto  

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

Responder
JMiur  

Perfecto. Ahí veo las campanitas :D

Responder
Anónimo  

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.

Responder
Anónimo  

Disculpa, no dejé la dirección de mi blog
para que comprendas mi pregunta.
es:

http://dhesc.blogspot.com/

saludos amigo.

Responder
JMiur  

Fero:
Como tu perfil es inaccesible, no puedo ver el blog y no puedo responderte.

Responder
Anónimo  

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.

Responder
JMiur  

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á".

Responder
Anónimo  

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

Responder
JMiur  

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;
}

Responder
Anónimo  

Jmiur.
Muchas gracias, he colocado el borde gris y a mi parecer a quedado perfecto :)

Muchas gracias!

Responder
JMiur  

Perfecto, me alegra que encontraras una solución satisfactoria.

Responder
Unknown  

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

Responder
JMiur  

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.

Responder
Unknown  

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

Responder
JMiur  

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.

Responder
Unknown  

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

Responder
JMiur  

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>

Responder
Unknown  

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

Responder
JMiur  

¿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.

Responder
Mauro Ferreyra  

Alguien me puede decir, como quitar el efecto de sombra alrrededor de las fotos que subo ? muchas gracias.

Responder
JMiur  

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);

Responder
santimental  

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.

JMiur  

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.

santimental  


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.

JMiur  

En este momento, en ese blog, se ve el widget Header nornal con texto.

Responder
Unknow  

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

JMiur  

No sé cuál es el blog al que te refieres.

Responder
Unknown  

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

JMiur  

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;
}

Responder
Unknown  

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

JMiur  

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

Responder

¿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 ...

 
CERRAR