sábado 15 de marzo de 2008

Muestra de la mínima a tres columnas

Aquí tienes la muestra de las plantillas que he dejado, basadas en la mínima pero con tres columnas.
Como puedes ver es totalmente operativa.

A la menubar puedes cambiarles los colores desde Fuentes y Colores, y hacer tu propia combinación.
Y si necesitas hacer algún cambio más, al ser una plantilla de blogger, puedes hacérselo sin temor.

Por otro lado aprovecharé para explicar como se hace para poner la segunda columna lateral en esta plantilla.
Es muy sencillo. Diseño/Edición de HTML.

Lo primero es hacer más ancho el blog, así que has de buscar y cambiar las siguientes medidas (en el orden en que las vas a encontrar en el código):

#outer-wrapper { width: 950px;
#main-wrapper { width: 440px;
#sidebar-wrapper { width: 220px;

Puedes varíar el 440 y 220, pero teniendo en cuenta que le has de sumar los 220 que tendrá la nueva sidebar, entre las dos columnas y el centro (main) no puede sobrepasar los 880, el resto, hasta los 950 de outer-wraper, son para los espacios entre columnas. Si te pasas, en explorer o en Firefox una de las dos columnas se verá caida, y aparecerá debajo de las entradas.

Una vez hecho esto, copia íntegramente el trocito de código de #sidebar-wrapper { desde esta línea hasta aquí } todo incluido y pégalo, encima o debajo (es indiferente).
A lo que has pegado le has de cambiar algunas cosas que han de quedar así (remarco en rojo los cambios):

#newsidebar-wrapper {
float: $startSide; (ver NOTA al final)

Una vez copiado y hechos estos arreglos, baja a la zona del HTML y sin expandir artilugios busca esto

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/></b:section> </div>

Pegale encima este código

<div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div>

Bórrale esta línea al código de la sidebar que ya tenías, que está debajo del que has buscado antes,

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

a fin de no repetir el perfil, y haz vista previa.

Si todo ha salido bien, deberías ver el perfil en la nueva columna lateral, a la izquierda.

Si ves que las columnas quedan pegadas, añade en #main-wrapper y en #sidebar-wrapper esta línea: padding-$startSide: 6px;
Vuelve a hacer vista previa y guarda si todo está bien.

NOTAS:
Si tu plantilla no usa eso de $start side, has de poner left