Hoy vamos a aprender como poner diferentes estilos en nuestro blog y así, nunca defraudaremos a nuestros lectores que, como es normal suelen tener diferentes gustos. Los que me han seguido desde el principio saben que éste blog en sus inicios tenía una plantilla negra. Para muchos el fondo negro les resultaba incómodo para leer y lo cambié por el blanco. Al cambiarlo otros me han dicho que los fondos blancos desprenden más luz y, por lo tanto, cargaba más la vista. Este truco nos permitirá tener varios colores a disposición de nuestros visitantes.
Una vez más vamos a necesitar la ayuda de Google Pages para subir los archivos con la configuración para los diferentes colores que vamos a poner en el blog. Yo he subido un archivo para el color blanco y otro para el color negro. Se trata de archivos de texto en los que hay que copiar una parte de la plantilla, que está entre <head> y </head>, pero no todo, eliminamos los scripts, las variables, los META's (para entenderlo mejor ver los arquivos en los enlaces),... Lo copiamos en el bloc de notas de Windows pero lo guardamos como como un archivo '.css', no como '.txt' sino sólo nos funcinará en IE y no en Firefox.
En la plantilla los colores se asignan a través de las variables. Los cambios que yo he realizado son los del color de fondo y del texto, que están en body, de modo que he sustituido las variables $mainBgColor y $mainTextColor por los códigos del negro y del azul; y la variable de los links, $mainLinkColor, que está casi al final de todo, por un azul celeste (podeis encontrar más colores en webmonkey).
Además de subir un archivo para cada color a nuestra página de Google podemos subir el script que vamos a utilizar (podeis utilizar el mio, pero siempre es aconsejable tenerlo en nuestra página) y que se puede descargar de la dirección URL (en naranja) que contiene el script:
<script src='http://blogandroll.googlepages.com/cambiaestilos.js' type='text/javascript'></script>
A continuación pondremos en la plantilla los enlaces hacia los archivos que hemos subido a la página de Google antes de </head>, los mios quedaron así:
<link href='http://blogandroll.googlepages.com/styleblack.css' rel='stylesheet' title='Negro' type='text/css'/>
<link href='http://blogandroll.googlepages.com/stylewhite.css' rel='alternate stylesheet' title='Blanco' type='text/css'/>
<script src='http://blogandroll.googlepages.com/cambiaestilos.js' type='text/javascript'></script>
En negrilla están las URL de los archivos que debeis cambiar por los vuestras. El siguiente paso es el más sencillo de todos, vamos a PLANTILLA y creamos un nuevo elemento HTLM en el que introduciremos el siguiente código:
<a href="javascript:chooseStyle('Negro', 365)">Negro</a> o <a href="javascript:chooseStyle('Blanco', 365)">Blanco</a>
Nos quedará en la sidebar la posibilidad de elegir una plantilla con fondo negro o blanco, aunque se pueden poner todas las combinaciones que se nos ocurran.
No hay comentarios:
Publicar un comentario