Tuneando la rounders

Esta plantilla con 3 columnas

2008-04-12T12:51:00.005+02:00

Aunque ensanchar esta plantilla es muy difícil, lo que si que he conseguido es ponerle una nueva sidebar, con menubar incluida, al modelo 4 de la rounders, a costa de sacrificar las redondeces de la cabecera y del pie del blog.

La menubar he tenido que ponérsela encima de la cabecera, ya que no lograba que las columnas se separaran de ella y al poner la menubar se caia una de las sidebar.

Tal como la he dejado se ve bien en los dos navegadores principales, Internet Explorer y Firefox, aunque para que la sidebar se acomodara en IE he tenido que bajar la cabecera.

En Firefox la menubar se ve "EN" la cabecera. En explorer se ve encima.

Como el dibujo que tiene la rounders4 va integrado en los corners, he montado una variante de dicho dibujo.

Puedes ver el ejemplo aquí. Y si pasas el ratón por la esquina superior derecha verás un avance.

Y en Ideas para plantillas he dejado el código para que puedas descargártelo si lo prefieres.

Los enlaces en esta plantilla

2008-04-04T11:55:00.002+02:00

Esta plantilla no tiene definida la forma en que se muestran los enlaces, con lo que todos aparecen subrayados.

Para quitarles esta línea has de decirle que no la muestre.

