Poketales --> Welcome to The Ultimate Fansite!

// Style Switcher \\
Poketales Classic Style
Sailor Moon Style
Piplup Style

// Sitely \\
>> Home
>> About Site
>> History
>> Affiliate / Link To Us
>> Staff / Contact
>> Become Staff
>> Hall of fame
>> Wall Of Shame
>> Report An Error
>> Win an Award
>> Coming Soon
>> First Time Here?
>> Thanks You
>> Why Anime?

// Portal \\
>> Poketales Graphics
>> Forums
>> Oekaki

// Guides \\
>> Webmaster Guide
>> Hits Guide
>> Affiliation Guide
>> Hover Affiliates Guide
>> Styleswitcher Guide

// Anime \\
~ Pokemon
>> About Pokemon
>> Episode Guide
~ Studio Ghibili:
>> Kiki's Delivery Service

// Games \\
>> Pokemon Ranch
>> ~~PMD 2~~
>> ~~Pokemon Ranger 2~~

// Fun \\
>> ~~Skating Pikachu~~
>> COTM
>> Guess The Character
>> Contests
>> Character Awards
>> Quizzes
>> Videos

// Other \\
>> Site Of The Month
>> Poll Of The Week
>> Sakura's Sentence

// Webmistress \\
>> What I Use
>> About Torchic

.:. StyleSwithcer Guide .:.

Interested in making a styleswitcher like the one we have? Here is a detailed explained guide about how to do it!

Step 1

Create a new file and call it Styleswitcher.js Next, copy the code below into the styleswitcher.js file".

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 2

Paste this code in your head area of your layout

The style1Title and Style2 title should be changed to the style's name. Like, for example, if you have a piplup layout, you would call it 'piplup'. As for the style1.css and the style2.css, you will learn what to do with them the next step ^^

Step 3

Make a new file and call it your first style. Like, if I want my first style with a torchic on it, I should call the file torchic.css you pick whatever. Next, go back to the head and head layout and on the first one, change style1.css to the style you want (let's say torchic.css) and the title, change it (let's say torchic) Do the same thing for style2title and style2.css and for the default style, paste the default style (let's say torchic.css) that the people will see when they enter.

Step 4

Go back to your styles.css (let's say, the torchic.css) and paste the CSS code. Do not paste the head and the style in the .css file. Do the same thing for your second layout and paste it's CSS (the second layout).

Step 5

Go to The place you want to put your CSS in and paste this:

Change the style1title to the same name you gave it in the head place code. In the "Your Layout's name" , you can type anything, That will be what the users will click to change the style ^^

Your Done!

If you didn't understand a part, feel free to contact me and ask questions ^^

// Main Site \\
Pokeshore

// Partners \\
None, be the first!

// Affiliates \\

Lapras Grotto
The Drifloon Club
Eevee Valley
Piplup-princess
Pokemon Cobalt
PokeCookie
Random City
Twilight Harbour
Charizard's Inferno

// Shoutbox \\
Pop Up The Shoutbox