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