Change ur website's look (skin)

**AN1MAL** · 03-27-2009

For school project i was making a website, and i got the idea. What if i let my users choose their own skin. That would be great, by website would have 3 colour themes. To do that i wanted to let users select their choice and the selection decides which CSS file it would use. I tried searching all night. I used some php scripts to switch css files and all failed. i found something interesting.

example css links, note that the title is very important to add we will use that for the user input.

Code:

<link rel="stylesheet" type="text/css" title="DARK"
    href="style_1.css">
<link rel="stylesheet" type="text/css" title="LIGHT"
    href="style_2.css">

example html code, when u click one of the buttons, it selects either style_1.css or style_2.css and you might ask yourself why? well
onclick="switch_style('DARK'); now notice something? we gave style_1.css DARK as title same goes with style_2.css we gave it LIGHT title and in second button onclick="switch_style('LIGHT');

So that is very important, u can change them to any name u want but remember that each style should have same name at the onclick event.

Code:

<form>
<input type="submit"
  onclick="switch_style('DARK');return false;"
  name="theme" value="Click here to change the skin to dark
">
<input type="submit"
  onclick="switch_style('LIGHT');return false;"
  value="Click here to change the skin to light">
</form>

now that we have added the codes above, we need to add the java script
Open notepad and copy & paste the following code and then files> save as > switch.js (in same directory as ur page)

Code:

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;

function switch_style ( css_title )
{
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    documen*****okie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
    
    var cookie_string = documen*****okie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

last thing to do is to add the script in the head tags
Add the following code between ur head tags

Code:

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

also if ur visitors refresh ur page it should view their selected css.
so the body tag should look like this > <body onload="set_style_from_cookie()">

if u didnt liked how i explained it check the original site here