Alternative stylesheets

benbacardi · #1 Apr 18th, 2004, 11:51

Can anyone tell me how to switch between alternative stylesheets? I cant work out how. Thanks...

Webforumz Staff · #2 Apr 18th, 2004, 15:04

The best way I can see is to have a server-side script change the include line...

Smokie · #3 Apr 19th, 2004, 09:36

or javascript and document.write()

Rob · #4 Apr 19th, 2004, 17:21

You would prolly want to make use of a cookie to store the users stylesheet preference. use the server side to check the cookie and serve up the right css file.

benbacardi · #5 Apr 19th, 2004, 19:50

can't sumbody write me a javascript function for example to help me?

courtjester · #6 Apr 19th, 2004, 20:21

So basically you want someone to do the work for you? I find it a ton better if people just tell me the logic behind it then I do it myself, or they tell me what I need to use then I try and put them together. You will learn a lot more that way my friend.

benbacardi · #7 Apr 19th, 2004, 20:23

yes im sorry but im not that good really

Webforumz Staff · #8 Apr 19th, 2004, 20:37

A Javascript would be a pretty bad idea for this IMO. If someone has disabled javascript then they won't get a stylesheet at all. You could accomplish this very easily with either ASP of PHP.

If you wish to tackle this in ASP Court Jester, here's the logic.

Script checks if cookie exists, if it doesn't, then it serves the default stylesheet.
If the cookie exists then it reads the cookie and serves the correct stylesheet.
If someone clicks on a link which passes variables to the script, then the script serves that stylesheet (from the variable) and sets a cookie based recording that stylesheet.

I could do this in ASP, except I haven't tackled cookies yet. I bet it's simple as pie though, right?

benbacardi · #9 Apr 19th, 2004, 20:53

my server wont allow asp....

Rob · #10 Apr 19th, 2004, 21:17

what does your server allow?

Smokie · #11 Apr 20th, 2004, 08:18

yup Sirkent, cookies + ASP = pie

benbacardi · #12 Apr 20th, 2004, 13:40

my server is just basic free with my web provider... i dont know exactly but ASP pages don't work on it

Webforumz Staff · #13 Apr 20th, 2004, 14:37

Well then to be honest you would be better off sticking to one stylesheet. Like I said, this could be accomplished with Javascript but if someone has disabled it then they won't get a stylesheet at all.

benbacardi · #14 Apr 20th, 2004, 14:52

but if you have a default style sheet then surely that one will be used regardless of the javascript enabled?

wheatus · #15 Apr 20th, 2004, 16:26

I am not an expert but this is what I used before we switched over to asp.

styleswitcher javascript as follows:

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);

Put something like this in the <HEAD> tag:

<style type="text/css" media="all">@import url(/Templates/lightblue_sidebars.css);</style>
<link rel="alternate stylesheet" type="text/css" media="screen" title="highcontrast" href="/Templates/accessible_plus.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="dyslexia" href="/Templates/dyslexia.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="/Templates/lightblue_sidebars.css" />
<link rel="stylesheet" type="text/css" media="print" href="/Templates/lightblue_sidebars.css" />
<script type="text/javascript" src="/Templates/styleswitcher.js"></script>

then add a form with the relevant names of the stylesheets. Such as:

<form action="../../test/googoodoll" class="vs0">
<label>
<input type="radio" name="radiobutton" value="radiobutton" onClick="setActiveStyleSheet('default'); return false" />
Design View</label>
<label>
<input type="radio" name="radiobutton" value="radiobutton" onClick="setActiveStyleSheet('highcontrast'); return false" />
High Contrast
<input type="radio" name="radiobutton" value="radiobutton" onClick="setActiveStyleSheet('dyslexia'); return false" />
Yellow/Black</label>
<label> </label>
</form>

As I said I am no expert so there is probably a simplier way to do this but this worked for me.

benbacardi · #16 Apr 20th, 2004, 17:07

thanks m8

Rob · #17 Apr 20th, 2004, 17:59

That works, but really, I would NEVER use javascript unless there is absolutly NO OTHER WAY.
:P

therese · #18 May 14th, 2004, 13:14

is there an asp way to change style sheets depending on browser, basically my css is looking awful in Netscape navigator!

Smokie · #19 May 14th, 2004, 13:22

Creating Dynamic Style Sheets Using ASP

http://www.devarticles.com/c/a/ASP/C...ets-Using-ASP/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Alternative to frames	jonnymorris	Web Page Design	13	May 10th, 2008 09:23
ppc alternative	timmytots	Webforumz Cafe	0	Dec 15th, 2006 17:27
Alternate stylesheets problem	masonbarge	JavaScript Forum	4	May 17th, 2006 18:01
Alternative CSS Selection (IE)	Andy K	Web Page Design	3	<

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Alternative stylesheets