Antes de aplicar algún cambio a tu plantilla

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.




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 15 de marzo de 2008

Centrar el título de las entradas

En el bloque del código que empieza así .post h3 {
añades esta línea:

text-align:center;
(funciona igual en plantillas nuevas y antiguas, solo has de vigilar que entre los dos puntos y center NO hay espacios.
Vista previa y guarda.

Scribe a tres columnas

Acaban de preguntarme si se puede poner una nueva sidebar a esta plantilla.
He hecho la prueba y si, se puede.
No se que tal funcionará en un blog que tenga modificaciones, pero poder se puede.
En Ideas para plantillas verás el código de la plantilla a tres columnas. Puedes descargarlo, guardándolo en tu pc y luego abrirlo para ver los cambios que hay respecto al de tu plantilla.
Los más importantes son:
Poner el ancho en 1000px en todos los sitios donde pone 700px. (outer-wrapper, main-top, main-bot y wrap2) y eliminar de los tres últimos la dirección del background dejándole solo el color para quitar esa línea amarilla que le da el aspecto de pergamino, pero que al ensancharla no se va al final del espacio que ocupan las tres columnas, sinó que se queda al final de las entradas, dándole un aspecto manchado al blog. (Ten cuidado de no borrar el punto y coma final).
Poner el width del #main en 400px.
Añadir esta línea: padding-$startSide: 10px; debajo del padding existente.
Poner el float en $startSide. (Ver nota al final)
Poner el width de #sidebar en 220px.
Añadir, esta línea: padding-$startSide: 10px; debajo del padding existente.
Copiar el código del CSS de #sidebar y pegarlo debajo renombrándolo como #newsidebar
Poner el float como $endSide.
Copiar el HTML de la sidebar y pegarlo debajo de este:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
renombrándola como newsidebar para que quede así:

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

Vigila, si copias tu propio código, caso de que fuera distinto por ser una plantilla de las antiguas, que en el código de la sidebar estarán también los b:widget de todo lo que tengas en ella.
Si quieres un consejo, bórralos todos cuando lo hayas pegado, dejando solo el del perfil b:widget id='Profile1' y lo borras del código de la sidebar que ya tenías, así no te dará error y verás el Perfil en la nueva sidebar cuando hagas vista previa.

NOTA FINAL
Si tu plantilla es de las antiguas, los float los verás como left, right y center.
Pon el main en center, la sidebar la dejas en left y la newsidebar en right.
Otros arreglos: puedes verlos en esta plantilla.

miércoles 13 de febrero de 2008

Los botones de la cabecera

Esta barra que ves con botones es la menubar un elemento "lista de enlaces" configurado de forma que los links aparezcan horizontalmente.
La explicación original está en esta entrada de Tuneando el blog, pero aquí te dejo el código de estos que ves.
Para colocarla en un blog con esta plantilla, has de entrar en Diseño/Edición de HTML y sin expandir elementos has de buscar este trocito de código:

<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>


y justo debajo pegar este

<b:section class='menubar' id='menubar'
maxwidgets='1' showaddelement='yes'>

<b:widget
id='LinkListX' locked='true' title='Menubar' type='LinkList'/>

</b:section>
cambiando la X por el número que corresponda en las listas de enlaces. (Para saber cual has de poner, mira el código, busca las linkList que hay, las verás así linkList1, linkList2, etc. y pon un número que no aparezca.
A continuación, sin hacer todavía vista previa, busca esta línea, (está un poquito más arriba).

]]></b:skin>

y encima pegas esto:

#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
background-color: #990033;
border: outset 2px #ff00cc;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: #ffffff;
}
#menubar a:hover {
color: #660000;
background-color: #66ff33;
}

Ahora ya puedes hacer vista previa y si la página carga bien (no verás todavía ningún cambio), guarda plantilla.
Una vez guardada, entra en Elementos de la página y allí verás la Menubar.
Pon los enlaces que quieras que se vean aquí, y guarda cambios.
Cuando entres a ver blog, ya verás los botones.
Puedes modificar los colores a tu gusto, cambiando los números por los del color que quieras.

viernes 2 de noviembre de 2007

Tunear la scribe

Como puedes ver esta plantilla es totalmente personalizable.
Para cambiarla de aspecto, tal y como ves aquí, has de variar diversas cosas en el codigo, en la parte del CSS, o sea, al principio.
Voy a explicarte paso a paso qué debes cambiar.
Los dibujos que he puesto aquí, han sido colocados para que una amiga, que tiene un blog para que su hija de dos añitos, con síndrome de Down, pueda "explicarnos" sus vivencias, vea como quedaría.
Se que ella tiene esta plantilla, así que he querido darle una idea.
Dicho esto, vamos a ver qué cambios has de hacer para que tu plantilla scribe no parezca una scribe.
---
Esta plantilla tiene dos partes, el fondo de la página y el fondo del blog.
Las analizaré por separado y explicaré como tunear cada una de ellas.
En el fondo de la página puedes hacer dos cosas, o poner una imagen sobre un fondo de color, (como he hecho yo), o poner un fondo que abarque toda la página, ya sea a base de repetirse, o porque tenga el ancho de ella. Explicaré los dos sistemas.
Verás que he usado un código de colores para describir los cambios que has de hacer.
El rojo representa lo que ya existe en el código, el azul lo que tienes que añadir, el verde los datos, (números de los colores y direcciones de imágenes) y el negro como ha de quedar el código que modifiques.
---
[Nota final: Estos cambios los he realizado con el blog "virgen". No te garantizo que salgan bien en un blog con muchas cosas, y sobre todo en una plantilla ya modificada, así que, por tu bien, haz siempre vista previa antes de guardar, y ves guardando los cambios uno a uno.
Cosa que cambies, si funciona, cambio guardado.]
---
Para ver más trucos puedes visitar mi blog de ayudas.
---
Para consultas mándame un mail
---

