Tuneando la scribe

Centrar el título de las entradas

2008-03-15T23:16:00.003+01:00

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

2008-03-15T19:15:00.006+01:00

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.

Los botones de la cabecera

2008-02-13T10:11:00.005+01:00

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.

Tunear la scribe

2007-11-02T21:19:00.001+01:00

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

2007-11-02T21:02:00.001+01:00

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

2007-11-02T20:55:00.000+01:00

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

2007-11-02T20:39:00.000+01:00

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.

Enmarcar las entradas

2007-11-02T20:30:00.002+01:00

Si quieres enmarcar la zona de las entradas del blog, para separala de la barra lateral, en este apartado

#main {
border: ridge #ff66ff 4px;
width:430px;
float:right;
padding:8px 5px 5px 10px;
margin:0;
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 */}

has de añadir la línea de colores.
Lo que está en rojo es lo existente, lo que está en azul es inamovible y lo verde puedes variarlo a tu gusto; ridge es el estilo de línea, ff66ff el color de la línea y el nº 4 indica el grosor.
En la línea padding, verás que pone 8px 0;has de borrar el 0 y añadir las medidas que te he puesto en azul, o las letras quedarán pegadas al borde.

Ensanchar la zona útil del blog

2007-11-02T20:20:00.001+01:00

Otra cosa que puedes hacer en esta plantilla, al igual que en las demás de blogger, es ensanchar la zona útil.
Aquí le he añadido 100 píxels a la medida original, y los he repartido entre la zona de las entradas y la barra lateral 70/30.
Para ensancharlo has de modificar varias medidas.
Busca la parte del CSS que empieza así
/* Layout

Allí hay estas 4 zonas
#outer-wrapper { #main-top
{ #main-bot { #wrap2 {

Verás que en todas ellas pone width:700px;
Cambia estos 700 por la cantidad que desees, (yo he puesto 800), haz vista previa y si todo está correcto y carga bien, Guarda.
Habrás visto que queda una zona en blanco. Esto se arregla modificando dos medidas más.
Localiza esta zona (un poco más abajo) #main { y cambia el 430 por la parte que quieras añadir, de la que hayas agregado, a la zona de las entradas. (Yo le he añadido 70 de esos 100 píxels que he añadido arriba y lo he dejado en 500).
Debajo encontrarás esta zona #sidebar { añade allí a los 200 que hay el resto, (30 en mi caso, con lo que ha quedado en 230).
Vista previa y guardar.

Cambiar los divisores o barras de adorno

2007-11-02T20:10:00.001+01:00

En esta plantilla, arriba en la cabecera y abajo en el pie de página, hay unas líneas, o divisores, que quedan muy bien con el modelo original, pero se dan de patadas con los dibujos que he colocado yo.
Al ensancharlo, además, se descentran.
Así que vamos a modificarlo.
Empezaremos por el pie de página, por ser la zona que encontrarás primero.
Localiza estas líneas. (Están debajo de #sidebar {)
#footer {
clear:both;
background:url("aqui pegas la dirección de la línea que vayas a poner") no-repeat top left;

y si quieres centrarla cambias left por center.
Localiza ahora la zona de la cabecera, (casi al final de CSS), que empieza así:
#header {
y aquí cambias la línea y la centras cambiando el left original por center.
background:url("aquí la
dirección de la línea que vayas a poner") no-repeat
bottom center;

Puedes poner la misma en ambos sitios o, como ves aquí, una distinta en cada sitio.
Y, como no me cansaré de repetir, Vista previa antes de Guardar.

¡Por cierto! si necesitas líneas y no sabes de donde sacarlas, en el mismo sitio donde está el álbum de imágenes, al que llegas pinchando en la mariposa, hay un álbum con muchas barras de estas.