This is a free service provided by RichInStyle.com for all its users. Simply use the free page allowing your users to select their preferred style scheme or create a custom style with control over all of the following:
Once they have specified their preferences, the browser will remember their preferred setting, and every time they look at your site, they will see it how they want to see it.
Alternatively, if you don't want to offer the full customization, you can just provide custom styles using MySite v1, which only offers a choice between predefined styles.
Although it is a free service (although it is copyrighted - you can't distribute the script, and you can only use it within the SCRIPT element of your pages, and there are certain conditions as to use), it represents a far more realistic (and more customizable) option for allowing users to select their preferred style than HTML's alternate style sheets, which require the user to select their choice every time they view a single page (and in any case aren't supported by most browsers).
If you would like to see it in action, just go to RichInStyle.com's Personalize Page where you can select how you wish to view RichInStyle.com.
It supports the overwhelming majority of web browsers - Internet Explorer 4 and 5, Netscape 4, Mozilla 5 (which will become Netscape 6) and Opera 3.5 or better.
Here's a typical example of how MySite can be used (taken from this page):
<LINK rel="stylesheet" href="/style/all.css" type="text/css">
The file 'style.js' is what remembers your users preferences. Here's the MySite script that retrieves the styles :
/* MySite 2.1; copyright, 2000 RichInStyle.com. This script may be freely used in accordance with RichInStyle.com copyright. You may not remove or alter this message. This script is downloadable from http://www.richinstyle.com/free/mysite.html. */
/* Change this to the path to your style sheets; you are free to remove this message after doing so. */
if(t!='')d('<LINK rel="stylesheet" type="text/css" href="'+path+t+'.css">');
The only thing that needs changing about this script is the path assignment. You should change this to the location of your style sheets. This must always either start with '/' (i.e., it should always be relative to the domain) or be an absolute URI (such as http://richinstyle/com/style/). In either case the trailing / is essential. For example, if you keep your style sheets in http://www.foo.com/users/mike/style/, you should change path to path='/users/mike/style/';. Alternatively you could set path to 'http://www.foo.com/users/mike/style/'.
Having done that, you need to change the HEAD of each page that uses the script; for example, if you want to keep mysite.js and all.css in /users/mike/style/, your page HEAD would look like this:
My page title
<LINK rel="stylesheet" href="/users/mike/style/all.css" type="text/css">
Although you've now set up your pages to read your visitors' preferences, you have not as yet provided any means for your visitors to tell you what their preferences are. In order to do this, just download MySite. The standard installation comes with RichInStyle.com's default style sheet (the one that you are probably looking at the moment), which has been carefully designed to work on all browsers, plus a selection of 9 different styles and a template file that you can use to create your own styles quickly and easily. Click here to download it as a self-extracting Windows executable (31.7kb), here as a compressed zip file (26.3kb) or here as a gzipped tar archive (16.4kb).
The download also includes MySite v1, which only allows for selection between custom style schemes, or if you prefer, you might decide that you only want to offer MySite v1 (just select between style schemes) by default, but offer v2 if they want more control, remove the comments around the lines that read:
If you want more control over the appearance of this site, including such things as the font size, line height, and background and foreground colors, click <a href="personalize.html" title="Click here for more">here</a>.
and remove everything from <FORM name="f"> to </FORM> in personalize.html (because the ability to select between style schemes is already provided in mysite1.html).
If you have any problems with it first follow the following checklist:
If you use the MySite script, you must retain the copyright message included in the page that allows the visitors to set their preferences. If you use the MySite trademark, you must include the message 'MySite is a trademark of RichInStyle.com.' on each page that the trademark is used.