Imagen con fondo de color

Entra en Diseño/ Edición de HTML.
Después de la sección de Variables, que indican qué cosas se pueden modificar desde la pestaña Fuentes y Colores, y después de la línea -------*/ empieza la sección a modificar.
Verás que pone body y una llave como ésta {
Debajo hay unos parámetros. La última línea es la que nos interesa.
Esta línea empieza con background:# y a continuación hay un número y una dirección escrita así url("dirección").
El número es el del marrón del fondo y la dirección corresponde al dibujo.
Para cambiarlo, borra la dirección que está entre las comillas, pero deja el resto de momento, entra en cualquier página donde haya un código de colores, (yo uso ésta), y cambia el número que hay por el del color que quieras.
[Consejo: Abre la página de los colores en otra pestaña o ventana, para poder ir haciendo pruebas.]
Haz una vista previa cada vez que pruebes un color y cuando encuentres el definitivo guarda plantilla. (Siempre vas a poder volver a modificarlo).
Pega, entre las comillas, la dirección del dibujo que quieras que se vea, haz vista previa y si te gusta guarda.
Si el dibujo es pequeño, como Campanilla, después del paréntesis de cierre ) dejas un espacio y escribes repeat y si quieres que quede fijo y el cuerpo del blog se mueva sobre el fondo, como aquí, deja un espacio y escribe fixed
Borra todo lo que no sea ésto y que esté antes del ; de cierre.
Quedaría más o menos así: background:#número url ("dirección") repeat fixed;
Y como siempre digo, Vista previa antes de guardar.
---
[Notas: Recuerda que el fixed es opcional, solo has de ponerlo si quieres que no se mueva, como hace el fondo de aquí.
Si quitas el número pero no pones ninguno en su lugar, el fondo quedará blanco].
---

Fondo que cubra toda la página

El sistema es parecido al anterior, pero tendrás que borrar el número del color y el signo # que le precede, dejando la palabra url pegada a los dos puntos.
Si la imagen es pequeña, deja un espacio detrás del paréntesis de cierre y escribe repeat y si quieres que quede fija, espacio y fixed.
Quedaría así:
background:url ("dirección") repeat fixed; (si hay que repetir la imagen)
background:url ("dirección") no-repeat fixed; (si no hay que repetirla).
No te olvides ningún signo, punto y coma, espacios, guiones, etc. o no funcionarán los cambios.

El fondo del blog

El fondo del blog, (o para ser exactos de la zona útil), en la plantilla original, es la parte amarilla del centro que tiene una imagen colocada sobre un fondo de color.
Alrededor de esa imagen queda un marco que, por ser del mismo color que el fondo general, al principio apenas si se nota. Pero, cuando cambias el color del fondo de la página se distingue y según el color que hayas elegido no queda bien.
Empezaremos por cambiarle el color a este "marco".
Sigue bajando en el recuadro del código hasta la siguiente zona, encabezada por Layout.
Debajo de la línea ---*/ pone #outer-wrapper {y debajo más parámetros. Veámoslos.
background-color:#número; es el color que hay debajo del dibujo, del que solo se ve la línea que enmarca el cuerpo del blog (la que aquí ves de color rosa), puedes cambiar la marrón de serie por el color que prefieras.
border-left:1px solid #número; es la línea que enmarca ese fondo por la izquierda, (aquí es roja), eso de 1px es el grosor de la línea, a número mayor, mas gruesa, la de aquí esta en 2.
solid es el estilo de línea. Hay varios estilos, solid es la línea recta, dotted son puntitos, dashed rayitas, etc. Si quieres ver como son y cuantas hay, antes de decidirte, aquí verás un ejemplo de todas.
border-right:1px solid #número; es la línea que lo enmarca por la derecha, (aquí es roja y discontinua).
También puedes quitar este marco, simplemente borrando los parámetros y escribiendo none en cada una de las tres líneas, o poniéndole el mismo color que al fondo de la página, si has elegido esta opción.-
--
El dibujo del fondo del blog.
Un poco más abajo hay tres direcciones.La primera en #main top, la segunda en #main bot y la tercera en #wrap2.
Con la primera se cubre una línea arriba del todo, la segunda abajo del todo y la tercera en el resto del blog.
Cambia cada una de ellas por la tuya, haz vista previa. Si es más estrecha que la zona a cubrir, pones repeat. Si tiene el mismo ancho, has de poner repeat-y para que se vaya repitiendo hacia abajo, de lo contrario, al acabarse el dibujo se vería el color del fondo.
Si quieres "enmarcar" el fondo por ariba y por abajo con algo diferente, has de poner una imagen distinta en cada una. Si quieres que quede uniforme, la misma en los tres sitios.
Y cuando veas que ha quedado a tu entera satisfacción le das a Guardar Plantilla.