Rounders de 3 columnas

Algunos cambios respecto al original

2008-05-01T17:53:00.002+02:00

Como podrás apreciar le he hecho algunos cambios respecto a la imagen que hay en Ideas para plantillas.

Le he cambiado la cabecera y le he colocado la menubar debajo, aprovechando el crosscol, (la zona que blogger ha pensado que podemos necesitar para poner publicidad.

Si te gusta más así que como está en la foto y no vas a poner publicidad ahí, has de descargar la 2ª plantilla que hay allí.

Rounders de 3 columnas con 8 módulos

2008-04-12T19:30:00.004+02:00

Bueno, lo logré.

Llevaba tiempo queriendo hacer esta plantilla. Había probado con los otros modelos de la rounders y todos se me atascaban. Cuando lograba que la nueva sidebar se colocara en su sitio, quedaban tan pegaditas las columnas que no cabia ni un alfiler entre ellas y a la más mínima se caia.

Pero hoy ¡por fin! he logrado montar lo que deseaba: Una rounders con tres columnas, y con los elementos que la caracteriza de la sidebar repetidos y que se ve bien con los dos navegadores.

Como puedes ver la he tuneado un poco, a nivel de fondo, pero en principio es casi todo original.

Y digo casi, porqué he tenido que eliminar la cabecera original, ya que está incluida en el lote de las curvas de las esquinas. Así que he hecho este montaje con el original y se lo he colocado en la cabecera y, ya puesta, en el pie del blog.

Otras mejoras: la menubar, aunque la he tenido que colocar encima de la cabecera, o se caia la sidebar original, ya que los botones se empeñaban en empujar las columnas hacia el final y no he conseguido hacer que bajaran las columnas para dejarle sitio; la navbar se esconde; los elementos archivo y etiquetas no tienen números y he eliminado el no follow, (eso que hace que los links de los comentarios no cuenten en los buscadores).

¡Por cierto! con Internet Explorer la menubar se ve encima de la cabecera. Con Firefox se ve "EN" la cabecera, por lo que he tenido que modificar el margin-top de #header-wrapper para dejarle sitio a los botones en Explorer (lo he dejado en 42px y también el padding del título del blog en #header h1 y bajarlo un poco para que se viera bien con Firefox.

Ha quedado así: padding:10px 30px 5px;

Por otro lado le he añadido esta línea text-align: center; para centrar el título.

También le he quitado los subrayados a los enlaces, excepto a cuando pones el ratón encima.

Y me parece que esto es todo.

He guardado el código de la plantilla para subirlo a google pages y dejaré la imagen, y el código en Ideas para plantillas.

¡Ah! en el código no están las estrellitas del fondo.

De todas formas explicaré como lograrlo sin cambiarla.

Podrás verlo en las siguientes entradas.

Cuando entres verás el truco de la página que muestra otra, pero como este truco ha de personalizarse, lo habré puesto después.

Ensanchar el blog para poner la nueva sidebar

2008-04-12T19:00:00.005+02:00

Para añadir la nueva sidebar, a este modelo de la Rounders, has de empezar por borrar las 4 direcciones de los corners de las zonas que abarcan todo el blog.

En otras plantillas la cabecera y el footer hacen la guerra por su cuenta, y anque ensanches el blog, estas dos zonas no lo hacen a menos que les cambies las medidas.
Pero en este modelo, al ensanchar el blog se ensanchan estas dos zonas y como las imágenes no lo hacen, se ve raro, pues junto a la imagen redondeada aparece un rectángulo verde.

He quitado las 4 direcciones que digo y al mismo tiempo ha desaparecido la imagen esa que hace aguas de la cabecera.
Y para no dejar el recuadro verde, he preparado un montaje con parte de aquella imagen. El resultado es este que ves aquí. Si vas a hacerlo y quieres poner la misma imagen, la dejo aquí de muestra.

Pínchala con el botón derecho y en propiedades podrás ver su dirección.

Las direcciones a quitar son las que hay en estos 4 sitios:
En /* Blog Header la que hay en #header-wrapper y la que hay en #Header
En /* Footer la que hay en #footer-wrap2 y la que hay en #footer.

Una vez eliminadas estas direcciones procedemos a modificar la medida del blog.
En #outer-wrapper cambiamos el 740 por 995.

También le modificamos el margin a #main-wrap1 para que no se pegue a la sidebar.

Esta línea: margin:15px 0 0;

la dejamos así margin: 15px 15px 0;

Y modificaremos también el Layout, para que cuando entres a Añadir elementos, las columnas estén bien colocadas.

En esta zona: body#layout #outer-wrapper {

cambiaremos el 730 que hay en width por 1000

Aquí, si quieres puedes hacer vista previa.
Verás que la zona de las entradas se ha ido a la izquierda y que entre esa zona y la sidebar hay un espacio vacío. No te asustes, no es grave. Es el espacio que necesitamos para colocar la nueva sidebar. No guardes todavía.
Tanto si le has colocado la imagen en la cabecera como si no, vamos a ponerle la nueva sidebar.

Continúa en la siguiente entrada.

La nueva sidebar

2008-04-12T18:30:00.003+02:00

Ya hemos ensanchado el blog y dejado espacio para colocar la nueva sidebar.

Para hacerlo has de copiar el código de #sidebar-wrap entero, desde # hasta } y pegarlo debajo de esta última llave.

Una vez pegado la renombramos (newsidebar) y en float cambiamos su ubicación de EndSide a startSide, (¡cuidado! si en tu plantilla pone right has de poner left), con lo que el nuevo código se verá así:

#newsidebar-wrap {

width:240px;

float:$startSide;

margin:15px 0 0;

font-size:97%;

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 */

}

