Tuneando la Thisaway

Modificar el fondo de la sidebar

2009-07-21T12:18:00.003+02:00

Si quieres cambiarle el fondo a la columna lateral, ya sea colocando una imagen, ya sea poniéndole un color diferente, has de buscar en el código de la plantilla un trocito que em pieza así:

#sidebar-wrapper {

En este pedacito de código verás esta línea
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x $startSide top;

Si lo que quieres es poner una imagen, has de borrar la que hay entre los paréntesis y colocar ahí la dirección de la tuya.

Si lo que quieres es solamente que tenga un color liso, diferente al de la columna de las entradas, has de dejar esta línea así:

background: #cccccc;

Lo que ves detrás de los dos puntos, (#cccccc) es el código hexagesimal de un color; en este caso se vería de color gris clarito.
Pon el código del color que quieras en su lugar.

Si quieres poderle cambiar el color desde Fuentes y colores, tendrás que añadir una variable.
Para ello, sube hasta la zona donde están todas y pega esto:

Luego vuelves a bajar hasta la zona de la sidebar y en la línea del background escribes:

background: $sidebarbgcolor;

De esta forma, aunque al hacer vista previa, de momento, la verás de ese color gris clarito que te decía antes, en Fuentes y Colores podrás modificarle el color sin tener que volver a tocar el código.

El color del fondo del blog.

2009-01-22T14:24:00.003+01:00

A esta plantilla no se le puede cambiar el fondo del blog en Fuentes y colores.
Para poder hacerlo has de añadir la variable y modificar el código.

Para añadir la variable has de pegar esto:

<Variable name="bgColor" description="Background Color"
type="color" default="#632035" value="#cccccc">

debajo de esto

/* Variable definitions
====================

Una vez pegado, busca esto:

/* global
----------------------------------------------- */
body {

en esta zona hay una línea que pone: background: #9dce43; o algo parecido.

Este #9dce43 es el código del color del fondo.

Cambia este código de color por esto: $bgColor sin borrar el punto y coma del final para que la línea del background quede así:

background:$bgColor;

Haz Vista previa.
Si has copiado la variable que te he dejado arriba, deberías ver el fondo del blog de color gris claro.

Si es así, guarda.

Y a partir de ese momento verás en Fuentes y colores la opción de modificar el color del fondo del blog, al principio de todo.

La menubar bajo la cabecera

2008-05-01T15:57:00.004+02:00

He conseguido colocarla bajo la cabecera utilizando el truco de aprovechar el crosscol que publiqué ayer en Tuneando el blog.

Tan solo he tenido que modificar el margin-top de #main-wrapper y de #sidebar-wrapper y dejarlo en 40px para que se viera la menubar.

Luego he dejado en 5px los padding-top de #main y #sidebar para que no quedaran las cosas muy separadas de la menubar.

En Firefox se ve una línea de fondo entre la cabecera y el resto, que no se como arreglar. Pero como no es grave, así que se queda. De momento al menos.
En Explorer se ve perfecto.

Crear variables para la menubar

2008-03-08T12:39:00.005+01:00

En la entrada anterior os explico como poner la menubar en esta plantilla.
El código tiene unos colores fijos que puedes cambiar a tu gusto, pero cada vez que quieras hacerlo tendrás que entrar en el código de la plantilla y modificarlos.
Si quieres poder hacerlo desde Fuentes y colores, tan solo tienes que añadir las Variables necesarias para ello.
Pega, debajo de la ultima Variable de color que veas, estas líneas:

<Variable name="botonmenubarcolor"
description="Boton Menubar Color" type="color" default="#cccccc" value="#cccccc">
<Variable name="botonmenubarbgcolor"
description="Boton Menubar Background Color" type="color"
default="#ffffff"value="#ffffff">

Y cambia en la línea background-color de menubar li el número del color por esto $botonmenubarcolor para que esa línea quede así

background-color: $botonmenubarcolor;

haz lo mismo en la línea del background-color de menubar a: hover para que quede así:

background-color: $botonmenubarbgcolor;

Y si has puesto más de una menubar cambia estos dos datos en todas.
---
Por otro lado, también puedes añadir una variable para el color del enlace al poner el ratón encima, a:hover,

<Variable name="hoverlinkcolor"
description="Hover Link Color" type="color" default="cccccc" value="#cccccc">

y en la línea color:#ffffff; de menubar a:hover cámbialo para que quede así:

color: $hoverlinkcolor;

y también podrás variar este dato desde Fuentes y colores.

Poner una menubar.

2008-02-11T20:48:00.001+01:00

La menubar es esa barra que ves encima de la cabecera, con "botones" que contienen enlaces.
En Tuneando el blog ya he dejado una explicación completa acerca del tema, pero en esta plantilla tiene pequeñas diferencias de configuración, así que dejo aquí las explicaciones pertinentes.
Para empezar, si no has quitado de tu blog esta barra curvada que hay debajo de la cabecera y encima del cuerpo del blog, si pones ahí la barra de menús, (menubar), se separa el blog de la cabecera, pero quedan unas esquinitas muy feas pegadas a la cabecera. Son las que le dan al cuerpo del blog este aspecto de continuidad con ella. Y no se pueden quitar sin quitar la línea entera, salvo que seas un genio del photoshop, elimines los angulitos, subas la imagen a un servidor y coloques la nueva en el sitio de la que hay.
Así que he optado por ponerla encima de la cabecera.
Dicho esto, vamos allá con el código.
Plantilla/Edición de HTML sin expandir elementos.

---

Aunque todavía no vas a pegarlo.
Para empezar has de mirar cuantas listas de enlaces tienes en tu blog.
Cada vez que añades una lista de enlaces, el sistema las numera. Así si tienes 2, verás en la plantilla dos líneas de código que pondrán esto linkList1 y linkList2

*Truco: los códigos de los elementos, salen en el orden en que los tienes*

Si tuvieras más verías más líneas de esas.
Una vez visto el numero de linkList que tienes, recuerda cual sigue, pues es el número que vas a poner en el código que has de pegar.

---
Ahora has de localizar esta línea del código HTML

<div id='header-wrapper'>

y justo encima 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 lo tienes claro pon un número alto: 50 por ejemplo).

Ahora, sin hacer vista previa ni guardar todavía, sube a buscar esta línea:

]]></b:skin>

