Problemas edición plantilla Blogger: medidas, colores, footer, header

  • Autor Autor Wizard
  • Fecha de inicio Fecha de inicio
Wizard

Wizard

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Amigos, yo estoy aprendiendo lo básico de programación y el día de ayer me he animado a editar una plantilla, para colocarla a mis blogs y le he editado varias cosas y por los momentos me gusta como está quedando pero, tengo algunos problemas con algunas medidas, y quisiera saberr si me pueden ayudar. estos son los problemas:

1-Distancia entre la barra de navegación y el blog (No se como se llama), pero quisiera poder cambiarle la medida para poder colocarlo más pegado me refiero a esto:

5u2yR.jpg


2-El color del blog como tal, si se fijas el color de fondo del blog es: #cfe2f3 y en donde está el blog es: #f1f6fc , he buscado mil veces el color de adentro (#f1f6fc) pero no lo logro ubicar, así que supongo que es un estilo css que hace que el blog tengo alguún tipo de transparencia, pero como soy nuevo en esto no logro ubicarlo (y quiero dejarlo color blanco).

3-El Footer no hayo manera de dismunuirle el tamaño y queda muy grueso, y me puse a borrar unos códigos y no puedo añadir otro gagget como footer X_x Jaja que torpe (No guarde respaldo).

4-Quiero divirir el header o cabecera, e intente seguir este tutorial: Dividir la cabecera del blog | Ciudad Blogger - Trucos y tutoriales para tu blog

Y llego hasta aquí (Donde tengo que ubicar ese código e insertar el codigo en rojo:

Insertar CODE, HTML o PHP: 
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
[COLOR="#FF0000"]<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>[/COLOR]
</div>

Y lo agrego pero mi plantilla no tiene esa etiqueta div de cierre, y lo intente guardar sin ella y no me deja, intente podiendola y tampoco me deja, porque mi código es diferente :S.

Y eso es todo lo que me gustaría que me ayudaran si pueden hacerlo, sino con un tutorial que tengan a la mano me hes de mucha ayuda también.

Mi blog es: Nadie Como Peter
 
Última edición:
Antes de modificar guarda una copia de tu plantilla, pues lo que a continuación te voy a recomendar hacer es una posible solución a cada punto.

1. Prueba agregando esto en el CSS del body padding-top:15px;

2. Reemplaza esto:
HTML: 
<Variable name="main.background" description="Main Background" type="background"
default="transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/>

Por esto:
HTML: 
<Variable name="main.background" description="Main Background" type="background"
default="transparent url() repeat scroll top left"/>

3. Prueba agregando height:valorpx entre lineas del CSS .footer-outer. Obviamente en valor pones el número que deseas para modificar la altura del footer.

4. De este punto no estoy seguro puesto que tu plantilla es muy diferente a las que e visto :topsy_turvy:
Una vez agregado el estilo CSS tal y como te dice el tutorial que mencionaste pasa a esto:
Abajo de esto:
HTML: 
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<a href='http://nadiecomopeter.blogspot.com/' style='display: block'>
<img alt='Nadie Como Peter' height='200px; ' id='Header1_headerimg' src='http://3.bp.blogspot.com/-z-QFTQylSmQ/UOcMfAA57PI/AAAAAAAABq4/q9bD3QRDBlA/s1600/NadieComoPeter.png' style='display: block' width='318px; '/>
</a>
</div>
</div></div>

Pega esto:
HTML: 
<div>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Espero que al menos alguna de mis recomendaciones te funcione :encouragement:
 
[MENTION=36355]ARTUROCK[/MENTION] Muchas gracias por la ayuda, para mi mala suerte ningún consejo me ha funcionado 🙁
 
Oh que mal, lo siento amigo :grumpy: espero que alguien más experimentado pueda ayudarte, suerte :encouragement:.
 
Hola Pedro,

Para que sea más fácil, ¿Podrías decirnos de que plantilla se trata para probar por nuestros propios medios? ¿O pasarnos todo el código que configuraste para la misma?

Yo hace bastante que no toco Blogger pero no tengo problemas en montar la plantilla en un sitio y ayudarte con las cuestiones que preguntás.

PD:
Me fijé el primer punto y creo que es el más fácil.
Buscá en la parte que están todos los CSS (el elemento "body") y agregale la siguiente línea:

HTML: 
margin-top: -30px;

Por lo que pude llegar a ver en el código del sitio que pasaste te tendría que quedar así:

HTML: 
body {
    background: none no-repeat scroll center center #CFE2F3;
    color: #333333;
    font: 15px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
    margin-top: -30px;
}

Yo lo probé y quedó más pegado hacia arriba, sino, podés ir jugando con el valor de la propiedad margin-top.


De paso también miré lo que indicás sobre el color... xD

Primero ubicá esto en el código:
HTML: 
.content-outer {
    background: url("//www.blogblog.com/1kt/transparent/white80.png") repeat scroll left top transparent;
    border-radius: 0 0 0 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    margin: 10px auto;
}

Lo que te está dando "el color" ese que decís es la propiedad "background". Entonces simplemente la podés reemplazar lo anterior por (si lo querés blanco como mencionaste):

HTML: 
.content-outer {
    background: white;
    border-radius: 0 0 0 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    margin: 10px auto;
}

Bueno, eso por hoy... después si tengo un tiempo te doy una mano con los otros puntos 🙂

Saludos y suerte con tu proyecto!
 
[MENTION=36355]ARTUROCK[/MENTION] no hay problema amigo, muchas gracias por prestar ayuda, lo que pasa es que la plantilla que tengo es un poco rara.
[MENTION=337]Nauta[/MENTION] muchas gracias amigo si me a servido la ayuda que me has brindado :welcoming:
 
Hola de nuevo,

Para que el footer quede de menor tamaño (a lo alto), buscá ".footer-outer" en el CSS y agregale: height: 40px; (también podés ir cambiándole los valores y ver como queda).

Te tendría que quedar así:

HTML: 
.footer-outer {
    background: url("//www.blogblog.com/1kt/transparent/black50.png") repeat scroll left top transparent;
    border-radius: 10px 10px 10px 10px;
    color: #EEEEEE;
    height: 40px;
}

Y lo de dividir el header cómo es que no te sale siguiendo el tutorial ese? ¿Probaste de las dos formas?

Decís que el código que tiene tu plantilla no es como el del tutorial. ¿Podrías poner entonces cómo es?

Saludos!
 
Nauta dijo:
Hola de nuevo,

Para que el footer quede de menor tamaño (a lo alto), buscá ".footer-outer" en el CSS y agregale: height: 40px; (también podés ir cambiándole los valores y ver como queda).

Te tendría que quedar así:

HTML: 
.footer-outer {
    background: url("//www.blogblog.com/1kt/transparent/black50.png") repeat scroll left top transparent;
    border-radius: 10px 10px 10px 10px;
    color: #EEEEEE;
    height: 40px;
}

Y lo de dividir el header cómo es que no te sale siguiendo el tutorial ese? ¿Probaste de las dos formas?

Decís que el código que tiene tu plantilla no es como el del tutorial. ¿Podrías poner entonces cómo es?

Saludos!
Hacer clic para expandir...

Si se soluciono un poco la parte de abajo con el tamaño, pero fijate la parte de arriba queda ancha, lo que me hace pensar que esa parte no pertecene al footer.

Respecto a la division del header es asi:

Me piden encontrar

Insertar CODE, HTML o PHP: 
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Pero en toda la plantilla busqué detenidamente y el único valor con #Header es así:

Insertar CODE, HTML o PHP: 
.Header img, .Header #header-inner {
  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
}

