CSS style sheet change, zengarden [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : CSS style sheet change, zengarden

tripdragon

02-16-2004, 02:44 PM

Hi, I have a little homework on all of this.

First , hi :D. Second. I am trying to get style sheet changes to change like http://www.csszengarden.com/
I have this as an example from the website creator http://www.mezzoblue.com/zengarden/faq/switcher-php.txt check the source in that file.

Then I contacted him and he told me to do this
"You need to do a bit of work to get it functioning. It's split into two piece, the PHP and the HTML. Put the PHP at the top of your page (and make sure your file extension is .php or it won't parse.) Drop the HTML below where the comments say. You'll have to replace the values with your own. Hope that helps."

And I did all of that but it still does not work, my test page is here. http://aprilcolo.com/oh/plink/pick/muusk/mic/hatu.php

And last, I tried the tutorila from here http://www.alistapart.com/articles/phpswitch/ but that did not work.

I dod know that I have a working PHP SGI AND alll of that super power server stuff. But I am at a lost at why this is not working. Please help.

Rosey

02-16-2004, 03:22 PM

what is your actual code with the php? Post it so we can see.

tripdragon

02-17-2004, 01:02 AM

<?php

$tempCSS = $HTTP_GET_VARS["cssfile"];
if ($tempCSS != "") {
$loadCSS = $tempCSS;
} else {
/* sets a default CSS file if no querystring specified */
$loadCSS = "default.css";
};
$currentDesign = $loadCSS;

?>

That was the simple code in CSSzengarden

and this is the test site I broke apart from the CSSzengarden code base

<style title="currentStyle" type="text/css">
@import "fat.css";

</style>

</head>

<body id="css-zen-garden">

<div id="linkList">
<h3 class="select"><span>^v^</span></h3>
<p><a accesskey="a" title="AccessKey: a" href="http://aprilcolo.com/oh/plink/pick/muusk/mic/?cssfile=/yo/fat.css&page=0">Talk4</a> aaaaaaa <a accesskey="a" title="AccessKey: a" href="http://aprilcolo.com/oh/plink/pick/muusk/mic/?cssfile=/yo/ant.css&page=0">aaaaaa</a> aaaaaaa <a href="switcher.php?set=ant">
click here to change to RED style!</a>
<form action="switcher.php" method="post">
<select name="set">
<option value="ant" »
selected>Default</option>
<option value="ant.css">Crazy Red</option>
<option value="experiment"> »
Experimental Style</option>
</select>
<input type="submit" value="Change Style">
</form>

aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa</p> </div>

</div>
</body></html>

and lastly the java script

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

tripdragon

02-17-2004, 01:07 AM

and this is the test site I broke apart from the CSSzengarden code base

<style title="currentStyle" type="text/css">
@import "fat.css";

</style>

</head>

<body id="css-zen-garden">

<div id="linkList">
<h3 class="select"><span>^v^</span></h3>
<p><a accesskey="a" title="AccessKey: a" href="http://aprilcolo.com/oh/plink/pick/muusk/mic/?cssfile=/yo/fat.css&page=0">Talk4</a> aaaaaaa <a accesskey="a" title="AccessKey: a" href="http://aprilcolo.com/oh/plink/pick/muusk/mic/?cssfile=/yo/ant.css&page=0">aaaaaa</a> aaaaaaa <a href="switcher.php?set=ant">
click here to change to RED style!</a>
<form action="switcher.php" method="post">
<select name="set">
<option value="ant" »
selected>Default</option>
<option value="ant.css">Crazy Red</option>
<option value="experiment"> »
Experimental Style</option>
</select>
<input type="submit" value="Change Style">
</form>

aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa</p> </div>

</div>
</body></html>

tripdragon

02-17-2004, 01:11 AM

and lastly the java script

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

tripdragon

02-17-2004, 01:22 AM

to clean up that code two posts up

<style title="currentStyle" type="text/css">
@import "fat.css";

</style>

</head>

<body id="css-zen-garden">

<div id="linkList">
<h3 class="select"><span>^v^</span></h3>
<p><a accesskey="a" title="AccessKey: a" href="http://aprilcolo.com/oh/plink/pick/muusk/mic/?cssfile=/yo/fat.css&page=0">Talk4</a> aaaaaaa <a accesskey="a" title="AccessKey: a" href="http://aprilcolo.com/oh/plink/pick/muusk/mic/?cssfile=/yo/ant.css&page=0">aaaaaa</a> aaaaaaa <a href="switcher.php?set=ant">
click here to change to RED style!</a>
<form action="switcher.php" method="post">
<select name="set">
<option value="ant" »
selected>Default</option>
<option value="ant.css">Crazy Red</option>
<option value="experiment"> »
Experimental Style</option>
</select>
<input type="submit" value="Change Style">
</form>

aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaaa aa aaaa aaaaa aaaaa</p> </div>

</div>
</body></html>

tripdragon

02-17-2004, 10:57 PM

please help. I have been trying to get this to work forever now.