asked on

Theme Switcher that changes themes for the entire site

Please take a look at this page: http://travelnursecpa.com/FAQ.html. How do I code it so that when you select one of the radio buttons it applies the theme change to every page in the site? And must the script and html for the change be on the homepage?

Thanks!

John

quincydude

the idea is simply as below, you just have to made a number of css files and apply them to the page according to the setting.

<html>
<head>
<link rel="stylesheet" type="text/css" id="style1" href="style1.css" />
 
<script type="text/javascript">
function changeStyle(opt)
{
document.getElementById("style1").href= opt.value + ".css";
}
</script>
</head>
<body>
 
<form>
<input type="radio" onclick="changeStyle(this)" value="style1" />Original
<input type="radio" onclick="changeStyle(this)" value="style2" />Another
</form>
 
</body>
</html>

Open in new window

John Carney

ASKER

Hi quincydude, thanks for posting. The problem I'm having is that I can't see where it will change the theme on more than one page, but I couldn't get it to work anyway. When I test it locally, radio button stays selected, and nothing changes. When I test it online, the radio buttons don't select at all. Please take a look at how I used (misused?) your code: http://travelnursecpa.com/indexSwitchTheme.html (Ignore the Background image of the tab)
The code I already have works fine, but only does the one page. I'm looking for something that changes the theme on all 9 pages of the site simultaneously.
Thanks,
John

quincydude

oops, i forgot to add the radio button name, if you want to save the chosen value to be used in all pages, you may have to use cookies to store it.

<html>
<head>
<link rel="stylesheet" type="text/css" id="style1" href="style1.css" />
 
<script type="text/javascript">
function changeStyle(opt)
{
document.getElementById("style1").href= opt.value + ".css";
 
}
</script>
</head>
<body>
 
 
<input type="radio" name="css" onclick="return changeStyle(this);" value="style1" >Original
<input type="radio" name="css" onclick="return changeStyle(this);" value="style2" >Another
 
 
</body>
</html>

Open in new window

quincydude

you may be interested to check this example out, I have added the cookie bit :)

<html>
<head>
<link rel="stylesheet" type="text/css" id="style1" href="style1.css" />
 
<script type="text/javascript">
 
function changeStyle(opt)
{
document.getElementById("style1").href= opt + ".css";
setCookie("userstyle",opt,365);
}
 
function getCookie(c_name)
{
	if (document.cookie.length>0)
	{
	  c_start=document.cookie.indexOf(c_name + "=");
	  if (c_start!=-1)
	  { 
			c_start=c_start + c_name.length+1; 
			c_end=document.cookie.indexOf(";",c_start);
			if (c_end==-1) c_end=document.cookie.length;
				return unescape(document.cookie.substring(c_start,c_end));
	  }
	  return "";
	}
	return "";
}
 
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
 
function checkColor()
{
  userstyle=getCookie('userstyle');
 
  if (userstyle != "")
    {
	  changeStyle(userstyle);
	  var rad = document.getElementsByTagName("input")
	  for(var y=0;y<rad.length;y++)
	  {
	    if(rad[y].type=="radio" && rad[y].value == userstyle)
		   rad[y].checked = true;
	  }
    }
 
}
</script>
</head>
<body onload="checkColor();">
 
 
<input type="radio" name="css" onclick="changeStyle(this.value);" value="style1" >Original
<input type="radio" name="css" onclick="changeStyle(this.value);" value="style2" >Another
 
 
</body>
</html>

Open in new window

John Carney

ASKER

I was going to ask you about the cookies later, but first I've got to get the theme switcher to work. Here is what I have that doesn't work:

MY TWO STYLESHEETS:

<link href="http://www.discretedata.com/TravelNurse/css/greenStuff.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" type="text/css" title="blue" href="http://www.discretedata.com/TravelNurse/css/blueStuff.css" /><link href="http://www.discretedata.com/TravelNurse

MY HEAD SCRIPT:
<script type="text/javascript">
function changeStyle(opt)
{
document.getElementById("greenStuff").href= opt.value + ".css";
}
</script>

MY HTML:
<input type="radio" name="css" onclick="return changeStyle(this);" value="greenStuff" >Original
<input type="radio" name="css" onclick="return changeStyle(this);" value="blueStuff" >Another

*********************

Please correct it for me. I'm assuming that any and all changes will be in one or more of these snippets.

Thanks,

John

John Carney

ASKER

Hi quincydude,

This might make it easier to grasp what I'm looking for. I've stripped down the file I've been working with to the bare bones. These are the only 2 files in their folder. How do I change the HTML, CSS and/or javascript so that when I click on the button below the word "blue", BOTH pages change to the blue theme?

http://www.discretedata.com/JCRD/Misc/StyleSwitch/StyleSwitch1.html
http://www.discretedata.com/JCRD/Misc/StyleSwitch/StyleSwitch2.html

Please reprint the entire code of StyleSwitch1.html exactly as it is with the necessary corrections. If the javascript needs to change, please add the changes in the head of the html.

Thanks!

John

John Carney

ASKER

Also, could you please add your cookie code to my most recent condensed html, with the references changed to my css docs. This is just one of those things that I can't figure out without all the breadcrumbs.

Thanks,

John

quincydude

Looks like you have figured out the button bit. If you want to use the cookie thing, just check my last reply. That should work.

John Carney

ASKER

Hi quincydude,
Yes I have the theme swirched part working, but i couldn't get it to work with your code. My most recent condensed versions of the page are using my original code. Coukld you please put the cookie thing together with my code, and re-post the entire code? Later I can work on getting your ctheme switcher code to work, because i always like knowing more than one way to do something.
Thanks!
John

ASKER CERTIFIED SOLUTION

quincydude

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

John Carney

ASKER

Hi quincydude, sorry I've been away from this for a while. I'll check this out as soon as I get home tonight.
Thanks,
John

John Carney

ASKER

Well obviously I didn't get to check it out when i got home that night! Please accept my apologies.

I just out together two pages for you to see: http://www.discretedata.com/JCRD/TravelNurseCPA/Page1.html and http://www.discretedata.com/JCRD/TravelNurseCPA/Page2.html.

What now do I need to do to identify the two pages as being part of the same site, to get them both to switch styles when the switch is initiated by one of them? In this particular case, they are several folders deep in a much larger site.

I hope this makes sense. Thanks. - John

John Carney

ASKER

if it works for you that's good enough for me. I'll work on it some more and if I still can't get it, I'll approach the question from a little different angle.
Thanks.