MySite

Introduction

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:

Set document margins (left and right, from 0 - 15%)
Set document font sizes
Set document font face
Set document color (Colors can be changed using RichInStyle.com's websafe colorizer - click a color in the colorizer (a specially customized version), and it updates in the main window).
Set document background image
Specify fixed background
Set document background color
Set document line spacing
Set heading size
Set heading font
Set heading color
Set heading border width (or none)
Set heading border color
Set heading background color
Set whether you wish for headings to be 'outdented'
Set visited, unvisited, activated and hovered-over link colors
Set whether you wish for normal links to be underlined.
Set whether you wish for hovered-over links to be underlined.

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.

Why MySite?

MySite improves accessibility by allowing color-blind users to select high contrast color schemes.
MySite allows partially sighted users to select a more suitable style sheet.
MySite allows all of your users to view your site in the way that suits them best, specifying their preferred font size, face, colors, etc.

Adding MySite to your site

Here's a typical example of how MySite can be used (taken from this page):

<HEAD>
<TITLE>
MySite
</TITLE>
<LINK rel="stylesheet" href="/style/all.css" type="text/css">
<SCRIPT language="javascript1.2" src="/style/mysite.js" type="text/javascript">
</SCRIPT>
</HEAD>

The file 'all.css' is what you will give to people who haven't selected their preferred style, who have got JavaScript disabled or whose browsers are not modern enough to support MySite (Internet Explorer 3 users). Although all.css is optional, it is recommended that you use it to ensure seamless changes when the user selects custom styles.

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. */
path='/style/';
a=document.cookie;

function r(b,d){i=a.indexOf(b);
if(i!=-1){s=i+d;
e=a.indexOf(';',s);
if(e==-1)e=a.length;
return unescape(a.substring(s,e));}
return '';}

function d(c){document.write(c);}

t=r('stylesheet=',11);
if(t!='')d('<LINK rel="stylesheet" type="text/css" href="'+path+t+'.css">');
w=r('style=',6);
if(w!='')d(w);
m=r('custom=',7);
if(m!='')d(m);

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:

<HEAD>
<TITLE>
My page title
</TITLE>
<LINK rel="stylesheet" href="/users/mike/style/all.css" type="text/css">
<SCRIPT language="javascript1.2" src="/users/mike/style/mysite.js" type="text/javascript">
</SCRIPT>
</HEAD>

Creating the page that allows your visitors to select their preferred style

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

MySite v1

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:

<p>
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).

Problems?

If you have any problems with it first follow the following checklist:

Not getting any cookies set? Some browsers (such as Opera) won't let you set them unless you are online. If in doubt, use Internet Explorer 4 or 5.
Check that all the paths to your files are correct and remember that you should use '/' rather than '\'. Also bear in mind that although Netscape won't read style sheets that start with '/' when you are offline, it will when on online.
If all else fails, e-mail for help at mysite@richinstyle.com.

Version history

Version 1.0: Released, featuring the ability to choose between and remember predefined style schemes
1.0A: Added path declaration to download version to make it easier to use
2.0: Released, featuring the ability to create custom styles or choose between predefined ones.
2.0A: Added return ''; to a function, which meant that the script wasn't working in Netscape
2.1: Drastically reduced file size (from >46kb to <25kb) by code optimization and by use of script-generated HTML. Added fix to make script work in Opera, which it previously didn't due to Opera's non-support of regular expressions, of the language attribute, and because it parses code that it has been told not to read. Added facility for you to change the default body and heading size suggested by the script.
2.11: Added other optimizations to make CSS work better with Netscape form controls. Made mysite1.html easier to use.

Terms of use

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.