Style Switchers

A style switcher is that neat little thing that changes what a website looks like. Techincally, it changes what's called the CSS of the webpage. With CSS, we can define image backgrounds, banners, fonts, links, etc., so when we swap the CSS of a page we can completely change how it looks. However, a style switcher can ONLY change the CSS of a page, it CANNOT change the content.

Want an example? Click on one of the little images somewhere on the banner next to the text "styles:" and see what happens. The layout changes! So how do we do this?

Well, you're going to have to copy and paste the following code and save it as styleswitcher.js using NotePad, or on a mac with Smultron. Smultron is a really great HTML/CSS/JavaScript/etc. text editor for macs.

So, ready for the code? Well here it is:

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

Okay! Now, upload the file styleswitcher.js to your site. The next step is to add some teency snippets of code to your head section. Change the code that is underlined.

Not that confusing, just replace all the file names and titles and stuff. An example of a filled-out version of this would be the following:

Okay, now that we have all the stuff set up in the head, it's time to add the actual links that when clicked will change the style. Add this code to where you want the links to be. Again, change stuff in bold.

<a href="#" onclick="setActiveStyleSheet('Alternate Style 1'); return false;">Change the style!</a>

Or maybe you wish to change the style by clicking on a small image that serves as a thumbnail (I highly recommend this personally). In that case, replace the "Change the style!" text with <img src="http://www.example.com/stylepreview.gif">

So now you know how to change the style of your webpage! But let's get even fancier. You know those sites (like this one) that have the style buttons somewhere on the banner? Well, you might be thinking, "I wanna do that too! But how?". Well, I'm glad you asked :P What your going to do is the following.

1: Use an image editor like GIMP, Photoshop or MS Paint to add whatever you want the banner to say next to the style switcher buttons. For example, in the Espeon & Umbreon layout on this site, on the right bottom half of the banner is the word STYLES: and under it are the buttons. So what I did was I added the word STYLES with photoshop and saved the banner and uploaded the new version of it (the one with the STYLES: text thingy) to my site.

2: In the CSS document of the layout, add the following code:

#styleswitcher
{
display: inline;
width: The width of the styleswitcher areapx;
height: Height of the styleswitcher areapx;
position: absolute;
top: distance in pixels away from toppx;
left: distance in pixels away from leftpx;
}

Again, replace all the bold with measurements (in pixels). Now, this step is gonna require some trial and error to get the buttons exactly where you want. It normally takes me about three tries, but to a non-experienced person it will take much more. What you have to do is just guess the amount of pixels from the left and from the top of where you want the buttons to show up. Then, input them into the code, save the document, and preview it with your layout. It will most likely be very off. So, once you have viewed the preview, change the measurements to what you think is right, preview it again, and keep trying until you get it exactly where you want it.

3: Add this code after your body tag:

Just keep adding the href's and images if you have more that one alternate style.

And that's it! You're done! YAY :D I hope this guide helped. If you have any questions, comments, see an error, or need help with something, please, contact me.

Amity Square
Dark Cosmos Forums
Eevee's Mansion
Piplup Princess
Pokemon Cobalt
Pokemon Era
The Pokemon Mansion
The Power Plant
The Spirit Valley
Pokemonalexander
Pokemon Omega X