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.
<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.
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.
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).
<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.
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>
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
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).
This must be kept in the same directory as all.css.
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.
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).
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.
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%}
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} */
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.
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:
In addition, in each case an alternative version of okbrowsers.css (called okbrowsers2.css) is required, which these style sheets link to.
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:
If you have any problems with it, first follow the following checklist:
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.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use.