Invision-Graphics Forums

Programming – Advance CSS Style switcher

Admin – Fri May 18, 2007 2:21 pm
Post subject: – Advance CSS Style switcher

This is a little nifty effect that will allow the user to change the entire look of your website with one click!

CSS has grown in popularity so much I thought I would release a little tutorial for those who wish to add this functionality to their websites or blogs!

It's not that hard to implement at all and all that's required is CSS and a little JavaScript to do the trick!

Difficulty: Easy
Time: 10 minutes

Step 1

first, let's create the folders as I am a neat freak and believe everything should be organized and placed in groups according to their structure or functions!

On your desktop right click and select 'Create New Folder'

Now double click to open that folder and create 2 new folders, one called style1, and the other images!

Why did we name the CSS style folder style1, just incase you already have a style folder in your root folder on your domain you won't accidentally overwrite it.

Now having a folder called style1 and images, lets you store both style sheets and images for each layout in separate folders to keep things organized and less confusing.

Step 2

In notepad or an ASCII editor create a new document and call it "style.css". Now using CSS you can easily include images as well for the layout or background!

Example

Code:
background : url('../images/styleswitcher/my_image.jpg');


Now the key thing to remember here is that your going to simply copy your original CSS stylesheet but create multiples but giving them individual names!

The trick here is once you have the original CSS created for your site you only need to copy the original Style.css and create as many different variations that you want for each color style you want to include!

Style1.css, Style2.css, Style3.css etc...

Now all you need to do is change the CSS attributes in each of those styles sheets (Style1-2-3.css) to the colors of your choice and save them in the folder called style1 that we created earlier!

Now to set the Advanced CSS Style Switcher up we need to edit the index.html or whatever coding preference you’re using index.php, index.shtml etc.

Example:
Html CSS Style switcher link:

Code:
<strong>Style Changer:</strong><br />
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Style (default)</a> |
<a href="#" onclick="setActiveStyleSheet('red'); return false;">Style 1 (red)</a> |
<a href="#" onclick="setActiveStyleSheet('blue'); return false;">Style 2 (blue)</a> |
<a href="#" onclick="setActiveStyleSheet('grey'); return false;">Style 3 (grey)</a> |
<a href="#" onclick="setActiveStyleSheet('pink'); return false;">Style 4 (pink)</a> |


Now that we have the active links in place a visitor can change or set the different styles of their choice by clicking those following links!

Step 3

Now in your source code of index.html file near the top you should see the following:

< /head >

Paste the following Code just after the < /head > tag:

Code:
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="red" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="grey" />
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="pink" />
<script type="text/javascript" src="styleswitcher.js"></script>


This allows the switching of the style sheets, but in order for it to work correctly be sure to use the correct path of where you uploaded the style1 folder that contains the different style sheets that you created earlier in this tutorial.

Step 4

Now we need to create the file "styleswitcher.js" and save it inside the folder style1 for safe keeping!

Styleswitcher performs the magic allowing the user to switch style sheets by clicking a link that we placed on your index.html file earlier.

So the last portion of this tutorial is creating the file"styleswitcher.js".

Open up Notepad or an ASCII editor and copy the following code, once you have the following code you need to save the file.

In notepad you should see the menu, go FILE -> SAVE AS, and from this dialog box switch the SAVE AS TYPE to ALL FILES.

Give it the file name styleswitcher.js and save it in the folder style1.

styleswitcher.js Code:

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


This JavaScript code will load the appropriate style sheet that the user has chosen and set a cookie with a time frame and save the users preferences to use the alternate style sheet of their choice.

Step 5

Now all that's left is to upload everything, and you should have a working style changer for your site if you did everything correctly.

See a live demo here:
http://www.invision-graphics.com/style1/index.html

Important Tip:

If you decided to also switch images per style sheet its a good idea to place them in the "style1/images" folder.

This will keep things organized and help everything to run much more efficiently.

If you have any questions or need more help, feel free to post them here.

Shawn DesRochers :-) ryngonz – Sun Jun 17, 2007 6:52 am
Post subject: –

Wow, thank you!!! I have a hard time on switching my layouts. I am an amateur but not that amatuer. I know only the basic but not the advance part. tnx again!!! Admin – Sun Jun 17, 2007 11:17 am
Post subject: –

Not a problem, and I totally understand!

The thing to remember is always stick with it, examine the code and try to understand what sections are doing what. Then make your edits but commenting where you made the changes.

For example
< !-- Made Change here -- >
Content here
< !-- End Change here -- >

Its invisible so users dont see it unless there reviewing your source code and another thing is always make a backup first before hand so you can revert back if you run into problems..

But I am glad ryngonz, that you found it useful, and with a little tweaking you can use it to swap images as well.

Have fun!

Shawn DesRochers
All times are GMT - 5 Hours
Forums Maintained by Invision-Graphics Inc © 2008