Ahora bajamos al sector del HTML y localizamos el código de la sidebar.

Fíjate que empieza con <div id='sidebar-wrap'>

y termina con un solo </div>

y entre esas dos líneas hay dos trozos de código: el que corresponde a sidebartop y el que corresponde a sidebarbottom.

Son los dos módulos que forman la sidebar en estas plantillas.

Has de copiarlo íntegro y pegarlo encima de <div id='main-wrap1'><div id='main-wrap2'>

Una vez pegado has de modificarle los id y borrarle los b:widget para que no te de error y dejar el código así:

<div id='newsidebar-wrap'> <div id='newsidebartop-wrap'> <div id='newsidebartop-wrap2'> <b:section class='sidebar' id='newsidebartop'> </b:section> </div></div>

<div id='newsidebarbottom-wrap1'> <div id='newsidebarbottom-wrap2'> <b:section class='sidebar' id='newsidebar' preferred='yes'> </b:section> </div></div> </div>

Una vez hecho esto, haz vista previa y si el blog carga bien, guarda plantilla.

No verás cambios.

Al no tener ningún elemento en la nueva sidebar no verás nada en ella, salvo que decidas dejar alguno de los elementos b:widget allí y borrarlos de la sidebar original.

También puedes ir a Elementos de la página y añadir un par de listas de vínculos, aunque solo le pongas a cada una un enlace a tu blog. Ya lo modificarás después.

En ambos caso los verás, pero quizá no tengan fondo.

No te asustes. Aún falta un paso.

El siguiente paso es hacer que los módulos de la nueva sidebar tengan las mismas propiedades que los de la original.

¿Que te parece si lo vemos en la siguiente entrada?

¡Venga! vamos a tomarnos un descanso.

Añadir las propiedades a los elementos de la nueva sidebar

2008-04-12T18:13:00.003+02:00

En el CSS del código de la plantilla están definidas las características de los elementos de la sidebar.

Has de copiarlos, y pegarlos debajo, renombrándolos, para que los de la nueva sidebar sean como los de la original.

Los códigos los encontrarás en dos sectores.

Los que corresponden al módulo de arriba, están debajo de los códigos del perfil.

Son todos estos (como el código es muy largo y una vez pegados solo has de cambiar el nombre, te pondré los títulos; en letra normal el original y en negrita cómo los has de llamar):

#sidebartop-wrap / #newsidebartop-wrap
#sidebartop-wrap2 / #newsidebartop-wrap2
#sidebartop h2 / #newsidebartop h2
#sidebartop a / #newsidebartop a
#sidebartop a:hover / #newsidebartop a:hover
#sidebartop a:visited / #newsidebartop a:visited

Como ves se trata de añadir new delante de cada título. El resto no hay que tocarlo.

Luego buscas los códigos de sidebarbottom, que están un poco más abajo, debajo de .widget-content y van desde #sidebarbottom-wrap1 hasta .sidebar p y haces lo mismo, copias, pegas debajo y renombras todos los sectores poniendo new delante del nombre de cada uno de ellos.

Una vez hecho esto haz vista previa.

Y ya verás que los módulos de la nueva sidebar tienen el mismo aspecto que los de la original.

Y si quieres añadir más módulos, en Tuneando la rounders encontrarás las instrucciones para hacerlo.

Tan solo habrás de tener en cuenta que, si quieres añadírselos a las dos sidebars, tendrás que repetir lo que pone allí, pero con los códigos de los modulos de la newsidebar.

Una última cosa:

Si quieres poder modificar el color del fondo desde Fuentes y colores, copia la primera variable que hay en la lista y cámbiale el nombre y la descripción.

En name lo dejas en bgColor (se llama mainBgColor) y en description lo dejas en Background Color, (pone Main Background Color).

Después en body borra los números que hay en background: y escribe en su lugar $bgColor. (Vigila de no borrar el punto y coma final).

Y ya podrás modificar el color desde Fuentes y colores.

Si quisieras ponerle una imagen de fondo, en su lugar pones: url(la dirección de la imagen) repeat fixed; (repeat para que se repita en todo el blog y fixed para que el blog se deslice sobre el fondo).

Si la imagen es como la de aquí, que no tiene fondo has de poner las dos cosas, el color y la dirección, en este orden, dejando un espacio entre ambos, con lo que la línea quedaría así:

background: $bgColor url(dirección) repeat fixed;

Y Recuerda: Haz siempre vista previa antes de guardar nada.