Cambiando la apariencia
Un buen uso al CSS en un sitio web, es teniendo múltiples hojas de estilo con diferentes apariencias; así el usuario puede escoger el que más le plazca, según su ánimo, o como sea. A esto se le puede agregar en un JavaScript que cambie según la hora (día, noche), estación (verano, invierno), etc. Las posibilidades son muchas. Vamos al grano.
Primero, se necesita llamar las 2 hojas de estilo: la principal (stylesheet) y la opcional (alternate stylesheet).
<link rel="stylesheet" type="text/css" href="normal.css" title="normal">
<link rel="alternate stylesheet" type="text/css" href="oscuro.css" title="oscuro">
El secreto está en la denominación de rel="", y en el title="" para luego llamarla. El browser va a cargar ambas al principio, pero solamente habilitará la que se contiene en rel="stylesheet".
Ahora viene la magia. Con un JavaScript facilitado por A List Apart, que funciona de maravilla, se habilita la posibilidad de hacer el cambio casi instantáneo. El link, para bajarlo: styleswitcher.js
Agrégalo entre tus <head></head>:
<script type="text/javascript" src="styleswitcher.js"></script>
Finalmente, resta incluir el llamado en el HTML de la función del cambio de estilos en un botón. Usaremos onclick="" para esto:
<a href="#" onclick="setActiveStyleSheet(’normal’); return false;">Normal</a>
<a href="#" onclick="setActiveStyleSheet(’oscuro’); return false;">Oscuro</a>
Vale mencionar que ese styleswitcher.js hace más que eso: puede identificar cual está activa y guardar la hoja de estilos actual en una cookie para que permanezca posteriormente, entre otras cosas.
Links:
No me funcion esto a mi, cuando hago click en normal y oscuro no pasa nada
q browser estas usando? este metodo fue probado en IE6, FF 1.5+, Safari 2+….
te copio en nopaste como lo estoy haciendo y no hay manera, reduzco al minimo la plantilla para quitar todo lo q sobra pare el ejemplo:
http://rafb.net/paste/results/udnYUl39.txt
Estoy usando firefox, pero no me funciona en ningún navegador, en opera tampoco, a ver si tu tienes más idea y me guias pq ya no sé qué probar…
Y este es el weblog en donde estoy probándolo
http://minimalnet.blogsome.com
por lo q veo en el codigo de tu blog estas linkeando el CSS a un jpg: http://minimalnet.blogsome.com/images/normal.jpg y dark.jpg. Ahi esta el problema, deberias de llamar una hoja de estilos, no una imagen. Suerte
estoy llamando a un jpg pq no puedo subir css, en realidad ese jpg es un archivo css renombrado a jpg, en fin, ya iré probando, al final funcionará
http://pruebaplantilla.blogsome.com
en este blog q tengo para hacer experimentos, puedo trabajar más tranquilo, linkando .css y no .jpg, a la que quito esto
@import url( “{$siteurl}/templates/wp-layout.css” );
o esto
@import url( “http://minnet.100webspace.net/normal.css” );
desaparece el css de la página
si pincho normal y dark, me cambia el pattern de fondo q tienes, por lo tanto funciona el JS. en safari…
mmmm pues el problema parece firefox, porque acabo de mirar en opera y va, y en ie tambien, vaya putada jeje, esto si q es un imprevisto, a lo mejor este script no va para la version 2.0
pues nada, se queda estancada por ahora la idea, es interesnate pero si no va bien con todos los navegadores, prefiero esperar a encontrar otro método, muchas gracias por la ayuda, esto del css es todo un mundo, y yo soy tan terco..
ya no te doy más la bara jeje
en firefox tb me funciona….. y en IE6.
ahora me va…, al parecer era algun problema en el caché de mi firefox, pues voy a customizar un poco mas el segundo diseño y a ver q tal.
si lo dejo asi qué pasa?:
http://rafb.net/paste/results/NjKwqG63.txt
lo digo para asegurarme de que si no cargara el css externo, el del weblog seguro q funcionaría no?
rel=”stylesheet” siempre va a caargar, asi qq no deberias de tener problema con ello. @import no tiene buen soporte en browsers antiguos, por lo q no te lo recomiendo aun.