Member Avatar for tiger86

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
  • 342 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by MelechM

Recommended Answers

All 12 Replies

Member Avatar for mike_g

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.

Member Avatar for tiger86

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

Member Avatar for mike_g

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.

Member Avatar for tiger86

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.

Member Avatar for essential

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

Member Avatar for tiger86

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

Member Avatar for essential

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

Member Avatar for tiger86

Thanks a ton!

Member Avatar for essential

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

Member Avatar for essential

Ok il let you know when am done!

commented: Essential is very nice and helpful. +1
Member Avatar for MelechM

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.

Member Avatar for MelechM

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.