How change multi theme with css file

HI, I make a website which have function changing theme. On the header website I put 3 colours, when I click on the colour then my site is changed by this selected colour.
My site use css2, I have 3 css file. I want to use them to change theme
Note: when I close the browser or the site is refreshed then selected theme not change
To make reference: http://msn.com
Note: some computer can't create cookie so when I use javascript to create and  read cookie then my site is not run function theme
Please show me solution use PHP language
Thank you
VIETSKYAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
Without some server side way to keep track of this (i.e. login and database) the only option would be to require cookies to be enabled.  If it isn't that important then you can allow visitors to not support cookies but a different language will not get around this issue.

Do you visitors need to have this or is it just a convenience?  Are you willing to require cookies?  Unfortunately it can even be difficult to really test if cookies are disabled or not.  Also telling your users how to enable cookies may not be easy.

Let me know if you have any other questions related to this.
0
 
b0lsc0ttIT ManagerCommented:
VIETSKY,

I'm not real sure if I understood the question correctly but if cookies aren't supported or cookies are disabled then PHP will not work either.  PHP, and even other server languages, would use cookies to do what you want.  If the reason it didn't work is JavaScript being disabled or not supported then but cookies do work then you could try PHP.

You set a PHP cookie using:

setcookie("cookiename", "value");  // needs to be set before HTML sent to browser

You can retrieve the cookie (after it is set and created) using:

$_COOKIE["cookiename"]

This should at least get you going.  Please let me know if I misunderstood the question.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 
VIETSKYAuthor Commented:
I  had a solution as:
<link rel="stylesheet" type="text/css" href="css/style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="css/style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="css/style3.css" title="style3" />
<script type="text/javascript" src="js/styleswitcher.js"></script>

Content of styleswitcher.js below:
But when I use this solution then some computer can't create cookie so my site can't load style. Do you have other solution to me, thank you

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);
0
 
scrathcyboyConnect With a Mentor Commented:
You cannot really do what you are trying to do.  You want to change the CSS file based on a user click, but the CSS file is ALREADY loaded for the browser session.  Therefore you MUSt have a server refresh to load a different CSS file.  And this means running a server response, which is slow.

If all you are trying to do is change colors / styles on a user click, you simple do this with JS, not PHP, and it is very simple to change the style of a cell or table or sheet by JS using the onclick handler.  It is almost impossible NOT to run JS for websites any more, the 1% that do not allow it, just ignore them.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.