Ensanchar la plantilla Sound of Moto

[1] Iremos a la parte de editar HTML de nuestra plantilla.
Buscamos esta parte del CSS y cambiamos el valor de width, por ejemplo a 850px. Este cambio hace que se ensanche el "cuerpo" del blog.

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 850px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

[2] En este paso ensancharemos la parte de nuestras entradas, cambiando de nuevo el width, por ejemplo, a 500px.
#main {
width: 500px;
float: left;
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 */
}

[3] Vamos a ensanchar ahora nuestra sidebar, aumentando el valor de width a, por ejemplo, 290px.
#sidebar {
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);
width: 290px;
float: right;
color: $sidebarTextColor;
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 */
}

[4] En el código anterior de la sidebar, he añadido una imagen como la original de la plantilla (el fondo de rayas semitransparente) para que el texto no se "desborde" fuera del fondo. Es esta línea:
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);

Ejemplo de plantilla

0 comentarios:

Publicar un comentario