0

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.

4
Contributors
12
Replies
13
Views
8 Years
Discussion Span
Last Post by MelechM
Featured Replies
0

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.

0

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

0

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.

0

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.

0

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

0

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

0

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.

1

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!

Votes + Comments
Thanks :)
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.