Para ello localiza los códigos de los links que empiezan así: /* Links

Y añade esta línea: text-decoration:none; en a:link a:visited y a:hover pero si quieres que se siga viendo cuando pones el ratón encima, para que se note que es un enlace, en a:hover añades text-decoration:underline;

Y desaparecen las líneas de subrayado.

Ensanchar esta plantilla

2008-04-04T11:15:00.003+02:00

Esta plantilla resulta muy complicada de ensanchar si quieres que mantenga su aspecto.
El problema está en los "corners".

Si miras el código de tu plantilla verás que hay varias direciones url con este nombre. Hay una arriba y otra abajo de la cabecera (Header), una arriba y otra abajo de la zona de las entradas y una arriba y otra abajo de los módulos de la sidebar (sidebartop y sidebarbottom).

El problema de estas direcciones es que son líneas que acaban en forma redondeada y que no se expanden, con lo que si ensanchas cualquiera de estas zonas, las líneas que las enmarcan conservan sus medidas, y el blog adopta un aspecto extraño. Puedes ver aquí una muestra de esta plantilla ensanchada.
Incluso según qué color de fondo le pones, los corners dejan de verse bien y les aparece una especie de sombra.

Por ello si necesitas más espacio en tu blog, ya sea en la zona de las entradas o en la sidebar, mi consejo sería: o eliminas las direcciones de la zona a ensanchar para poder hacerlo, con lo que perderá su aspecto redondeado, o modificas las imágenes que la enmarcan, o cambias de plantilla.

Si eres capaz de modificar las imágenes, en el blog que he enlazado al principio de esta entrada puedes ver donde están dichas imágenes en el código.

Si te decides por la última opción y tienes muchas cosas en el blog, aquí he dejado un sistema que se me ocurrió para que puedas hacerlo sin perder nada.

Es un poco laborioso, pero bastante menos que volver a copiar todo lo que tengas en tu blog.

Cambio de look

2008-03-17T21:42:00.002+01:00

Aunque este blog no se actualiza muy a menudo, (tan solo cuando he de dejar alguna explicación de algo especialmente de esta plantilla) hoy me ha dado por cambiarle un poco el look.
Por pasar el rato y mantener los dedos ágiles.

Los botones que hay bajo la cabecera.

2008-02-10T22:52:00.001+01:00

Hoy he descubierto este truco en el blog de Rosa y lo he colocado en Tuneando el blog.
Es la menubar. Un elemento Lista de vínculos, configurado para que los links aparezcan horizotalmente, no verticalmente como en los que ponemos en las barras laterales.
Ahora se me ha ocurrido ponerlo aquí para probar como se vería en esta plantilla y al hacerlo me han surgido un par de problemas.
En primer lugar, al ponerlo tal cual está en el otro blog, la columna lateral se ha ido al fondo del blog.
Así que he cambiado un poco los datos del margen de separación de la cabecera y el resto del blog y en /* Blog Header en la zona #header-wrapper la línea del margen la he dejado así:
margin:22px 0 20px 0; La original era así: margin:22px o o o;
Como ves he aumentado 20 píxels la separación.
Una vez hecho esto he colocado el código para el módulo de los botones, la menubar.
Pero antes tienes que averiguar cuantas listas de vínculos tienes en tu blog.
Las verás en el código, sin expandir elementos, con esta forma:
<b:widget id='linkListX'...>
Donde X corresponde al número y los puntos suspensivos al resto, título si lo tiene, etc.

Así que copias este trocito de código

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkListX' locked='true' title='Menubar' type='LinkList'/>
</b:section>

justo debajo de este

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Titulo de tu blog (cabecera)' type='Header'/>
</b:section></div>

Cambiando la X por el número que le corresponda. Si no estás segur@ pon un número alto, 20, 30, o algo así.
Una vez pegado este, sube a buscar esta línea

]]></b:skin>

y justo encima pegas este código:

#menubar h2 {display:none;
margin:12px 0 20px 0;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
background-color: $titleBgColor;
border: outset 2px #ffccff;
}
#menubar a:link, #menubar a:visited, {
padding: 5px;
display: block;
color: #FFCCFF;
}
#menubar a:hover {
color: #CCFF00;
}

Vista previa y si la página carga bien, (no verás cambio alguno todavía), guarda plantilla.
En Elementos de la página encontrarás el nuevo elemento colocado debajo del título.
Rellénalo con los enlaces a los sitios que quieras poner ahí, ya sean etiquetas de tu blog, u otras páginas (yo aquí dejo enlaces a mis otros blogs), y cuando le des a ver blog, verás los botoncitos ahí, si todo ha salido bien.
---
Una vez que tengas ya los enlaces a la vista puedes reconfigurar el código a tu gusto, variando colores y otros detalles. Te explico como:
Yo le he puesto como color de fondo a los links #menúbar li backcground-color el mismo que tiene la cabecera y con el border: outset 2px #ffccff le he dado la forma de botón el color es el mismo que tiene el fondo del blog. Si el tuyo es distinto, con ponerle otro lo arreglas.
Los demás colores representados por 6 cifras puedes cambiarlos a tu gusto.
Vista previa a cada cambio y guárdalos cada vez que uno te convenza.

Tuneando la rounders

2007-11-02T11:30:00.000+01:00

Esta plantilla se compone de tres partes: el fondo de página, la zona del blog y la barra lateral.

Como puedes ver he modificado unas cuantas cosas en ella, le he cambiado el color del fondo y le he añadido una imagen, he duplicado los módulos de la barra lateral y, además, el 2º módulo tiene colores personales, diferentes a los del otro módulo.
Nota: He utilizado la rounders 2 para este blog.
Por lo que he visto, la Rounders 4 ya tiene incluida la opción de darle a cada módulo un color diferente.
Y la 3 tiene los colores de las fuentes del 2º módulo personalizadas.

Si te apetece hacer alguno de estos cambios en tu plantilla Rounders, en las siguientes entradas verás la manera de hacerlo.

Fíjate que he utilizado lo que podríamos llamar código de colores para resaltar lo que debes modificar.

Así, el rojo destaca partes del código original ya existentes, el azul lo que has de escribir para realizar los cambios, el verde los datos a incluir, (direcciones o números de los colores), y en negro/negrita como queda finalmente el código.
Consejo: Antes de modificarlas, mira en Fuentes y Colores si ya hay variables que se denominen Sidebar Bottom o Bottom Sidebar.
---
Aviso: Estas modificaciones están hechas en una plantilla "virgen", o sea, sin apenas nada añadido y con tan solo una entrada que hice para empezar y que he eliminado.
No se si funcionará igual de bien en un blog que tenga muchas cosas, o en una plantilla ya modificada.

---
Consejos: Si tienes ya algunos elementos en los módulos originales, añades módulos nuevos y quieres cambiar los elementos de sitio, es preferible que, en vez de moverlos, los copies en elementos nuevos de los módulos añadidos y los elimines de los antiguos, pues, a veces, en plantillas con sidebar modificada, al mover algo desaparece lo que dejas.

Guarda tu plantilla si vas a realizar algún cambio importante, descargándola en tu ordenador desde el botón de arriba de la zona Edición de HTML, así podrás recuperarla si algo sale mal.

Haz siempre vista previa antes de guardar algún cambio.
---
Si quieres ver más trucos para aplicar a tu plantilla, como, por ejemplo, esconder la navbar como aquí, ven a ver mi blog principal de ayudas.

Y si te ha quedado alguna duda, o necesitas que te eche una mano, contáctame.

---

El fondo de la página

2007-11-02T11:24:00.000+01:00

Para cambiarle el color al fondo has de ir a Edición de HTML y donde pone body { (que está justo después de todos los Variable name), verás que pone background:#ccc;

[Nota: Según el modelo de rounders que hayas elegido, en vez de ccc puede que ponga otra cosa].

Para cambiar el color del fondo has de borrar las letras que hay después del símbolo # y poner el código hexagesimal del color que quieras. En ésta página puedes encontrarlos.

Si además quieres añadirle una imagen que tenga el fondo transparente, como la que ves aquí, has de añadir ésto antes del punto y coma: url("la dirección de la imagen")

Si es una imagen pequeña has de añadir un espacio y repeat y si quieres que no se mueva con el blog has de añadir un espacio y fixed.

Quedaría así: background:#número url("dirección") repeat fixed;

Si quieres poner de fondo una imagen que ocupe todo el espacio y, por tanto, no se vaya a ver el color del fondo, borra ésto: #número y pega la palabra url a los dos puntos.

Quedará así: background:url("dirección") repeat fixed;
[Nota: Si prefieres que el fondo se mueva con la página no pongas lo de fixed y si la imagen ocupa todo el espacio, no hace falta que pongas lo de repeat].

El blog

2007-11-02T11:18:00.001+01:00

Como puedes ver, aquí no he modificado nada, pues en Colores y Fuentes tenemos suficientes variables para combinar colores y personalizarlo.
En algunas plantillas se puede hacer que el blog ocupe todo el ancho de la página.
En ésta lo probé pero no me convenció como quedaba.
La barra del título, al ser redondeada, se alarga de forma rara, el blog se coloca a la derecha del todo y la sidebar se descoloca, dando al conjunto un aspecto extraño, así que, si has elegido esta plantilla, yo no tocaría sus medidas, pero como por probar nada se pierde, tu verás.
Eso si, haz SIEMPRE una vista previa antes de guardar algún cambio.
De todas formas ayer vi en El escaparate de Rosa, un tutorial para añadir una sidebar a la Rounders 3.
No se si funciona en los otros modelos y, de momento, no lo he probado.
Si te apetece ver el truco, sólo has de pinchar aquí.

Actualizado: 4-abril-2008.

He ensanchado un poco la zona del título de la entrada, que quedaba muy encajonado, modificando el paddíng de .post h3 { y donde ponia padding:2px 14px 2px 29px; he cambiado el 2 por un 6 en los dos sitios con lo que ha quedado así: padding:6px 14px 6px 29px;

Por otro lado he modificado la forma en que el título se muestra cuando pones el ratón encima modificando las propiedades de los links.

Los módulos de la barra lateral

2007-11-02T11:12:00.003+01:00

La barra lateral, de origen, tiene dos módulos.

El módulo de arriba, al que verás descrito como Top Sidebar o topSidebar en la parte del CSS y además como id='sidebartop en la parte del HTML y el módulo de abajo, descrito como Bottom Sidebar o bottomSidebar en el CSS y como id='sidebar en el HTML.

Aquí, para entendernos, llamaré al de abajo 2º módulo.
Puedes duplicarlos para separar temas.

---
Para ello, has de localizar, en la parte del código html, la que corresponde a su descripción, copiarlos y pegarlos debajo.

Haz Vista previa para asegurarte de que el código es correcto, pues de momento no los verás.

Pero antes de hacer vista previa tendrás que cambiarles el nombre a los nuevos módulos, añadiendo un número, como ves en el ejemplo, abajo, detrás de cada id' y borrar de la copia la descripción del widget que tengas añadido en el original. (Me ha costado varias pruebas y mensajes de error ver qué estaba haciendo mal).
---
Una vez hecho ésto, y después de hacer vista previa para asegurarte de que funciona, puedes guardar plantilla.
Como te digo, al principio no verás ningún cambio. Pero si vas a Elementos de la página, verás que tienes repetidos los dos módulos, pues tendrás 4 Añadir elemento.
Añade cualquier cosa en cada uno, por ejemplo, las etiquetas en uno y el logotipo en el otro y los verás aparecer.
Pero...
Pero tendrás que añadirle los atributos de los dos módulos originales.
Para añadírselo has de ir de nuevo a Edición de HTML y en la parte del CSS buscar el código correspondiente a los módulos.
Verás que hay varios apartados que empiezan por #sidebartop y más abajo algunos más que empiezan por #sidebar
Has de copiar y pegar todos los apartados que empiecen así y añadir el 1 (o el número que les hayas dado), en todos ellos, a fin de que se repitan, en los nuevos, los parámetros de los originales.
Si quieres poner más módulos de éstos, solo has de repetir estas operaciones, cambiando el 1 por un 2, o un 3, etc.
(Nota: El orden en que los pegues en la parte html del código va a generar el orden en que aparecerán, así si copias un sidebarbottom, debajo de otro, se verán seguidos dos módulos iguales. En la zona del CSS, puedes pegar los bloques de descripción de parámetros de los nuevos debajo mismo de las descripciones del original.)

---

Códigos a copiar

---

<div id='sidebartop-wrap'>
<div id='sidebartopwrap2'>
<b:section class='sidebar' id='sidebartop'>
</b:section>
</div></div>

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

---

Cambios a realizar en el nuevo código HTML

---

Esta línea

<b:section class='sidebar' id='sidebartop'>

ha de verse así

<b:section class='sidebar' id='sidebartop1'>

y esta

<b:section class='sidebar' id='sidebar' preferred='yes'>

así

<b:section class='sidebar' id='sidebar1' preferred='yes'>

Si te resulta más cómodo, ya que en el código de tu plantilla aparecerán los elementos que tengas agregados a cada módulo, puedes copiar el código de aquí y pegarlo en tu blog. Asegúrate antes que estas líneas están en tu código y si no varian pégalas. Luego modifica la id tal como explico.

Color de fondo del módulo de abajo

2007-11-02T11:06:00.001+01:00

En el original de esta plantilla, el 2º módulo toma el mismo color que el fondo del blog.
Para cambiar ésto y hacer que puedas ponerle un color individual, en la zona de los Variable name localiza la variable que corresponde a topSidebarBgColor.

Copia el variable completo y pégalo al final del grupo, (los variables están separados por grupos dependiendo de a qué zona de la plantilla se refieren).
Cambia el nombre por bottomSidebarBgColor y en la descripción cambia también Top por Bottom, busca el color que quieras que tenga y cambia el número que haya al final, detrás de value:# por el del color elegido.

El código de la variable es así:
<Variable name="bottomSidebarBgColor" description="Bottom Sidebar Background Color" type="color" default="#999" value="#número">
Después baja hasta que encuentres la parte del código CSS con el nombre Sidebar Bottom, y donde pone background:$mainBlogBgColor, cambia lo de mainBlog por bottomSidebar.
Cuando vuelvas a entrar en Fuentes y Colores verás que se ha añadido la nueva variable a la lista que había, para que puedas modificar el color de estos módulos desde allí.

Cambiar los colores de las fuentes en el módulo de abajo

2007-11-02T10:57:00.000+01:00

Para que este módulo tenga colores propios, distintos a los del resto del blog, tanto en la fuente, o letras de lo escrito que no sean enlaces, como en los enlaces seleccionados y visitados, has de copiar todos los Variable name que indiquen topSidebarxxxcolor, (xxx corresponde a la definición), signos de apertura y cierre incluidos, y pegarlos al final de la lista de variables de la sidebar, cambiando todos los top por bottom, respetando mayúsculas y espacios.
Después baja a buscar las órdenes en los bloques de descripción de los módulos de la sidebar.
Para el color del texto en sidebatop-wrap, copia la última línea que es así
color:$topSidebarTextColor; pégala al final de la zona sidebarbottom-wrap y cambia top por bottom
Para los enlaces, más abajo verás esto:
#sidebartop a { color: $topSidebarLinkColor;}#sidebartop a:hover { color: $topSidebarVisitedLinkColor;}#sidebartop a:visited { color: $topSidebarVisitedLinkColor;}
Cópialo y pégalo justo debajo de la llave de cierre, borra lo de top de manera que solo ponga #sidebar (es su id) y los enlaces del 2º módulo también tendrán su propio color.
Fíjate que en estos casos solo realizas el cambio en la primera parte, porqué le estás diciendo que el nuevo módulo va a tener (en este caso concreto) el color de los links del módulo de abajo o bottomSidebar, que es como hemos "bautizado" a la variable.

Nota: las separaciones son solamente 1 espacio, (no se por que razón sale tan separado), ya lo verás bien el código original cuando entres en Edición de HTML.

Muy importante:

No olvides ninguna llave de cierre, ni ningún símbolo o signo o no funcionará.