W: Resize to find out!
H: Resize to find out!
Publicado hace: 15 años

Php: Cambiador de estilos Css (styleswitcher)

Buscaba implementar un «style switcher» en una web que estoy preparando, hice algunas pruebas con diferentes códigos, lamentablemente ninguno funcionó como esperaba, desde javascript hasta php; cuando ya hube tirado la toalla (por enésima vez) recibí la ayuda de Gerald quien revisó el código, me hizo saber de los errores, y finalmente lo dejó funcionando (que excelente trabajar con un programador).

El código original lo obtuve de este blog y pertenece a Jorge Yau pero lamentablemente no funcionaba en mi web, entonces se ha modificado el script para poder hacer uso de las variables superglobales, según Gerald es un error común entre muchos programadores (entre ellos yo (aunque claro, apenas soy un newbie)).

Por otro lado, había un pequeño problema ya que el script intentaba llamar a los archivos llamados estilo#.css mientras que los archivos creados llevaban nombres del tipo style#.css, estos nombres fueron modificados.

Además se cambió la forma como se vincula a la hoja de estilos, que por alguna extraña razón no funcionaba en mi web. El script finalmente quedó de esta manera:

Style Switcher
1. Crearemos un archivo llamado estilo.php con el siguiente contenido:

    <?php
    //Idea Original de  Jorge Yau
    // info@jorgeyau.com
    // www.jorgeyau.com
    // 2003

    //Modificado por Geraldo Sosa
    //http://www.g2project.com/blog
    // gerald@artecaracol.com
    //2006

    // creamos el cookie con el valor del style que queremos utilizar,
    // time()+31536000 significa que el cookie debe expirar en un año.
 setcookie
	('estilo', $_GET["set"], time()+31536000);
    // Esto nos regresa a la misma pagina donde hiciste click
    header("Location: $_SERVER[HTTP_REFERER]");

    ?>

2. Creamos las hojas de estilo que usaremos y les pondremos los nombres: estilo1.css, estilo2.css, y así sucesivamente.

3. En la Head de nuestra página llamaremos a las hojas de estilo:

<link href="estilo<?php echo (!$_COOKIE["estilo"])?'1':$_COOKIE["estilo"] ?>.css" rel="stylesheet" type="text/css" />

4. Luego en el template de tu pagina preferiblemente en un lugar visible colocamos el siguiente código, dependiendo de la cantidad de stylesheets que utilizaremos:

<p>Escoge el diseño<br />
<a href="estilo.php?set=1">Diseño 1</a> | <a href="estilo.php?set=2">Diseño 2</a> | <a href="estilo.php?set=3">Diseño 3</a></p>

Y listo.

ser humano

Music & Design & Photo & Bike.

Test, fail, learn, repeat.

2 Responses to “Php: Cambiador de estilos Css (styleswitcher)”

  1. tikitakfire dice:

    hola! como hago para ponerlo en wordpress?

  2. […] Sergio from Idioteca found a piece of code that I posted years ago, he took the code and improved a little bit, That’s the great thing about open source. […]