Amazing Media: Web Advertising YOU Control!

MySite

The script will work as it is, but it is better if you customize it to suit your precise requirements; instructions for doing this are included below.

What you can change

  1. Mysite.js
    1. Change the line that reads path=''; to path='/style/';, or whatever the path to your style sheets is (remember that it should be relative to the top of the domain, and thus must begin and end with a '/').
  2. Personalize.html
    1. Change the lines that read:
      <link rel="stylesheet" href="all.css" type="text/css">
      <script language="javascript1.2" src="mysite.js" type="text/javascript">
      </script>
      
      so that they point to the location of your files; for example, change them to /style/all.css and /style/mysite.js.
    2. Change the line that reads path='/'; to the highest directory on your domain that you want to have access to MySite (e.g., to apply it to subdirectories of john, change it to path='/john/';); if you want the whole site to be able to access it, leave it as it is.
    3. If you want to offer your users a choice of a background images via a menu (as on RichInStyle.com's own personalize page), you need to change:
      called=['I don\'t want a background image', 'Green swirls', 'Blue and red stripes'];
      urls=['', 'www.not-a-real-site.com/back.jpg', 'www.not-a-real-site.com/back.jpg'];
      

      to called=['text of first item in menu', 'text of second item in menu', 'third', 'fourth']; and urls=['location of image corresponding to first item in menu; empty for none', 'location of second image', 'fourth'];, etc. To disable this (the menu to select between images) you need to set mybgs='no';

      Important note: If you set mybgs to no, Netscape 4 will lose the document's margin half way through the document, so it is strongly recommended that you do not do so.

    4. If you want different default fonts for the different platforms to be suggested, change:
      macfont='Helvetica';
      macHfont='Helvetica';
      ufont='Geneva';
      uHfont='Geneva';
      wfont='Arial';
      wHfont='Arial';
      

      to your preferred fonts for each platform (xxxxfont is the body font, xxxxHfont is the heading font).

  3. If you want the script to suggest different font sizes from those it comes preconfigured to suggest, change any or all of these three: hl=32; hs=16; bs=16;, where hl is the size of the largest heading, hs is the smallest heading and bs the body size. All values are in pixels for ensuring that things will look the same across platforms.
  4. Make copies of template.css if you want to create your own style scheme, and for each new style scheme that you add, you need to add this:
    <input type="button" value="Name of style" onclick="SetCookie('nameofstylesheet')">
    

    For example <input type="button" value="Blue" onclick="SetCookie('blue')> would mean clicking on Blue would select a style sheet called blue.css.

What you need to add to your pages to enable MySite in them

Add the following lines to each page that you want to be MySite enabled in this order:

<LINK rel=stylesheet href="/style/all.css" type="text/css">
<SCRIPT src="/style/mysite.js" language="JavaScript1.2">
</SCRIPT>

Adding your own style schemes

If you want to add your own add custom style schemes, you could opt to make each style sheet self-contained, but this is unnecessary. In general the best thing to do is to only change the part of the style sheet that is different.

Probably the most efficient way to produce the style sheets is to take your main style sheet and consider what bits of it you want your users to be able to change. If you do this you will probably find that there is a small amount. For example, in RichInStyle.com's style sheet here are the things that could change:

ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, CODE, DD, DIR, DIV, DL, DT, FORM, LI, MENU, OL, P, TD, TH, TR, UL {font-family: Geneva, Helvetica, Arial, sans-serif;
color: black}

A:link {color: blue}

A:visited {color: blue}

A:active {color: blue}

A:hover {color: blue}

BODY {background: #fff}

H1, H2, H3, H4, H5, H6 {color: #900;
font-family: Geneva, Helvetica, Arial, sans-serif}

PRE {border-color: black;
color: black; background: #ddd}

Essentially all that I want to change is the color and fonts, so by producing this template I can quickly create different style schemes - things like font sizes, margins and line heights tend to be static.

To aid in this task, you will probably want to use

Template

The file template.css can be used to create your own style sheet. Simply change the values in it (but don't add any - these are the only ones you should change) and you will have your own custom style sheet that combines with all.css and okbrowsers.css (all.css is required; okbrowsers.css is optional, but it improves the styles for Internet Explorer 4, 5, Opera and Mozilla 5 users).

Okbrowsers.css

This must be kept in the same directory as all.css.

Using background images

If you create a style sheet using template then all background images must be relative to the top of the domain because Netscape (incorrectly) interprets URLs relative to the top of the domain rather than to the CSS file. Thus an example would be background: url(/style/back.jpg) - the leading '/' makes URLs relative to the top of the domain.

MySite v1

If you prefer, you may use MySite v1. This is the same as v2.1 except it only allows you to select predefined styles, not create your own. This is called mysite1.html (v2.1 is called personalize.html). It needs fewer changes than v2.1: you need to change mysite.js as explained above, and you also can change the path statement in personalize.html if you don't want the cookie to apply to the whole domain (which is the default).

Another option

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 from <FORM name="f"> to </FORM> in personalize.html.

Changing the default style

The script is designed to combine with the AlwaysWork style so that you don't need to specify your preferences for styles to be used. Here, from the AlwaysWork style page, is a list of the ways that you can change it:

In all.css, there is the following text, which represents what you might want to change (or remove):

/* Change any of the following */

ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, LI, MENU, OL, P, PRE, TD, TH, TR, UL {font-family: Geneva, Helvetica, Arial, sans-serif}

ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, LI, MENU, OL, P, PRE, TD, TH, TR, UL {color: black}

A:link {color: blue;
text-decoration: none}

A:visited {color: blue;
text-decoration: none}

A:active {color: blue;
text-decoration: none}

A:hover {color: blue;
text-decoration: underline}

BODY {background: #fff}

H1, H2, H3, H4, H5, H6 {color: #900}

H1, H2, H3, H4, H5, H6 {font-family: Geneva, Helvetica, Arial, sans-serif}

PRE {border: solid thin;
padding: 1em 3%}

H1 {margin-left/* */ : -4%}

H2 {margin-left/* */ : -4%}

H3 {margin-left/* */ : -3%}

H4 {margin-left/* */ : -3%}

H5 {margin-left/* */ : -2%}

H6 {margin-left/* */ : -1%}

  1. The first ruleset controls the font that you you want the body to appear in
  2. The second ruleset controls the color that you you want the body to appear in
  3. The third ruleset controls the color that you you want unvisited links to appear in. Change 'none' to 'underline' to underline those links.
  4. The fourth ruleset controls the color that you you want visited links to appear in. Change 'none' to 'underline' to underline those links.
  5. The fifth ruleset controls the color that you you want links being activated to appear in. Change 'none' to 'underline' to underline those links.
  6. The sixth ruleset controls the color that you you want hovered-over links to appear in. Change 'none' to 'underline' to underline those links.
  7. The seventh ruleset controls the color that you you want headings to appear in.
  8. The eighth ruleset controls the fonts that you you want headings to appear in.
  9. Remove the ninth ruleset to remove the border from PRE.
  10. Remove the rest of the file to remove the outdent from headings.

Simply change the values to those that you prefer. To change the color I would recommend that you use RichInStyle.com's Websafe Colorizer.

In okbrowsers.css, there is the following text, which represents what you might want to change:

/* Remove the below to remove the background from PREformatted text */

BODY PRE {background: #ddd}

/* Uncomment the below to remove the outdent from headings */

/* 
BODY H1, BODY H2, BODY H3, BODY H4, BODY H5, BODY H6 {margin-left: 0}
*/

Other versions of the AlwaysWork style

By default, the AlwaysWork style does not specify line spacing for Netscape. This is because where line spacing commands inherit into form controls they cause slight overlap; and, in the case of multiline text fields (TEXTAREA), very serious overlap. Although this can be avoided (and as such the version of the AlwaysWork style used on the RichInStyle.com does specify line spacing for Netscape, since the time has been spent checking to workaround the problem), to do so takes a little time, and as the AlwaysWork style is intended to be a one-stop trouble-free style solution, the default download doesn't include these line spacing commands.

If you don't use any form controls, or if you are prepared to spend the time (probably only five minutes or less) to change things, feel free to use this style sheet, which does specify line spacing for Netscape: allheight.css.

In addition, even if you do, you can work around this bug by ensuring that all form controls are enclosed in an element that has (precisely) this style attribute: style="line-height/* */ : normal". For example:

<FORM action="http://foo.com/cgi-bin/foo.pl">
<p style="line-height/* */ : normal"> You can click here to submit this form: <INPUT style="line-height/* */ : normal">

In that case, you should also use this style sheet: allheight.css.

Smaller fonts

By default, for reasons of accessibility, the style sheets use text that is the size that the user prefers. I would strongly recommend that you retain this. However, different versions (of all.css) are available if you wish:

  1. 12 pixel font size
  2. 13 pixel font size
  3. 14 pixel font size
  4. 15 pixel font size
  5. 16 pixel font size

In addition, in each case an alternative version of okbrowsers.css (called okbrowsers2.css) is required, which these style sheets link to.

Less space between lines

If you find that there is too much space between lines (the style sheet uses a large line height, which might not be suitable for all types of pages), you need different versions of both the core style sheet and that which is served to better browsers. You should:

  1. For all.css:
    1. select one of the five style sheets above, which don't specify line heights
    2. use the default style sheet, which also doesn't specify a line height
  2. For okbrowsers.css:
    1. use this file, called okbrowsersh.css, which should be renamed to okbrowsers.css if used with the default style sheet, or to okbrowsers2.css if used with the style sheets that specify smaller font sizes.

Problems?

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

  1. 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.
  2. 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.
  3. If all else fails, e-mail for help at mysite@richinstyle.com.

Terms of use

If you use the MySite script, you must include this HTML legibly, and viewable without scrolling from the rest of the page:

<hr>
<p style="font-size: 12px">Copyright © <a href="http://richinstyle.com/">RichInStyle.com</a> 2000; all rights reserved. </p>

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.