Styleswitcher Tutorial


This tutorial offers a simple way for you to create a stylesswitcher in order to incorporate various designs within your website platform.



What you need





The Steps


1. Login into your site FTP or host.
2. Create a new file and call it styleswitcher.js and paste this code inside it:


3- Put this code in your part of your layout:



Further Explanation
What this acts is referencing the CSS style
An example can be:



4. Now, remember this code in the part of your layout:

Well, it's time to get it to work!

After pasting your CSS codes, save it as: yourstylename.css (enter your style's name)
Let's say I have 2 layouts and I want one to be:
style1.css
and the other
style2.css
I'll fill it like this:


The normal standard layout is the one the viewer sees the first before changing it to the version he or she prefers.

5. Go to your part of the layout and paste this:


Make sure your style title is the same as the one you wrote in your title part of the layout.
In my case, using style1.css and style2.css again, it will turn out like this:

Almost there.

IMPORTANT

To make the styleswitcher work, make sure you erase your CSS in the original default layout... like this:

Before:


After:


Make sure to remove what is inside the style tags, otherwise the style switcher will not work.

If you face any problems, feel free to contact me.