Hey, I am hoping some kind soul out there can help me out. I want to make a site I am working on able to have more then one theme for example: Blue: Pink:Green:Flames is it possible to make it so when the person clicks the link it can load a css stylesheet for the whole website? I don't want to make each page in every theme color.

Yes, but AFAIK it would require a little scripting. You could save the style in a cookie, then select a stylesheet based on the value when the page loads.

Okay... so put the css style sheet within a cookie and then how will it know to load that cookie?

Not quite. You just store an id indicating which stylesheet to load. When loading the page you would then check for the id in the cookie, and if the cookie does not exits use the default style. You could then have a switch/if statement which includes the correct stylesheet.

could you give me a site that does this so I can read the source code to get a better understanding? Please and Thank you.

Yeah it is possible! But in this case we'l have to use some script to work over it! You my try JavaScript instead!

Thanks, I don't know that much Javascript I am currently studying actionscript.

I can work on it if you really need it! Just lemme know, ok!

Thanks a ton!

I can provide you some script on that 1! Just lemme know, ok!

Ok il let you know when am done!

commented: Essential is very nice and helpful. +1

It's possible. I got it running on my site, before I went all wordpress. I can send you an example and you can learn for yourself.

Here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Theme Changer</title>
	<link rel="stylesheet" type="text/css" href="DefaultCSS.css" title="A_Title_no_spaces" media="screen" />
    <link rel="alternate stylesheet" type="text/css" href="TheAlternativeCSS.css" title="A_Title_no_spaces_Different_from_above_title" media="screen" />
    <script src="style.js" language="JavaScript" type="text/javascript"></script>
</head>

<body>
<!-- This can go anywhere in your HTML -->
<a href="#" onclick="setActiveStyleSheet('A_Title_no_spaces');return false;">Default Theme!</a>
<a href="#" onclick="setActiveStyleSheet('A_Title_no_spaces_Different_from_above_title');return false;">Change the Theme to blue Theme etc!</a>
</body>
</html>

and style.js

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

Have fun!

commented: Thanks :) +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.