Jump to content

[SOLVED] Clicking a link to change style sheets

Roy766

By Roy766
in CSS Help

 Share

Recommended Posts

LooieENG Member

LooieENG

Posted
Posted

Make a folder called styles with style1.css, style2.css, etc.

 

Then, say the page is index.php, do index.php?style=(number of style)

 

And before the HTML tags

 

<?php

if ( isset($_COOKIE['style']) )
{
$s = 'styles/style' . $_COOKIE['style'] . '.css';
}
elseif ( isset($_GET['style'] && ctype_digit($_GET['style']) )
{
$s = 'styles/style' . $_GET['style'] . '.css';
setcookie('style', $s, time()+(99999*99999), '/');
}
else
{
// Default style
$s = 'styles/style1.css';
}

?>

 

And in the <head> tags of the HTML

 

<link rel="stylesheet" type="text/css" href="<?php echo $s?>" />

 

Try that, it SHOULD work. Make sure the page ends in .php, not .html

 

You can also probably do it with JavaScript, but I don't really know any, so you'll have to wait for someone who does post :P

Link to comment
Share on other sites
ZaksHQ Newbie

ZaksHQ

Posted
Posted

My site has that. so I'll help out.

 

Save this JS as 'styleswitcher.js' in your site's directory. Here is the JS code that the file 'styleswitcher.js' should have:

 

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

 

Don't ask about that code above, I didn't write it.

 

Then...

 

Make sure your CSS files are saved separately, and are not part of the HTML page. You should have something like this at the head of your HTML page.

 

<link rel="stylesheet" type="text/css" href="style1.css">

 

That code will make 'style1.css' the starting CSS when you enter the page. Add these after the code above, also, in the head of the HTML.

 

<link rel="alternate stylesheet" type="text/css" href="style1.css" title="style1title">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2title">

 

To add more than 2, just follow the same pattern.

 

And to top of the head code for this, add the code below after the code above.

 

<script type="text/javascript" src="styleswitcher.js"></script>

Now for the link that will change the CSS files.

 

Put something like this to change the CSS files around.

<a href="#" onclick="setActiveStyleSheet('style1title'); return false;" > Click here to change the CSS to style1.</a>
<a href="#" onclick="setActiveStyleSheet('style2title'); return false;" > Click here to change the CSS to style2.</a>
[hr]
That should work...

 

Link to comment
Share on other sites
Roy766 Member

Roy766

Posted
  • Author
Posted

Okay  :D But how do I make it so that the others pages load the predefined CSS template? Like, say I set my style to Green/Black on the index page, how would it make it so that a different page automatically load the same template?

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.