function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
</script>

3º Paso

Este paso no es necesario aunque te ayudara hacerlo mejor.lo que teneis que hacer es ir a "controlar páginas" y crear un apartado ocn el nombre de "pruevas"

4º Paso

Este es el paso mas importante de todo(solo editen la parte roja y mas abajo en el paso 5º os explicara como editarlo)

Este codigo se pone en el apartado de "pruevas"

Codigo

______________________________

 <center><center>
<link href="Aqui va el diseño principal,el que se vera en la web al entrarp or primera vez.css" type="text/css" rel="stylesheet" />
<link title="wallE" media="screen" href="Aqui el 2º diseño que has creado.css" type="text/css" rel="alternate stylesheet" />
<link title="verde" media="screen" href="Aqui el 3º diseño que has creado.css" type="text/css" rel="alternate stylesheet" />
<link title="naranja" media="screen" href="Aqui el 4º diseño que has creado.css" rel="alternate stylesheet" /><font color="#c0c0c0"><font face="Comic Sans MS" size="3"><br />
</font></font><a href="javascript:chooseStyle('none', 60)"><br />
<img alt="" src="Aqui va la imagen que te llevara al diseño principal" /></a> <a href="javascript:chooseStyle('wallE', 60) "><img alt="" src="Aqui va la imagen que te llevara al diseño 2º" /></a> <a href="javascript:chooseStyle('verde', 60)"><img alt="" src="Aqui va la imagen que te llevara al diseño 3º" /></a> <a href="javascript:chooseStyle('naranja', 60)"><img alt="" src="Aqui va la imagen que te llevara al diseño 4º" /></a>
<p> </p>
<p align="justify"> </p>
</center>
<div> </div>
</center>
<div> </div>

__________________________________

Si quereis añadir mas plantillas solo tienen que copiar y pegar pero debe estar en orden(ejemplo si esta la plantilla 4,copiais su apartado y poneis uno debajo pero no del todo si no debajo del apartado 4º parap oner la  plantilla y con lasi magenes pasa los mismo)

Las imagenes se pone cualquiera pero se aconseja que sea pequeñita para que no ocupe mucho más o menos de 20 x18(es la estatura de la imagenes de nuestro script de la web)

5º Paso

Este paso es uno muy facil aunque parece dificil para hace que nuestros diseños sean .css para que se pongan las plantillas en el codigo del paso 4º  
Cogemos la 1ºplantilla(la principal)reuerden solo la parte de style tags,y cuando termineis de editarla para como va a quedar solo tienes que poner guardar como y te sale un cuadro,en la segunda linea sale algo como .txt pues tocan ahy y te sale .txt o todos los prefijos(o algo parecido)tocan eso ponen y en la primera linea pones el nombre y lep ones el prefijo .css, ejemplo=



Y asi con todas las plantillas,ya despues para subirlas vallan a un upload(recomendado fileden.com)para subir este archivo y lo colocais en la partes indicada de roja que estan en el paso 4º

6º Paso

Ahora cuando ya tengais el las dirreciones .css y pasadasp or el fileden y puestas en le codigo toca las imagenes lo unico que teneis que hacer es ponerlas pero (ni se os ocurra cambiarlas de sitio ya que es haria perder los link de las plantillas)

7º Paso

ahora solo teneis que guardar y ver como quedo si no funciono esque has hehco algo mal si no pasa al paso 8º

8º Paso

Este paso es cuando ya tengais todo bien colocais este codigo encima de la página
(este codigo servira para poner el scrip donde quieras en la web)

Codigo
______________________________

<div style="position:absolute;left:100px;top:100px;">aqui va el script</div>
_______________________________

Y ahora copiais el codigo ya terminado por ustedes del paso 4º y lo poneis entre el codigo que os acabo de dar y ya esta

y borrais el apartado de pruevas y ya esta(avisado importante el script no se puede quedar en el apartado por que si no solo se pondra para esa hoja nada mas que debeis onerlo ecima de la pagina como se ecxplica en el principio de paso 8º)

Tutorial by:Skys-Design