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. 

Demo | Descargar Código