Truco/Script del día:
Queremos cambiar la CSS de nuestro site sin tener que recargar la URL. Por ejemplo para cambiar entre colores.
Para ello nos basamos en que tenemos una escenario parecido a este:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<link rel=”stylesheet” type=”text/css” href=”blue.css” />
Y disponemos de más css, con diferentes colores, que harían cambiar el color de nuestro sisito.
<link rel=”stylesheet” type=”text/css” href=”green.css” />
<link rel=”stylesheet” type=”text/css” href=”blue.css” />
<link rel=”stylesheet” type=”text/css” href=”purple.css” />
<link rel=”stylesheet” type=”text/css” href=”orange.css” />
Pues bien primero necesitamos ponerle un ID al estilo que nos interesa cambiar ejemplo:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<link rel=”stylesheet” type=”text/css” href=”blue.css” id=”css_color” />
Luego necesitamos una función que hará se cambie este valor:
<script language=”JavaScript”>
function changeCss(id_css,new_css){
document.getElementById(id_css).href = new_css;
setCookie(”theme_color”,new_css,365)
}
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+exdate.toGMTString()+”;path=/”);
}
</script>
Para usarlo:
<a href=”#” onclick=”changeCss(’css_color’,'green.css’);return false;”><span>green</span></a> |
<a href=”#” onclick=”changeCss(’css_color’,'blue.css’);return false;”><span>blue</span></a> |
<a href=”#” onclick=”changeCss(’css_color’,'orange.css’);return false;”><span>orange</span></a> |
<a href=”#” onclick=”changeCss(’css_color’,'purple.css’);return false;”><span>purple</span></a>
Así ya tenemos el efecto del cambio de color instantáneo ;).
Pero para los que como yo usamos PHP, no estaría de más que cargáramos la última css que nos pusieron. Para eso puse la función cookie y guardar la cookie en JS.
< ?php
$theme_color=$_COOKIE['theme_color'];
if ($theme_color==”") $theme_color=”blue.css”;
?>
<link rel=”stylesheet” type=”text/css” href=”<?php echo $theme_color;?>” id=”css_color” />
Para verlo lo podéis probar en este template de classifieds Barcelona que he montado para Open Classifieds.
