Can I have various style sheets, and the user select what one?

liunx

Guest
Hi,

I think this is possible, not not too sure on the ins and outs of how to go about doing it,

What I am after, is say I create 2 or 3 different style sheets for a web site, and they have different layouts, is it possible for me to allow the user to select which ever style they want to use, and store it no the computer?

Cheers<noscript><style type='text/css'><!--
@import 'default.css';
-->
</style>
</noscript>
<script type="text/javascript"><!--
if(document.cookie.indexOf("style=") != -1){
document.write("<style type='text/css'><!--\n@import '"+document.cookie.split("style=")[1]+"';\n-->\n</style>");
}else{
document.write("<style type='text/css'><!--\n@import 'default.css';\n-->\n</style>");
};
function changestyle(obj){
document.cookie="style="+obj.options[obj.selectedIndex].value;
var n = document.getElementsByTagName("STYLE")[0];
n.innerHTML = "@import '"+obj.options[obj.selectedIndex].value+"'";
};

//-->
</script>

...
</head>
<body>
...


<script type="text/javascript"><!--
var x = "<select onchange='changestyle(this)'>";
x += "<option value='default.css'"
if(document.cookie == "style=default.css"){
x += " selected";
};
x += ">default</option>";
x += "<option value='style2.css'"
if(document.cookie == "style=style2.css"){
x += " selected";
};
x += ">alternate</option>";
x += "<option value='style3.css'"
if(document.cookie == "style=style3.css"){
x += " selected";
};
x += ">yadda</option>";

document.write(x+"</select>");
//-->
</script>Here's a php way :http://www.alistapart.com/articles/phpswitch/ .I wouldn't recomend that, they use cookies in PHP which is just wrong, in PHP you have access to sessions which always work, unlike cookies that still rely on the users computer have cookies enabled.

although it's a nice guide for begining you should still replace the cookies with sessions.A great example site on the subject
<!-- m --><a class="postlink" href="http://www.csszengarden.com/I">http://www.csszengarden.com/I</a><!-- m --> wouldn't recomend that, they use cookies in PHP which is just wrong, in PHP you have access to sessions which always work, unlike cookies that still rely on the users computer have cookies enabled.

although it's a nice guide for begining you should still replace the cookies with sessions.
Let me make it clear - I'm not arguing :) .
Can you explain this for me? Why would it be wrong to use cookies here rather than sessions? Surely the cookie sets the style for... well forever (or however long you set it for... or until it's changed) but using sessions would mean that the user would need to change to the stylesheet they wanted on each session. That's right, isn't it?yes, you need cokkies unless you want your users to select it each time they visitIf the users register on the site, then you could store and retrieve their preference from the user database. Anyway, I don't see a big deal with using cookies: if the user is not accepting them then they just lose the ability to select their style, not the content and functionality of the page.Anyway, I don't see a big deal with using cookies: if the user is not accepting them then they just lose the ability to select their style

True. Even in this forum, if you delete the cookies in your computer (or you don't accept them on first log) you lose nothing, except that you have to login each time when eneter. So for this kinda stuff, cookies are to be prefered, as it will increase the speed of accesing the page.From Peter Hawkes
<!-- m --><a class="postlink" href="http://www.alistapart.com/discuss/phpswitch/3/">http://www.alistapart.com/discuss/phpswitch/3/</a><!-- m -->

<?php
session_start();
?>
<?php
if(isset($_GET['css'])){
switch ($_GET['css']) {
case 'css1':
$stylesheet = '<link href=http://www.webdeveloper.com/forum/archive/index.php/"theme1.css" type="text/css" rel="stylesheet">';
$_SESSION['csschanger']=$stylesheet;
break;
case 'css2':
$stylesheet = '<link href=http://www.webdeveloper.com/forum/archive/index.php/"theme2.css" type="text/css" rel="stylesheet">';
$_SESSION['csschanger']=$stylesheet;
break;
case 'css3':
$stylesheet = '<link href=http://www.webdeveloper.com/forum/archive/index.php/"theme3.css" type="text/css" rel="stylesheet">';
$_SESSION['csschanger']=$stylesheet;
break;
case 'css4':
$stylesheet = '<link href=http://www.webdeveloper.com/forum/archive/index.php/"theme4.css" type="text/css" rel="stylesheet">';
$_SESSION['csschanger']=$stylesheet;
break;
default:
$stylesheet = '<link href=http://www.webdeveloper.com/forum/archive/index.php/"cssdefault.css" type="text/css" rel="stylesheet">';
$_SESSION['csschanger']=$stylesheet;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona?quot;>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Changer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php echo ($_SESSION['csschanger'])? $_SESSION['csschanger']: '<link href=http://www.webdeveloper.com/forum/archive/index.php/"cssdefault.css" type="text/css" rel="stylesheet">' ;?>
</head>

<body>
<A href=http://www.webdeveloper.com/forum/archive/index.php/"<?php echo $_SERVER['PHP_SELF']; ?>?css=css1">Stylesheet 1</a><br />
<A href=http://www.webdeveloper.com/forum/archive/index.php/"<?php echo $_SERVER['PHP_SELF']; ?>?css=css2">Stylesheet 2</a><br />
<A href=http://www.webdeveloper.com/forum/archive/index.php/"<?php echo $_SERVER['PHP_SELF']; ?>?css=css3">Stylesheet 3</a><br />
<A href=http://www.webdeveloper.com/forum/archive/index.php/"<?php echo $_SERVER['PHP_SELF']; ?>?css=css4">Stylesheet 4</a><br />
</body>
</html>
 
Back
Top