Antes de aplicar algún cambio

Asegúrate de que tu plantilla es como ésta ya que las definiciones no son las mismas en todas.
Puedes verlo en Diseño/Edición de HTML , como te muestro aquí. El modelo es lo que pone junto a Name.
Hay varios modelos de rounders, aunque todos son muy parecidos.




Si no fuera ésta, mira en este blog.
En la sidebar de la derecha hay una lista de todas las plantillas que he modificado.

El nombre del blog es el de la plantilla.

sábado 12 de abril de 2008

Esta plantilla con 3 columnas

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.

viernes 4 de abril de 2008

Los enlaces en esta plantilla

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

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.

lunes 17 de marzo de 2008

Cambio de look

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.

domingo 10 de febrero de 2008

Los botones que hay bajo la cabecera.

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.

viernes 2 de noviembre de 2007

Tuneando la rounders

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

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].