17

Plantilla Snapshot: Sable, Modificar ancho


Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Vamos a modificar el ancho de la plantilla Snapshot: Sable de Blogger.

1- Antes de nada hemos de ensanchar la totalidad del cuerpo del blog, para ello nos situamos en:

/* -- layout -- */
#outer-wrapper {
width: 700px;

Y cambiamos su ancho o width de 700px a 900px

2- Si usamos la "vista previa" podremos comprobar, que el ancho de nuestro blog aumenta, pero las imagenes no, así que tendremos que cambiarlas por unas de ese tamaño, empezaremos por el mismo #outer-wrapper{.
Cambiamos la url de la imagen por esta otra:
http://img243.imageshack.us/img243/3379/outherwrapperdp1.gif

Continuamos sustituyendo las imágenes de la cabecera. Buscamos esta parte del código:

#header-inner {
background: transparent url(http://www.blogblog.com/snapshot_sable/header-03.gif) bottom left no-repeat;
}

Y sustituimos la url de la imagen por esta otra:
http://img187.imageshack.us/img187/135/header03iu7.gif

Hacemos lo mismo en

#header-wrapper {
background: #D8DADC url(http://www.blogblog.com/snapshot_sable/bg-headerdiv.gif) 0 0 repeat-y;
}

Sustituyendo la imagen por esta otra:
http://img263.imageshack.us/img263/3261/headerwrappersu5.gif

3- Ahora vamos a sustituir la imagen del footer, es decir, del pie del blog, por esta otra:
http://img243.imageshack.us/img243/8451/bgfooterdm8.gif
En esta parte del código:
#footer {
clear: both;
background: #E9EAEB url(http://img243.imageshack.us/img243/8451/bgfooterdm8.gif) bottom left no-repeat;

4- Vamos a ensanchar la parte de las entradas, lo pondremos en 600px, para ello buscamos esta parte del código de la plantilla:

#main-wrapper {

En el width: 428px; pondremos width:600px.
Unas líneas más abajo, sin salirnos del #main-wrapper{ vemos que hay otro width: 404px; lo cambiamos también a width:600px.

Al usar la "vista previa" veremos que las barras que adornan la fecha, el título de las entradas y la sidebar, no aparecen como deberían, vamos a sustituirlas por unas nuevas, adaptadas al tamaño del main. Buscamos esta parte del código:
h2, #comments h4 {
Justo debajo vemos esta otra:
En h3 {
Y la única url de imagen que aparece en cada caso, la sustituimos por esta otra:
http://img218.imageshack.us/img218/3072/barraslk1.jpg

5- Buscamos ahora esta parte del código:
/* -- layout -- */
#outer-wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
font: normal normal 100% Helvetica, Arial, sans-serif;
background: #fff url(http://www.blogblog.com/snapshot_sable/bg-body.gif) 0 0 repeat-y;
}

Y eliminamos la última línea, es decir, el background o fondo.

