Tuneando la Tictac

Como hacer que el titulo del blog y/o la descripcion, no se vean

2009-01-18T14:30:00.005+01:00

En otra entrada os explicaba como poner una imagen a través del código.

El problema, que no había previsto al hacer esa entrada, es que a menudo estas imágenes ya incluyen el título del blog, lo que provoca que título y descripción se vean doble.

Para eliminarlos de la plantilla, pero no de la barra del navegador, en el HTML de la cabecera, expandiendo artilugios, debajo de <h1 class='title'> vereis estas líneas:

<b:include name='title'/>
y <b:include name='description'/>
que es lo que hace que ambas cosas se vean.

Para que eso no aparezca en la cabecera del blog, es suficiente con eliminar las palabras title y/o description, ya que , por lo que acabo de comprobar, ambas provocan el mismo efecto: se eliminan las dos cosas. De todos modos haced vista previa y guardais si todo va bien.

En principio, en cuanto a la descripción, si vais a poner una imagen en la que esté todo incluido, os aconsejaría que la borraseis a través de Configuración, ya que el hecho de que esté no influye en lo que se ve en la barra del navegador.

Añadir una variable

2008-03-08T12:25:00.003+01:00

En esta plantilla, la fuente de la sidebar no se puede cambiar desde Fuentes y Colores.
Para remediarlo puedes añadir una Variable a la lista de fuentes.
En Diseño/Edición de HTML, pega este código debajo de la que dice Sidebar Title Font:

<Variable name="sidebarfont" description="Sidebar Font" type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal normal
116% 'Lucida Grande','Trebuchet MS'">

y podrás cambiarlo desde Fuentes y colores.

La menubar o barra de menús.

2008-02-12T20:26:00.001+01:00

Estos "botones" que ves debajo de la cabecera, son dos Menubar, o barras de menús.
Aunque en esta entrada de Tuneando el blog, explico como y donde colocarla, pienso que no está de más que lo repita aquí, sobre todo teniendo en cuenta que en esta plantilla hay una pequeña modificación para centrarla.
Si usas el código que hay en Tuneando el blog, verás que empieza fuera de la zona del blog, así que hay que decirle donde quieres que comience, para que no se vea descolocada.

---

Para colocarla en tu blog: Plantilla/Edición de HTML sin expandir artilugios.
Antes de empezar a pegar el código mira cuantas listas de enlaces tienes. Las verás descritas como linkList1, linkList2, etc. Mira cuantas hay pues si pones un número repetido te dará error.
Una vez visto esto, has de encontrar este párrafo

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

y justo debajo pegas esto:

<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. (Si no estás muy segur@ pon un número alto, 30 o 50 o algo así)

Una vez pegado esto, sin guardar ni hacer vista previa, sube a buscar esta línea

]]></b:skin>

y justo encima pegas esto

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
padding-$startSide: 50px;

}
#menubar li {
float: left;
background-color: #333333;border:
outset 2px #cccccc;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: #ffffff;
}
#menubar a:hover
{
color:
#ffff00;
}

Ahora ya puedes hacer Vista previa y si la página carga bien, pues de momento no verás nada, Guarda plantilla.
Una vez guardada ves a Elementos de la página y allí verás el elemento Menubar, debajo de la cabecera. Pinchas en Editar y añades los vínculos que quieras que se vean, ya sea a entradas de tu blog, a etiquetas, o a otros blogs.

---

Detalles modificables:
En la zona #menubar ul
padding-$startSide: 50px; (puedes cambiar el 50 por la cantidad de píxels que necesites para que se vea bien en tu blog, por ejemplo: para centrarla. Usando la vista previa irás viendo como queda).
En la zona #menubar li
background-color: #333333; (cambiando el número cambiará el fondo del botón)
border: outset 2px #cccccc; (outset 2px le dan el aspecto de botón. El color es más clarito para darle relieve. Si cambias los colores, con la vista previa irás viendo como queda).
En la zona #menubar a:link, #menubar a:visited
color: #ffffff; (es el color del enlace)
En la zona #menubar a:hover
color: #ffff00; (es el color del enlace al poner el ratón encima).

---

Para doblarla has de copiar los dos códigos de nuevo, debajo de los anteriores, pero con algún cambio. En esta línea
<b:section class='menubar' id='menubar2' maxwidgets='1' showaddelement='yes'>
fíjate que hay un 2 al lado de una de las palabras menubar (resaltada en rojo). Es la que la identifica y la distingue de la anterior.
También tendrás que aumentar en una unidad el número de la linkList. Si antes le has puesto 50, por ejemplo, le tendrás que poner 51.
En la otra parte del código has de añadir este mismo número junto a todas las palabras menubar que veas. Así: #menubar2 a:hover , por ejemplo, para que tenga las mismas características que la anterior.
Puedes poner cuantas quieras, siempre y cuando a cada una le asignes un número propio.
Y podrás cambiarle a cada una los colores si quieres diferenciarlas.

---

Cambiar el fondo del blog

2008-02-09T16:33:00.001+01:00

Para cambiar el fondo del blog, en Plantilla/Edición de HTML localiza la zona que empieza así: body { y donde ponde background añades la dirección para que quede así:
background:url(la-dirección-del-fondo-que-vas-a-poner) #e0e0e0

Notas:´
#e0e0e0 es el color que tiene el fondo del blog. Al poner un fondo personalizado deja de tener efecto.

Si deseas ensanchar la plantilla, cosa muy difícil en ésta, pincha aquí. Rosa lo ha hecho y ha dejado el código completo para que puedas hacerlo.

Cambiar la cabecera del blog

2008-02-09T15:55:00.000+01:00

Para cambiar la cabecera de esta plantilla, entra en Plantilla/Edición de HTML y localiza el sector que empieza así:

/* ---( header and site name )--- */

Debajo verás dos bloques de datos.

En #header-wrapper { verás una dirección, cámbiala por la de tu cabecera, cambia la orden $startSide por center, añade esta línea height: 200px; (la medida dependerá de la altura de tu imagen) y borra esto #e0e0e0 que está al principio.
El bloque ha de quedar así:

#header-wrapper {
height: 200px;
margin: 0;
padding: 0;
font: $pagetitlefont;
background: url(la dirección de tu imagen) no-repeat center top;
}

En el siguiente bloque, #header { está la dirección de la línea que separa la cabecera del cuerpo del blog, si quieres eliminarla (yo lo he hecho) basta con que borres la dirección que hay entre los paréntesis en background: url. El resto no importa, al borrar la dirección deja de funcionar.

Si quieres centrar el título del blog respecto a la imagen, (aquí lo he hecho para que coincida con la zona blanca del cielo), has de modificar los paddings de esta zona. Ves haciendo vista previa hasta que veas que queda donde tu quieres.

Consejos
Haz los cambios uno a uno y a cada cambio correcto, guarda plantilla, pues si alguno no te gustara o no funcionara, al darle a Borrar cambios los borra todos.
Y haz siempre Vista previa antes de darle a Guardar plantilla.