Tuneando la denim

Cambiar la sidebar de sitio

2008-05-08T23:18:00.001+02:00

Es tan sencillo como hacer un par de cambios.

Por un lado, en el sector del CSS hay que cambiar los float del main wrapper y de sidebar wrapper, y donde ponga startSide poner endSide o left por right, depende del modelo y del tiempo que haga que la tengas y viceversa.
Luego SIN expandir artilugios, copiar el código del sector de las entradas que será algo así:

<div id='main-wrap1'><div id='main-wrap2'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div></div>

y pegarlo debajo del código de la sidebar que empieza así:

<div id='sidebar-wrap'>

eliminándolo del lugar que ocupaba anteriormente, de lo contrario te dará error por repetición.

Vista previa y si no ha habido errores, verás la sidebar en el lado contrario.

Para saber donde termina el código de la sidebar, solo has de buscar el siguiente

</b:section>

</div></div>

que estará más o menos abajo, dependiendo de la cantidad de elementos que tengas en la sidebar.

La menubar integrada en el content-wrapper

2008-05-01T16:30:00.003+02:00

Hasta hace un momento la menubar estaba entre la cabecera y el cuerpo del blog, lo que en el código de esta plantilla se define como content-wrapper.

Ayer aprendí a aprovechar una zona "muerta", llamada crosscol, que han colocado aquí los de blogger para que podamos poner publicidad en ella, pero como yo no tengo publicidad, la estoy aprovechando, en las plantillas que tengo tuneadas, para poner en ella la menubar.

Cada plantilla es diferente y los cambios se han de hacer en base a estas diferencias, por eso estoy dejando en cada una, las instrucciones concretas para efectuar este traslado.

El código para aprovechar el crosscol es el mismo en todas y lo he publicado en Tuneando el blog, pero en vista de que si alguien quiere hacerlo, tendrá que ver las instrucciones espécificas de su plantilla, lo estoy copiando en todas.

En el caso de la denim, has de copiar, encima de /*Content ----- lo que sigue:

/*Crosscol
----------------------------------------------*/
#crosscol-wrapper {
height:30px;
margin-top:0;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-$endSide:0;
padding-bottom:0;
}

teniendo cuidado de asegurarte de que en tu plantilla las posiciones se definen igual.
Si tu plantilla no utiliza esto de $endSide y $startSide, has de cambiarlo por right y left respectivamente.

Luego bajas a la zona del HTML y pegas el código de la menubar bajo la definición del crosscol, borrando el b:section existente ahí, de manera que quede así:

<div id='crosscol-wrapper' showaddelement='no' style='text-align:center'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='Menubar' type='LinkList'/>
</b:section>
</div>

Borrando, en cuanto lo hayas pegado, el código de la menubar de donde estaba, a fin de que no se repita y te de error.

(Recuerda que el número de la LinkList de la menubar puede ser otro; dependerá de tu blog).

En esta plantilla, al hacer el cambio, el cuerpo del blog quedaba muy separado de la cabecera.

Lo he solucionado borrando esta línea del #content-wrapper: border-top: 0;

La ventaja de colocar la menubar ahí: que queda mejor.

La desventaja: no caben tantos enlaces como antes.

Por lo demás, depende de tus necesidades que la pongas en un sitio u otro.

Retocar las medidas del blog

2008-02-24T05:15:00.003+01:00

