View Full Version : CSS changer based on user's preferences

12-30-2002, 09:40 PM
I'm relatively new to web designing, but I saw a site a while back that had something I would like.
They had something that displayed a dropdown box to different CSS schemes, changing which CSS sheet the page used and keeping it that way. Say I wanted to use a different style sheet than the "blue, Times New Roman" one I was, the user could specify it be selecting a pre-made style sheet from a dropdown box and go for "scheme 5, a green, Metro font" one. And in doing this not having to create an entire different web using just a different style sheet.

Is this possible?

12-30-2002, 10:01 PM
you have to use javascript, and change it dynamically with different .css files. so yes it is possible

12-31-2002, 01:53 AM
Is there any premade javascript that can do this? I only know limited HTML, and I'm trying to learn something else right now.

12-31-2002, 05:14 AM
Took most of this from:http://www.codelifter.com/main/javascript/changestyles.html (hence the credit) and changed it so it used a drop down menu :).......



function land(ref, target)

{ lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
function jump(menu)
{ ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("&");
if (splitc!=-1)
{loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}



Copyright 2001 by www.CodeLifter.com
Free for all users, but please leave in this header.


<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
<link rel="stylesheet" href="style_3.css">
<link rel="stylesheet" href="style_4.css">

<script language="JavaScript">
var doAlerts=false;
function changeSheets(whichSheet){
var c = document.styleSheets.length;
if (doAlerts) alert('Change to Style '+(whichSheet+1));
for(var i=0;i<c;i++){


<Form action="" method=post name="">
<select name="choice" onChange="jump(this.form)">

<option value="JavaScript:changeSheets(1)">Style One</option>
<option value="JavaScript:changeSheets(2)">Style Two</option>
<option value="JavaScript:changeSheets(3)">Style Three</option>
<option value="JavaScript:changeSheets(4)">Style Four</option>



<p>Textity Texity Text</p>


any use?

12-31-2002, 10:03 AM
Also check out This article (http://www.alistapart.com/stories/n4switch/) on A List Apart (http://www.alistapart.com/) about this subject. They more recently had stuff using PHP, but that might not be possible on the server you use.

12-31-2002, 03:20 PM
Thank you sooooo much. :) I'll be sure to use both..

01-02-2003, 03:37 PM
The way I have always done it, and correct me please if I am wrong.


<link href="style.css" id="cssLink" rel="stylesheet" type="text/css">

and then somthing along the lines of: