Help - Search - Members - Calendar
Full Version: Js And Css Stylechanger Script
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript
IamShipon1988
This is a very cool script that allows you to make a very attracting and customizable template for your website. This is called a style changer. It allows visitors to change the layout according to a selected stylesheet. The following continues after you have your main and the 4 changeable stylesheets already created for the template.

Step 1:

Create a file called stylechanger.js
Step 2:
Publish the following code within the newly created file
CODE
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);

Step 3:
Before your header tag add the following code
CODE
<style type="text/css">@import"style.css";</style>
<link rel="stylesheet" href="style1.css" type="text/css" title="blue">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="pink">
&lt;script type="text/javascript" src="styleswitcher.js"></script>

(Please modify the "style1.css, style2.css, etc. to the name of your stylesheets, you can change the title of the script but I recommend you leave it as it is)
Step 4:
Where you want the button to appear, add the following code
CODE
<a href="#" onclick="setActiveStyleSheet('blue'); return false;" title="Change background to nature" ><img src="images/tbimg2.jpg" alt="Change background to sharp grass" border="0" /></a>
<a href="#" onclick="setActiveStyleSheet('red'); return false;" title="Change style to Red"><img src="images/tbimg1.jpg" alt="Change style to Red" border="0" /></a>
<a href="#" onclick="setActiveStyleSheet('green'); return false;" title="Change style to Green"><img src="images/tbimg3.jpg" alt="Change background to cat-eye" border="0" /></a>
<a href="#" onclick="setActiveStyleSheet('pink'); return false;" title="Change background to sky"><img src="images/tbimg4.jpg" alt="Change style to Pink" border="0" /></a>

(Please note that you have to change images/tbimg1.jpg (2,3,4) with the location of your image. You can also modify the alternate hover title to what ever you wish. Remember what I said before, not to change the name, well this is why, now you will have to change the names again here and make sure you call the right stylesheet)
Step 5:
Now save and test to see if it works.

If you would like to view a stylechanger script that is coded in php, please click here
MrTouz
i did not see it, or was it not much explained :

the thing is once you hit the link (to change your style) its just gonna load a different style at a time.
we hit <a href....Blue</a> than its gonna load Blue style which lets say is going to be name bluestyle.css.

the trick :

have a style.css where you hold your FULL style, when i mean FULL style i mean anything that will be the say no matter wich "color" you choose...
And inside the other styles such as bluestyle.css put the specific style informations (which you want to change once you hit link) this is to save your having long lines of cascading style sheets copied 3 4 5 times... for example :

My Main style called style.css (is going to hold basic informations) :

body {
margin:0;
padding:0;

Now my blue style (which is holding specific blue colors biggrin.gif and other things i want to change)

html, body {
background-color:#003646;
font-family: Tahoma, Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;

Now probably my green style (which holds anything related to green ?)

background-color:#666666;
font-family: Tahoma;
font-size:20px;

_____

As you can see the main style which is style.css holds basic infos, and the other styles holds the rest, whats the diference between the styles i showed ? well background color for example, font size, font face... but you can add anything, ... images aswell... OF COURSE IMAGES !

_____

I wrote a FULL tutorial a year ago and had all files hosted... but i deleted my forums... without even wanting to do it, i never got it up again... and i lost data :

what i am trying tell is that its kinda tricky to make it work, on the way the informations are sent, who receives, whch one takes it first or second...

no worries, took me a week before i figured it out :/
IamShipon1988
Well it works fine and does exactly what you described it to do. If you don't believe me, here's a live demo: http://www.sazzadhossain.info/portfolio/template/diversity/
Tom
You didn't write this script, please include credit where due.
MrTouz
i don't think there is a author :/ at least i never found one. i remember downloading this style from a template... where i modified to apply to one of my site, and i never had any authors... i guess he can't post author...

also, since its a script... can't it be written by many people ?

i mean you are not going to put credit because you saw me doing
<table>
<tr>
<td>
</td>
</tr>
</table>

tongue.gif

anyways who ever got this thing sorted out is a master...
IamShipon1988
QUOTE(Tom @ Nov 14 2007, 11:21 AM) *
You didn't write this script, please include credit where due.

I did state the code was from a template. I don't remember which user as I wrote this tutorial was written a long time ago.
MrTouz
i had the link to who ever maded this, wouldnt be able to tell you if he was the real creator but at least i think it was from him.
IamShipon1988
If you can, plesae do post a link or list his name. Thanks
Paranoid
Style Changer is a nice feature, thinking about implementing something like this on my website.
IamShipon1988
I'm not really sure why but the stylechanger is not working for me when I use it on a layout where I use includes to call for the header. I guess I'll try the php one instead.
MrTouz
QUOTE
I guess I'll try the php one instead.


heard about that as well... if i found one i will try it... never used on before... (kind of scared of PHP)
wozzym
i like the script but im not a huge fan of people being able to change the template. It often creates an inconsistent and harder to maintain layout. but thanks for the tutorial! ill still try it out tongue.gif
MrTouz
well it really depends how you manage to do it.

If at the begining you make things simple than you do not need to have worries. If you have DIV templates than its really really simple ! you just need to be careful at the begining and code it like you know you are going to change the layout. i would suggest a peace of paper and to write it down.. plan it..
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.