Para empezar a modificar el blog he colocado la imagen de la cabecera desde Editar del elemento cabecera.
Como esta imagen mide algo más que el blog, he empezado a modificar sus medidas para que quedara como lo estás viendo.
En Edición de HTML he localizado primero la zona de la cabecera /* Header y en #header-wrapper { he borrado el color que había en la línea background-color: para eliminar los dos rectángulos que quedaban a ambos lados.
Después en #header { he dejado el width: (ancho) en 800px;
A continuación, para centrar el título respecto a la imagen que he colocado he bajado a h1.title { y en padding-top: he cambiado el 38 por un 70 y he añadido esta línea:

text-align: left;

para desplazarlo hacia la izquierda.

Lo siguiente ha sido hacer que la zona útil del blog tuviera las mismas medidas que la cabecera y para eso he bajado hasta #content-wrapper { y también he dejado el width: en 800px;
Estas medidas hay que repartirlas entre las entradas y la columna lateral, así que en #main-wrapper { he puesto el width en 530px y en #sidebar-wrapper { finalmente, tras hacer algunos cambios en la sidebar, que explico en la entrada correspondiente, lo he dejado en 230, pues si la dejaba como estaba se "caia" y se colocaba debajo de las entradas.
Claro que hubiese podido quitar esos 10 píxels que necesitaba de la zona de las entradas, pero lo que añadimos a la sidebar raramente mide más de 220 píxels, así que no se necesitan demasiados más.
---
Nota:
Si has entrado para ver como funciona esta plantilla, desde el blog de Ideas para plantillas, te comento que en aquellas, las imágenes de la cabecera están incluidas en el código, no a través de Editar/Elementos de la página.

Cambiar el fondo del blog

2008-02-24T05:02:00.003+01:00

Una vez colocada la cabecera y con el blog a la medida que deseaba le he colocado un fondo personalizado. En la zona del body { he borrado lo que había detrás de background: y he añadido la dirección de la imagen y la orden para que no se mueva con el blog, con lo que esta línea ha quedado así:

background: url("la-dirección-de-la-imagen") fixed;

Vista previa y guardar plantilla.

Personalizar las entradas

2008-02-24T03:59:00.008+01:00

En las entradas he hecho algunos cambios que voy a explicar en el orden en que los he realizado.

Para empezar he enmarcado la zona del post y para ello he usado una de las variables que han quedado inservibles al haber colocado la imagen en la cabecera; la que definía el color de los rectángulos que había a los lados, headerCornersColor, así que en la zona que empieza por .post { he añadido estas dos líneas

border: 1px solid $headerCornersColor;
background-color: $headerBgColor;

La primera para crear el borde y la segunda para que el fondo no se viera del mismo color que el fondo de la que llamo "zona útil" que está formada por el conjunto de entradas y sidebar, con lo que he aprovechado otra variable más de las que no se van a utilizar al colocar una imagen en la cabecera, la que define su color.

Después he enmarcado el título de las entradas a juego con los títulos de los elementos de la columna lateral y para ello en la zona del .post-title { he añadido esta línea

background-color: $sidebarTitleBgColor;

debajo del padding, al que he cambiado el 0 por un 10px para separar el título del borde del recuadro, pues quedaba muy pegado a la izquierda.

(Puedes variar esta cantidad a tu gusto, haciendo vista previa para ir viendo como te gusta más)

También he separado un poco el texto de las entradas del margen izquierdo, pues quedaba muy pegado a la línea del borde. Para eso en la zona .post div { he modificado la línea del margin dejándola así

margin: 0 .5em .75em;

Lo siguiente ha sido enmarcar el pie del post a juego con el resto. En .post-footer { he añadido esta línea

background-color: $sidebarTitleBgColor;

debajo de margin y para separar las letras del borde esta otra

padding-left: 5px;

Otro cambio que he hecho aquí es añadir una propiedad al título para que, cuando pongas el ratón encima, cambie de color, (en la siguiente entrada está el código de la variable hoverlinkColor) y para ello he creado una nueva zona en el CSS.

Al final de la que empieza así .post-title a, .post-title a:visited, .post-title strong { y antes de .post div { he añadido esta

.post-title a:hover {
color: $hoverlinkColor;
text-decoration: underline;
}

También le he añadido una propiedad al blocquote, el background, pues al publicar la primera de las entradas que estoy haciendo he visto que simplemente separaba el texto del margen, y a mi me gusta que se distinga mejor y creo que la mejor manera es poniendo un color de fondo.

Y como quería que este color fuera totalmente distinto a los que componen el blog, le he creado una variable más y la he llamado blocquoteBgColor / Blocquote Background Color. (Lógico, ¿no?)

y la he añadido así

<Variable name="blocquoteBgColor" description="Blocquote Background Color" type="color" default="#ffffff" value="#ffffcc">

Una vez aceptada la nueva variable he añadido esta línea a .post blocquote {

background-color: $blocquoteBgColor;

para que los textos que desee remarcar, (en mi caso los códigos que has de añadir o modificar) destaquen.

Recuerda que lo que está en rojo es lo que hay en el código original y lo que está en azul lo que le añado.

Y sobre todo no olvides ir haciendo vista previa, e ir haciendo los cambios uno a uno. Cambio que funciona, plantilla guardada. De esta forma te evitas tener que volver a colocarlo todo si has de Borrar cambios.

Crear Variables para los links

2008-02-24T03:27:00.004+01:00

Esta plantilla tiene un defecto, al menos para mi gusto, los enlaces no cambian de color. se ven siempre igual, lo que es un coñazo, pues tan solo los distingue del resto el hecho de que salgan subrayados por defecto, pero a mi me gusta que cambien de color, así que he creado las variables necesarias para poderlos diferenciar y he añadido dos al primer grupo.

(Cuando creo una variable suelo poner como color el gris clarito, #cccccc , porqué, junto con el blanco, es el que tengo más claro como se ve y como se escribe).

Esta para el color de los links al pasar el ratón por encima

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

Y esta para el color de los links visitados

<Variable name="visitedlinkColor" description="Visited Link Color" type="color" default="#cccccc" value="#cccccc">

Después he añadido a cada bloque las órdenes correspondientes (en azul) con lo que han quedado así

a:hover {
color: $hoverlinkColor;
}
a:visited {
color: $visitedlinkColor;
}

Con la ventaja de que ambas variables se han añadido a la colección de Fuentes y colores y las puedo cambiar sin retocar el código.

La columna lateral

2008-02-24T02:21:00.007+01:00

Aquí he enmarcado los widgets.
En .sidebar .widget { añades esta línea

border: 1px solid $headerCornersColor;

He usado esta variable más que nada para aprovecharla, y poder cambiar el color desde Fuentes y colores sin tener que andar tocando el código si quieres modificarlo.
Como he notado que el elemento era transparente, o sea que el fondo se veia del mismo color rosado que hay en el fondo de la zona útil del blog, le he añadido una línea más

background-color: $headerBgColor;

con lo que he aprovechado otra variable que, al poner la cabecera, resultaba inútil.
Al enmarcar los elementos he visto que quedaba una zona muerta entre el marco del elemento y el borde superior del color de fondo del título, con lo que he tenido que variar alguna medida.
En .sidebar h2 { verás esta línea: margin: 1.6em 0 .5em;
Has de cambiar la primera cantidad por un 0 para dejarla así:

margin: 0 0 .5em;

También la he separado de arriba y la he dejado en línea con las entradas. Para ello subes a buscar #sidebar-wrapper { y encima de width añades esta línea

padding-top: 22px;

Y como he visto que quedaban muy pegados a la zona de entradas, he dejado un poco de distancia, así que debajo he añadido esta otra línea

margin-left: 10px;

rebajando estos 10 píxels al ancho de la sidebar, para que no quedara debajo de las entradas. (La medida que hay en la entrada de como ensanchar el blog ya lo tiene en cuenta).

NOTA:

Según el explorador que uses el marco se ve mejor. Con internet explorer a veces se ve pegado al de las entradas y a veces se ve bien. Con Firefox, de momento, lo he visto siempre bien.

No hago publicidad de Firefox, suelo usar el otro pues me gusta más como se ven las letras, tan solo lo advierto.

Poner una menubar.

2008-02-24T01:13:00.009+01:00

Finalmente, le añadimos la menubar y la configuramos para que tenga el aspecto de botones.
En este caso he añadido algunas variables al código a fin de poder cambiar los colores del fondo de los botones, así que empezaremos por crear estas variables.
Para el color de fondo del botón normal añades este código al final del segundo grupo de variables

<Variable name="botonmenubarColor" description="Boton Menubar Color" type="color" default="#cccccc" value="#cccccc">

(Si lo copias tal cual, el fondo saldrá gris claro, ya lo cambiarás luego en Fuentes y colores)
Para el fondo del botón cuando pones el ratón encima he creado esta otra variable

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

(En este caso saldrá blanco, ya lo cambiarás).
Una vez añadidas las variables, hecha Vista previa y visto que carga bien Guarda plantilla y vamos a añadir el código de la menubar.
Primero hay que buscar este trocito de código

<div id='header-wrapper'>
<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>

que está casi al principio del HTML y añdir debajo este otro

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='Menubar' type='LinkList'/>
</b:section>

Luego subes a buscar esta línea ]]></b:skin> y encima de ella, (teniendo cuidado de que la llave } de cierre del footer .widget, quede encima) pegas este código

#menubar h2 {
display:none;
}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
background-color: $botonmenubarColor;
border: outset 2px $headerCornersColor;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: $linkColor;
}
#menubar a:hover {
background-color: $botonmenubarBgColor;
color: $hoverlinkColor;
}

Como ves, he usado las variables en todos los sitios donde van colores. Esto me permite cambiarlos sin entrar a modificar el código y le da al botón un aspecto más conjuntado con el resto del blog.
Cuando hayas pegado este código, haz vista previa. No verás nada, pero si la página carga bien, Guarda plantilla.
Entonces ves a Elementos de la página y allí tendrás la menubar, debajo de la cabecera.
Agregas, al menos, un link para ver como queda el botón y ya podrás cambiar los colores.
Advertencia:
El color del botón al poner el ratón encima, no se ve en la página Fuentes y colores. Para ver como queda has de ir a Ver blog.
Si prefieres poner los colores directamente en el código, en cualquiera de mis blogs tuneados está el código con colores, y en este blog encontrarás un juguetito para que puedas elegir el color y obtener su código.