Vamos a tunear la dots

2008-05-01T12:13:00.000+02:00

Y vamos a añadirle una cabecera decente y hacerla un poco más ancha, como ves aquí.

Para lograrlo hemos de cambiar algunas cosas en el código.

Para que no sea demasiado lioso, voy a colocar el código que se ve y que tendremos que eliminar, en rojo, y el que hemos de añadir en azul. Lo que verás en negrita, no se toca.

Los cambios están copiados en el orden en que van apareciendo las cosas en el código.

¿Listos? ¡Vamos allá!

Empezando por la zona del CSS, que es la primera que vemos, lo primero que encontramos debajo de /* Page Structure es el #outer-wrapper donde verás
width:700px; es el ancho total del blog.
Lo cambiamos por 800 para que el blog sea tan ancho como la cabecera, con lo que la línea queda así: width:800px;

Más abajo encontrarás esto:
#header-wrapper {
display: none;
}

lo eliminas y pones esto en su lugar:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
}

Le sigue el #main-wrapper, la zona de las entradas, donde cambiamos el width:450px; por width:530px; y el padding:100px 0 20px; por padding:0 0 20px; para subir las entradas hacia la cabecera, de lo contrario entre ambos cabe un elefante.

Seguimos con #sidebar-wrapper {
width:200px; lo convertimos en width:250px;

#sidebar {
el original es así:

#sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px; width/* */:/**/180px;
width: /**/180px;
}

ha de quedar así:

#sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 200px -50px;
padding:0 10px 15px;
width:250px;
width/* */:/**/230px;
width: /**/230px;
}

En Title & Description, podemos mover de sitio el título y el subtítulo del blog. (este cambio es opcional, dependiendo de la cabecera que vayas a poner).

Al añadirle la zona de la cabecera, salen las letras a la izquierda.
Si las quieres centradas, o a la derecha como aquí, has de añadir esta línea text-align: $endSide; (para alinearla a la derecha) o text-align: center; (para centrarlas), en .Header h1 y en .Header .description antes de la llave de cierre }

(¡Cuidado! antes de poner $end-Side asegúrate de que en tu plantilla se usa esta definición. Si no ves en ningún sitio $endSide o $startSide, has de poner right).

Y ahora bajamos hacia la zona del HTML.

En la plantilla original vemos esto (debajo de <body> ):

<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>

<a href='#sidebar'>skip to sidebar</a>
</span>

Eliminas lo que ves en rojo y en su lugar pegas esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Escribe aquí el título de tu blog (cabecera)' type='Header'/>
</b:section>
</div>

Un poco más abajo verás esto

<div id='sidebar-wrapper'>
y un par de líneas más abajo esto:

<b:widget id='Header1' locked='false' title='el título de tu blog (Header)' type='Header'/>

Borra esta línea y ya puedes hacer vista previa.
Y si todo ha quedado como es debido, Guarda.

A tener en cuenta:
Si tenías alguna imagen añadida a la "cabecera" (el elemento que se veia arriba de todo, a menos que lo hubieras cambiado de sitio, en Elementos de la página en la columna lateral), al eliminar este último widget es muy posible que desaparezca, pero como en realidad lo has añadido antes, puede ser que lo veas al hacer vista previa.

Más adelante ya iré cambiando algunas cosas más de esta plantilla, dependerá de lo que me pidais.

Tuneando la dots

Vamos a tunear la dots