[SOLVED] CSS Skin

[Monie]

Hai everyone,

I just love CSS! My page looks great and neat with CSS.
I just love learning and discover new things with CSS.

Because of that, I have created two CSS for my page, one using a lot of blue, and another one using a lot of purple.

Is there a way for me to change the "skin" of my page by using a drop down menu to select which color (css) I want to view my page?

Yahoo page option looks cool, anybody know how to do that?
Thanks...

[AdRock]

I have done something with this for a website I had to make at Uni

It is written in JS but there are php versions but i haven't got the code for that

Basically, in the head section of you page you put

Code: Select all

<link rel="stylesheet" type="text/css" href="includes/default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="includes/alternate.css" title="alternate" />

include the JS file like this also in the head section

Code: Select all

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

and create some links using images or whatever to switch between stylesheets

Code: Select all

<a href="#" onclick="setActiveStyleSheet('default'); return false;"><img  src="images/default.gif" alt="Default" /></a>
     <a href="#" onclick="setActiveStyleSheet('medium'); return false;"><img  src="images/alternate.gif" alt="Alternate" /></a>

This is styleswitcher.js

Code: Select all

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

<a href="#" onclick="setActiveStyleSheet('default'); return false;"><img class="access" src="images/small.gif" alt="Default text size" /></a>

[Monie]

Thanks adrock, nice way.

I found the web tutorial on this topic, similar to your code (with explaination)

CSS Style Switch

Thanks again...

[Monie]

hey, got any idea how to do the "Yahoo Page Option"? (the drop down selection)

Looks cool...

[AdRock]

Never seen it

[Monie]

Look at my First post, I have included the print screen for the www.yahoo.com page.

[Marc]

Monie, can you not use that as your base for the SS switcher? And then just use images instead of the drop down list?

Also, you will need to find some Javascript... Let me have a look and i will try to build a prototype

[Marc]

Ive got the little switcher working.. now to find the dropdown javascript/ajax thing!

http://www.marcfraser.co.uk/monie/

[Marc]

Ive got the javascript dropdown thing working although you have to re-click Page Options to close it. Does anyone know how to close it automaticly on mouse click elsewhere on the page?

http://www.marcfraser.co.uk/monie/

[AdRock]

That is quite nice

[Monie]

Originally Posted by Marc

Ive got the javascript dropdown thing working although you have to re-click Page Options to close it. Does anyone know how to close it automaticly on mouse click elsewhere on the page?
http://www.marcfraser.co.uk/monie/

You are genious Marc!
Well, let sort this out. I tried to see the yahoo page option coding for that drop down option but I was lost somewhere in the middle

So, your design looks almost the same, maybe we could put some "X" (close) inside the drop down page option to close them. Or an "arrow-down" to open the page option, as soon as you click the arrow down it will change to "arrow-up" to close it.

I will try myself, and come back to you if I manage to solve them
Thanks again for your briliant idea.

[Monie]

You will love this Marc...
I found this interesting LINK for our refference.
I haven't got time to review them.

[Marc]

Cool - just have a play about with it!

[Monie]

Hai Marc,

I couldn't solve that problem. I have tried modified that code to implement your code but couldn't make it success.

[Marc]

I will try and play about with it over this weekend although i have school . I will more than likely have time to do it on Sat morning. Hopefully. Unless i have football.

[Monie]

Originally Posted by Marc

I will try and play about with it over this weekend although i have school . I will more than likely have time to do it on Sat morning. Hopefully. Unless i have football.

By the mean time, I'll try to "see" how yahoo did it

[Marc]

Originally Posted by monie

By the mean time, I'll try to "see" how yahoo did it

That'll be pretty hard as they are such a big website and just name files with xy and z in them!

Good luck

[Monie]

Yeah.. I know you would say that! LOL..
Its too complex for me to understand them...
Anyway, good luck with your study and your football this weekend...

[Monie]

Hey marc, did you notice the way this forumz implimented the javascript coding just like the yahoo page option?

Click on your name in this post next to the "Online" indicator. It is exactly the same that we are trying to archieve.

I'll have a look tonight and get back to you tommorow, see if I could "steal" the code

[Marc]

Oh.. Yes, good spot! If you need any hand in finding it, gimme a shout. I have a vBulletin licence and so therefore have all the files.