Recientemente agregue al blog la funcionalidad de cambiar de estilos CSS, entre el estilo actual y el que pronto estrenaré (el cual hace uso de jQuery para algunos proceso con Ajax). Explicaremos como cambiar de estilos CSS a una página HTML mediante PHP.
El script funciona de esta manera: 1) permite cambiar de hojas de estilos, permitiendo así crear una serie de estilos he ir probando para ver cual es de nuestro agrado ó simplemente para darle la opción al usuario de elegir el que más lle guste; y 2) guarda el nombre de la hoja de estilo en un cookie mediante PHP, así cuando el usuario visite nuevamente tendrá ante sí el estilo seleccionado en su última visita.
La página HTML (index.php) , verifica si existe una variable cookie de nombre _theme, el cual contendrá el nombre de la hoja de estilos seleccionada. Si no existe ninguna cookie con ese nombre, entonces por defecto es none.
Dentro de las etiquetas body encontramos dos enlaces que apuntan al archivo theme.php. Mediante el método GET se envia la variable thm con el nombre de la hoja de estilos, en este caso: style y style1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Change Styte CSS with PHP</title>
<?php
if(!empty($_COOKIE['_theme'])) $style = $_COOKIE['_theme'];
else $style = "none";
?>
<link rel="stylesheet" href="<?php echo $style ?>.css" type="text/css" media="screen" />
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<a href="theme.php?thm=style">Estilo 1</a> <a href="theme.php?thm=style1">Estilo 2</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis viverra sapien. Sed sapien ligula, scelerisque nec, blandit nec, elementum at, nulla. Pellentesque ligula mauris, fermentum eu, fermentum eu, fringilla consequat, enim. Curabitur metus tortor, semper a, eleifend et, volutpat eu, sem. Donec ante nulla, tempus accumsan, tempus in, lobortis a, lectus. Vestibulum tristique, purus quis porta pulvinar, urna ligula imperdiet est, quis molestie ipsum mauris vel neque. Nulla posuere purus id neque. Mauris libero nulla, hendrerit a, consectetur ut, porttitor eu, augue. Donec aliquam rhoncus urna. Fusce facilisis porta odio. In ac nisi non arcu dapibus scelerisque. Vestibulum a nibh. Vestibulum vitae ligula. Etiam id mi. Duis a risus sed elit blandit scelerisque. Duis enim. Pellentesque sodales. Fusce quis ipsum.</p>
<p>Suspendisse neque tellus, malesuada in, facilisis et, adipiscing sit amet, risus. Sed egestas. Quisque mauris. Duis id ligula. Nunc quis tortor. In hendrerit, quam vitae mattis interdum, turpis augue viverra justo, sed semper sem lorem sed ligula. Curabitur id urna nec risus volutpat ultrices. Aliquam nec sem. Etiam eu diam. Aenean turpis enim.</p>
</body>
</html>
Ahora veamos el funcionamiento del archivo theme.php. Captura el valor de la variable thm enviada mediante el método GET, y creamos una cookie llamada _theme conteniendo el valor de thm. Y regresamos a la misma página donde estuvimos mediante $_SERVER[‘HTTP_REFERER’].
<?php
$tema=$_GET['thm'];
setcookie('_theme',$tema,time()+(86400*365),"/","");
header("Location: ".$_SERVER['HTTP_REFERER']);
?>
Las hojas de estilos:
style.css
h1{
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000066;
}
p{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
}
a{
background:#006699;
color:#FFFFFF;
padding:5px;
}
style1.css
h1{
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#990000;
}
p{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#3333CC;
}
a{
background:#FFFF99;
color:#3333CC;
padding:5px;
text-decoration:none;
}
De esta forma es cómo podemos cambiar de hoja de estilos mediante PHP. ¿Verdad que no es nada complicado? Espero les sirva el código.
Hola, quiero agradecerte por explicar todo, pero hago todo siguiendo los pasos y no me sale nada (lo estoy probando en un servidor local)
mm me gusta el port no lo entiendo mucho pero quisiera bajar el demo o el codigo completo
pero los links estan rotos
El link del demo esta caido… porfa subelo
Gracias por avisar del link, no me habia dado cuenta. Ya esta corregido 馃檪
Disculpe pero como establesco una hoja de estilo primeramete, es decir ya tener el sitio con una predeterminada y que el usuario simplmete escoja la otra…
Disculpe la pregunta ya encontre lo que necesitava, simplemete es cambiar esta linea:
if(!empty($_COOKIE[‘_theme’])) $style = $_COOKIE[‘_theme’];
else $style = “aqui el nombre de la hoja de estilo predeterminada”;
Gracias de antemano por la informacion…
tengo una web en dos idiomas y me gustaria q al cambiar al segundo idioma me cargue otra hoja d estilo como podria hacerlo?
Hola, estoy en el mismo caso que TONYMAN.
Tengo varios idiomas que los seleccionas en la pagina principal y almacenoe n una variable de sesi贸n, como puedo utilizar esa variable de sesi贸n para cargar un css u otro?
gracias, un saludo.
GUS lo que puedes hacer se almacenar la ruta donde est谩n tus css en la cookie entonces as铆 indicas si es frances, ingles espa帽ol, ….
Ejemplo: para ingles “css/ingles/”
Para frances “css/frances/”
y esto se lo agregas con una variable a la hora de cargar tus css.
Espero que te sirva de ayuda