Style Switchers

This page will explain how to code a style switcher in either PHP or JavaScript that does exactly what it says on the tin -- it simply changes the style. If you were looking for a more advanced type of style switcher, namely one which changes header and footer files for each style, I deeply recommend trying Eevee's Headquarters' style switcher tutorial.

Please choose the type of Style Switcher you would like to use

PHP JavaScript

Javascript Style Switcher

******** COMING SOON ********

PHP Style Switcher

A PHP style switcher unlike the JavaScript switcher will reload the page to switch styles and set a cookie, therefore making style switching a gruesome task for those users with dial-up. However, the user's style preference will last forever on that user's computer, unless they remove the style preference cookie, so you shouldn't receive too many 'my browser loaded the wrong style first' complaints. The only downside to this type of switcher that I can think of is the fact that your host has to support PHP, so those using Freewebs, Piczo, etc cannot use this specific switcher.

Firstly, create a new file named styleswitcher.php, and place it in your site's root directory, making the URL to the styelswitcher file something like: http://yoursite.com/styleswitcher.php. Then, in styleswitcher.php, place the following code.

Simply replace STYLE1.css and STYLE2.css with a direct URL to each stylesheet. Now that you've done that, insert the following code into your <head> area.

Yet again, simply replace STYLE1.css and STYLE2.css with a direct URL to each stylesheet. Then replace DEFAULT.css with the URL to your chosen default style.

Now that you've finished the hard part, we now have to decided which way the visitor is going to change the style. You can choose to have them choose an option from a drop-down list or you can use normal links. If you wish to use links to switch styles, use the following code:

With the previous code, you'll need to change the direct link to the styleswitcher.php so it links to your styleswitcher.php page, but keep the ?style=1 or ?style=2 at the end for it to work. If you wish to use a drop-down to have your visitor change styles, use the following code:

Edit http://yoursite.com/ to the URL of your site. That's all you'll need for the PHP Styleswitcher, have fun with it!

Keep in mind that you should keep all things constant. Every single page on your website should have the code which is to be placed within the <head> area. However, if you are having any troubles with any of the style switchers, contact me at nickyn001@gmail.com.