y justo encima pegas esto:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}

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

Una vez pegado haz Vista previa y si la página carga bien, pues de momento no veras cambio alguno, Guarda plantilla.
Una vez guardada, ves a Elementos de la página y allí, encima de la cabecera, verás el elemento Menubar.
Pon los enlaces que quieras que se vean y una vez guardados los cambios, Ver blog.
Y ahora si que la verás.

---

Si has copiado este código exactamente y no has cambiado nada, será igual a esta de aquí.
Si quieres personalizarla, te explico qué significa cada dato.
En #menubar li
background-color: #660033; (este número es el color del fondo del botón)
border: outset 2px #cccccc; (outset 2px le da el aspecto de botón, el número es el color del borde, algo más clarito, para que se vea la separación entre enlaces)
En #menubar a:link, #menubar a:visited,
color: #ffccff; (este es el color del enlace sin tocarlo)
En #menubar a:hover
color: #ffffff; (el color del enlace al poner el ratón encima)
background-color: #ff00ff; (el color del fondo del botón al poner el ratón encima).

---
Si quieres poner más de una barra de esas, (ya ves que aquí hay dos), has de copiar ambos códigos, enteros, debajo de los que ya tienes, pero...
El primero, el que pones encima de header-wrapper has de modificarlo un poco, y ha de quedar así: Remarco en rojo los cambios.

<b:section class='menubar' id='menubar2' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkListX' locked='true' title='Menubar' type='LinkList'/>
</b:section>
Aumentando en una unidad la x, así si en el código de antes le has puesto 50, en este has de poner 51.

Al igual que antes, subes a buscar ]]></b:skin> y pegas otra vez el código, añadiendo un 2 en todos los sitios donde ponga menubar, para que quede así

#menubar2 h2 {display:none;}

#menubar2 ul {
list-style: none;
}
#menubar2 li {
float: left;
background-color: #660033;
border: outset 2px #cccccc;
}
#menubar2 a:link, #menubar2 a:visited, {
padding: 5px;
display: block;
color: #ffccff;
}
#menubar2 a:hover {
color: #ffffff;
background-color: #ff00ff;
}

Y al igual que antes, puedes personalizarla a tu gusto.
---

Centrar el título del blog

2008-02-09T18:25:00.000+01:00

Plantilla/Edición de HTML
En header h1 {
Varía las cantidades en padding-top y padding-$start-Side hasta que el título se coloque donde prefieras.

Cambiar el fondo del blog

2008-02-09T18:08:00.000+01:00

En Plantilla/Edición de HTML
En la zona body {
Detrás de background: borra el color #xxx , cambia la dirección que hay entre los paréntesis por la de tu fondo y borra -x que está detrás de repeat a fin de que esta línea quede así:

background: url(la dirección de tu fondo) repeat $startSide top;

Vista previa y guarda plantilla si ves que todo funciona como es debido.

Poner una imagen en la cabecera

2008-02-09T17:51:00.000+01:00

Ves a Plantilla/Edición de HTML.
En la zona #header h1 {
Eliminas la dirección que está entre los paréntesis para borrar el cuadrito con las flechas. Vista previa y guardas plantilla.
En la zona #header {
Añades ésta línea height: 200px; (200 es la altura de la imagen, si la tuya mide más o menos, has de poner dicha cifra).
Detrás de background borras el color #xxx (xxx corresponde al número que habrá en tu plantilla) y cambias la dirección que hay entre los paréntesis por la de tu imagen. (Se adapta de ancho automáticamente).
Vista previa y guardar si todo está correcto.