Plantilla tic tac de Blogger

Me han pedido hace días a través de un email una modificación para la plantilla Tic Tac de Blogger. Es una de las plantillas más difícil de "ensanchar", ya que es de cuerpo fijo, es decir, hay que modificar sus imágenes de fondo con un programa de dibujo, porque si no, no "siguen" a la sidebar y el cuerpo de entradas, y queda todo descorregido.

Las modificaciones que he hecho son ensanchar el blog hasta 950px, las entradas 600px y la sidebar 300px, además de añadirle una imagen en la cabecera.

Digo todo esto porque si alguien está interesado en esas medidas, puede pedirme por email el CSS de la plantilla, os rogaría que no me pidierais distintas medidas, pues ando apuradilla de consultas y lo de modificar las imágenes me lleva bastante tiempo (lo de los programas de dibujo no es lo mio). ;-)

NOTA
He pensado que sería más fácil para todos incluir en este post las modificaciones, así que allá van:

Busca esto en el código html de tu plantilla, está en la parte del CSS, ya sabes donde hay tantas {

/* ---( layout structure )---*/ y elimina todo lo que va entre eso y /* ---( main column )--- */

Después lo sustituyes por esto:

#outer-wrapper {
width: 950px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
background: url(http://img208.imageshack.us/img208/8859/tile1ln7.gif) ;
}
#content-wrapper {) ;
margin-left: 0px; /* to avoid the border image */
}
#main {
float: left;
width: 600px;
margin: 0px 0 0 0;
margin-top:30px;
padding: 0 0 0 1em;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
float: right;
width: 300px;
padding: 0px 25px 0 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
background: url(http://img486.imageshack.us/img486/4925/sidebarbgki0.gif) no-repeat 0 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* ---( header and site name )--- */
#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://img512.imageshack.us/img512/3415/nombretk6.jpg) no-repeat 0px 0px;
}
#header {
margin: 0;
padding: 25px 60px 35px 160px;
color: $pagetitlecolor;
background: url(http://img95.imageshack.us/img95/8970/bottomsillro8.jpg) no-repeat bottom left;
}
#header h1 {
font-size: 200%;
text-shadow: #81A75B 2px 2px 2px;
}
#header h1 a {
text-decoration: none;
color: $pagetitlecolor;
}
#header h1 a:hover {
color: #eee;
}

Ahora busca esto otro, lo verás siguiendo hacia abajo:

/* ---( footer )--- */

Un par de líneas debajo de eso está
#footer-wrapper { busca la línea de background: url y verás una url de imagen, sustituyela por esta:

http://img522.imageshack.us/img522/7039/bottomsashxp6.jpg

Dos líneas por debajo verás #footer { sustituye la url de la imagen por esta:

http://img524.imageshack.us/img524/7314/bottomsilljr6.jpg

COMPRUEBA CON LA VISTA PREVIA Y SI LO VES CORRECTO GUARDA CAMBIOS.