Cambiar de estilo css con php y jQuery

Hola como están en este tutorial vamos a crear la manera de que el usuario utilice un estilo diferente dando clic en los enlaces que posteriormente utilizaremos para cambiar de estilo…

El usuario escogerá uno dentro de los cuales ya tenemos prescogidos y seleccionados en nuestro dominio e aquí una breve explicación suponiendo un poco de conocimiento del programador de php y la utilizacion de las librería jQuery .

Este sistema es bastante sencillo vamos a ver conn que vamos a trabajar , antes de nada trata de ordenar un poco tus archivos de modo que se identifique cual carpeta contiene el archivo seleccionado..

ejm. c:/css/estilo.css

Archivos a utilizar :

index.php

estilo.css

theme.php

jquery.functions

jquery.js

index.php

dentro de <head> y </head> colocaremos los archivos necesarios a utilizar esta el css el jquery y el jquery.functions.js

   <head>
   <!-- configurar tema-->
    <?php
	if(!empty($_COOKIE['_theme'])) $style = $_COOKIE['_theme'];
	else
	{
	?>
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
	<?php
	}
	?>

<link id="estilo_dp" rel="stylesheet" href="<?php echo $style ?>.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.functions.js"></script>
	<!-- Tema fin -->
    <script type="text/javascript" src="jquery.js"></script>
   <title>Cambiar de estilo php jquery....!!!</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
   </head>

dentro del body e colocado una capa que e creado para contener las imagenes y una clase que va a llamar al estilo.

<div id="elegircolor">
    <div id="imagen_dp">
    <a id="style" title="elige tu color favorito" class="color"><span>color</span></a> 
    </div>
  <div id="css_dp">
  <a id="style"  href="theme.php?thm=red" title="lila" class="lila"><span>red</span></a> 
  <a id="style1" href="theme.php?thm=green" title="naranja" class="naranja"><span>green</span></a>
  <a id="style2" href="theme.php?thm=blue" title="celeste" class="celeste"><span>blue</span></a>
  </div>
 </div>

estilo.css

Hay que tener en cuenta que deberemos crear varios estilos con su respectivo nombre y guardarlos dentro de la carpeta estilo y despues llamarlos con su respectivo nombre en la clase ejm.

red.css , green.css , blue.css

el estilo por defecto deberá ser el siguiente y es el que va a apercer cuando un usuario entre a tu web después el se encargará de cambiar el estilo y una cookie se encargará de mantenerlo activo cuando el visite por siguiente vez la web.

#elegircolor          {width:260px;
			            height:23;
			            display:block;
						border:0;
						margin:0 10px 0 0;
						text-decoration:none;
						float:right;
						text-indent: -1000em;
						background-repeat: no-repeat;
						background-position: 0px 0px;
                       }
#imagen_dp a, imagen_dp span{width:133px;
						height:23px;
						display:block;
						border:0;
						margin:0 10px 0 0;
						text-decoration:none;
						float:left;
						text-indent: -1000em;
						background-image: url(eligecolor.png);
						background-repeat: no-repeat;
						background-position: 0px 0px;
						}
#imagen_dp a.color {background-position:0px -46px;} 


#css_dp a, css_dp span{width:12px;
						height:12px;
						display:block;
						border:0;
						margin:0 10px 0 0;
						text-decoration:none;
						float:right;
						text-indent: -1000em;
						background-image: url(colores.png);
						background-repeat: no-repeat;
						background-position: 0px 0px;
						}
#css_dp a.lila{background-position:0 -12px;} 
#css_dp a.lila span{background-position:0px 0px;} 
#css_dp a.naranja{background-position:-12px -12px;} 
#css_dp a.naranja span{background-position:-12px 0px;} 
#css_dp a.celeste{background-position:-24px -12px;} 
#css_dp a.celeste span{background-position:-24px 0px;} 
#css_dp a.verde{background-position:-36px -12px;} 
#css_dp a.verde span{background-position:-36px 0px;} 
#css_dp a.cafe {background-position:-48px -12px;} 
#css_dp a.cafe span{background-position:-48px 0px;} 
	
p{color:#666;
font-size:16px;
}
h1{ color:#666;
font-size:16px;}

theme.php se encargará de crear la cookie e iniciar donde el usuario dejó por ultima vez el color..

<?php
$tema=$_GET['thm'];
setcookie('_theme',$tema,time()+(86400*365),"/","");
if(isset($_GET['async'])) {
	echo $tema;
}else{
	header("Location: ".$_SERVER['HTTP_REFERER']);
}
?>

jquery.functions.js se encargará de crear el efecto y cambiar al estilo deseado por el usuario

$(document).ready(function(){
	
	// click en cualquier link </a> del contenedor #css_dp
	$("#css_dp a").click(function(){
		CargarCSS(this);
		return false;
	});
	
	function CargarCSS( CSSelegido ) {
		// obtener contenido del link </a> 
		// la variable async servira para identificar contenido asyncrono
		$.get( CSSelegido.href+'&async',function(data){
			// cambiamos atributo href del elemento estilo_dp, obtenido de theme.php
			$('#estilo_dp').attr('href', data + '.css');
		});
	}
});

jquery.js lo podrás descargar de la página de autor..

Es todo en cuanto puedo acotar cualquier pregunta podrás realizarla en los comentarios suerte..

Demostración