No obstante pese que era ese ya que es el único que existe en toda la plantilla y lo reemplaze por:

Insertar CODE, HTML o PHP: 
#header {
width: 48%;
float: left;
margin:0 auto 1%;
text-align: center;
color: #000;
}

#header2 {
width: 48%;
float: right;
margin:0 auto 1%;
text-align: center;
color: #000;
}

Ahora me dicen que encuentre:

Insertar CODE, HTML o PHP: 
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Y entonces tampoco aparece por ningún lado:

Insertar CODE, HTML o PHP: 
<div id='header-wrapper'>

Pero si encontre:

Insertar CODE, HTML o PHP: 
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nadie Como Peter (cabecera)' type='Header'/>
</b:section>

Entonces pego el codigo que dicen en el tutorial y me dice esto:

Error al analizar XML, línea 784, columna 7: The element type "header" must be terminated by the matching end-tag "".

Así que no se que pueda ser x_X
 
Con respecto al footer (si no entendí mal) creo que lo que te quedó abajo es la parte que tiene el texto (no es que la "parte de arriba" quedo ancha, aunque sí, puede ser una forma de verlo también... jej)

Intentá buscando esto y cambiándole el primer número (30px) por uno menor. Entonces vas jugando con eso y con la parte anterior del código para hacer más estrecha esa zona y creo que te puede quedar como querés....

HTML: 
.footer-inner {
    padding: 30px 15px;
}

Con respecto al tema del header... vos estás usando el segundo método de la web que citaste ¿No probaste utilizando el primero? (que dice: Para las plantillas hechas con el Diseñador de plantillas de Blogger).

Saludos!
 
Última edición:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba