954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

is it possible to make changable themes with css?

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.

tiger86
Posting Pro
548 posts since Feb 2008
Reputation Points: 48
Solved Threads: 11
 

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.

mike_g
Newbie Poster
14 posts since Jul 2008
Reputation Points: 12
Solved Threads: 3
 

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

tiger86
Posting Pro
548 posts since Feb 2008
Reputation Points: 48
Solved Threads: 11
 

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.

mike_g
Newbie Poster
14 posts since Jul 2008
Reputation Points: 12
Solved Threads: 3
 

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.

tiger86
Posting Pro
548 posts since Feb 2008
Reputation Points: 48
Solved Threads: 11
 

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

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

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

tiger86
Posting Pro
548 posts since Feb 2008
Reputation Points: 48
Solved Threads: 11
 

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

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

Thanks a ton!

tiger86
Posting Pro
548 posts since Feb 2008
Reputation Points: 48
Solved Threads: 11
 

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

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

Ok il let you know when am done!

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

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.

MelechM
Junior Poster in Training
55 posts since Sep 2008
Reputation Points: 11
Solved Threads: 6
 

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!

MelechM
Junior Poster in Training
55 posts since Sep 2008
Reputation Points: 11
Solved Threads: 6
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You