Mas abajo veremos la parte de las entradas, el #main-wrapper, vamos a colocar una línea nueva, lo que dará el fondo que tenían antes, de color gris clarito a los post.
background:url(http://img407.imageshack.us/img407/7474/nombrefo6.jpg);
Podemos ponerla, por ejemplo, debajo de la línea del width.

6- Nos toca ahora la sidebar, modificaremos su ancho de width: 264px; a width: 270px; y lo haremos aquí:

#sidebar {

7- Por último buscamos el #main-wrapper { y modificamos la línea del padding para acercar la sidebar a las entradas, quedará así:

padding: 10px 16px;




DESCARGAR PLANTILLA

Entradas Relacionadas:

17 comentarios:


Miguel Vera

Muchisisísimas gracias Rosa, la verdad es que mi plantilla siempre me pareció muy angosta y tú me trajiste la solución perfecta. De todos modos dentro de poco pensaba hacer un cambio de plantilla, pero mientras tanto esto me cae de maravilla. ¿Sería muy inapropiado decirte que te adoro? Jeje muchas gracias.

Miguel Vera

Carmen :( seguí todos los pasos y tengo un problema, la caja celeste donde se escribe la descripción del blog se queda entre los posts y la sidebar y deja un espacio vacío enorme entre ambos. Yo pensé que al mover la sidebar se movería también esta caja pero sigue en el mismo sitio. Además no tengo una sección que diga header-inner, así que la reemplacé en una que decía header a secas, pero la foto me salió detrás de la que ya existía. Espero puedas ayudarme, había tomado un screenshot, pero se perdió y ya no podía volver a hacer todo. Ojalá se comprenda lo que te digo, sino me preguntas. Gracias de nuevo.

Rosa

Miguel, te pido mil perdones y te doy mil gracias por el apunte!

Ha sido culpa mia... :( se me olvidó reseñar un cambio en el post, gracias a ti, lo he revisado y corregido.
El dato era un cambio de tamaño en el main.
Discúlpame, te rogaría lo intentes de nuevo y me comuniques cualquier nuevo problema.

Lo de poner la imagen de cabecera en header, está correcto, por cierto, si quieres seguir usando esa de "piedra" que tienes, me he tomado la libertad de ampliarla a 900px, para que se adapte al nuevo tamaño, solo has de incluir la url de la imagen en #header:

http://img62.imageshack.us/img62/5673/header2xx8eb5.jpg

Miguel Vera

Carmen, gracias por la ayuda y por el header, pero te molesto de nuevo. Esta vez te muestro dos screenshots para que veas el problema.

Header
Sidebar

Yo ta había creado una imagen nueva de cabecera, pero como puedes ver, por alguna razón aparece detrás de la antigua. Peor aún la sidebar quedó debajo de la última entrada y la caja de descripción sigue en el mismo sitio, a menos que no se pueda mover... Espero no sea mucha molestia. Saludos.

Rosa

Miguel, supongo que el problema de la imagen de la cabecera se debe a que no has retirado la url de la imagen anterior, sino, es imposible que se vea...Has de eliminar en #header la url:

#header {
background: transparent url() bottom left no-repeat;
}
Y poner en su lugar la url de la nueva, entre ( ) que es donde estaba la anterior.

Con el problema de la sidebar, prueba a reducir los pixeles en su width, ahora está así según el tamaño que yo puse en el ejemplo:
#sidebar {
width: 270px;

Prueba poniendo 265, por ejemplo, si no sube, baja un poquito más el número de pixeles, ve usando la vista previa hasta dar con el que necesitas.

Magnolia

Hola Rosa.
Que gusto encontrar tu página, ha sido de mucha ayuda, te estaré leyendo seguido.
Una consultita, cambie mi plantilla a esta

Blogger Template Style
Name: Grungy
Designer: Dimas Romero
URL: www.blogmundi.com
Date: 31 Mar 2007
Basada en: Thisaway

y quedo anchisimaaaaaa pero no hay nada solo espacio perdido, la puedo cambiar, sabes algo tú.? me sirve intentar lo que acá explicas.?
Gracias por tu ayuda.

Magnolia

ups, se me olvido comentar que también en la parte de "editar diseño" en "elementos de la página" esta todo corrido hacia la derecha... es harto lo que se corrio y no sé por qué...

Rosa

Hola Magnolia! He visto tu plantilla y está muy guapa. Ese espacio vació es normal en su diseño, no es una plantilla de Blogger, esta basada en Thisaway pero muy modificada, no puedes aplicar eso que dices, habría que modificar todas sus imágenes...

Aún así, si me dices exactamente lo que quieres, podría intentarlo...

La parte de "editar" es por lo mismo, quien modifico la plantilla no adecuo esa parte, a veces lo dejan tal cúal pues no tiene demasiada importancia...
No veas como se ve el "reves" de alguna de mis plantillas...:$

Magnolia

Hola Rosa, que bien que me respondiste...
Gracias por lo de guapa.. ups perdón era la plantilla jeje...
bueno no molesta tanto el espacio vacido, a veces no es ni tanto...
Gracias de nuevo...
No entendi eso de tu plantilla al revés.. será que estoy con frío y la neurona se atrofia..
Saludos,
M.

Rosa

JE,JE, Magnolia wapa (ahora si es a ti). El "reves" como yo le llamo es la parte de editar diseño.

Itahisa

Hola,
me encantaría saber si hay alguna forma de modificar el ancho de la plantilla Mínima, en cualquiera de sus colores, o cómo poner una imagen de fondo del blog...

Rosa

itahisa, para colocar una imagen de fondo en tu blog mira aquí:

Imagen de fondo

En cuanto a lo de la Mínima, cualquier explicación sirve para todos los colores, no la tengo en mi blog ahora mismo,pero prometo una entrada sobre ella a lo más tardar en un par de días. ;-)

Carolina

Hola Rosa:
gracias por la ayuda de como modificar el ancho de la snapshot. Queria preguntarte si sabes como quitar en donde está el footer las barras grises que se ven debajo (sucede en mi blog)o camuflarlas de algún modo, en fin, te agradeceria mucho si pudieras verlas y darme una ayuda.No se ven mucho pero es una pena tenerlas. Gracias desde ya y felicitaciones por este instructivo blog

Rosa

Carolina En esta parte:
#footer {
clear: both;
background: #E9EAEB url(http://www.blogblog.com/snapshot_sable/bg-footer_left.gif) bottom left no-repeat;
border-top: solid 1px #dbdfdf;
min-height: 15px;
}

Elimina la url de la imagen que ves ahí destacada en negrita.

Carolina

Rosa mil gracias! Ya tengo "limpia" esa zona del blog. Te envio un gran abrazo y otra vez felicidades por tan buen blog de ayuda e información blogger :D

Diegose07

Como puedo hacer para que la parte de abajo del footer pueda dejar parecida a la tuya

El Escaparate© 2007/2009 | Política de privacidad | Plantilla Blogger | Diseño Rosa

si me puedes indicar gracias..:)

Rosa

Diegose07 Puedes guiarte por aquí:

http://elescaparatederosa.blogspot.com/2008/01/simbolo-del-copyright.html

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S