Controlling the Appearance of Your Site

The Frameset

Details of how to modify the frameset to your requirements can be found in Defining the Frames.

Set up your colour scheme

Once again, we thought about setting up parameters for things like background colours, foreground colours, link colours, etc. but decided that this would overly complicate the code and make things less flexible. To set up your own colour scheme, just modify the <BODY> tags of menu.htm, menucntrl.htm, and title.htm (if you are using it) as appropriate.

Menu Appearance

The menu.htm file is divided into three sections:

  1. Stuff that is above the menu
  2. The menu
  3. Stuff that is below the menu

Sections 1 and 3 are surrounded by a set of <DIV> ... </DIV> tags: <DIV> ... </DIV> tags (<DIV ID="menuTop"> ... </DIV> for above the menu and <DIV ID="menuBottom"> ... </DIV> for below the menu). These places are clearly marked with HTML comments.

You can place any HTML you like above and below the menu by placing it between the appropriate <DIV> tags. Make sure you place valid HTML including all required closing tags, otherwise some strange results can occur. Netscape is particularly fussy about this.

The following bit of code in menu.htm is where the menu is actually drawn (section 2):

<SCRIPT LANGUAGE="JavaScript">
<!--
if (theMenu) {
	parent.DrawMenu(theMenu);
}
//-->
</SCRIPT>

You can control the general appearance of the menu itself (such as the font) by wrapping this with the appropriate tags. You can get more detailed control of items within the menu by modifying the style sheet at the top of the page (but remember that this will not work on all browsers). See the next section for more on this.

You can also control the appearance of individual entries by including HTML in the entry text. Just remember that it is a JavaScript string and any quotation marks must be preceded by a backslash(\). For example:

level3ID = theMenu.addEntry(level3ID, "Document", "Menu <FONT COLOR=\"red\">Appearance</FONT>", "appearance.htm", "Controlling the menu appearance.");

Cascading Style Sheets

The file menu.htm contains a style sheet that looks like this:

<STYLE TYPE="text/css">
<!--
	.menuItem {position:absolute; visibility:hidden; left:0px;}
	.node { color: black }
	.node A:link { color: black; text-decoration: none; }
	.node A:visited { color: black }
	.node A:active { color: red }
	.node A:hover { color: red }
	.leaf { color: black }
	.leaf A:link { color: black; text-decoration: none; }
	.leaf A:visited { color: black }
	.leaf A:active { color: red}
	.leaf A:hover { color: red}
-->
</STYLE>

This provides you with a way to control how the menu looks. The menuItem class is applied to a <DIV> tag that surrounds each menu entry. The node class is applied to each menu entry that is expandable (i.e. has child entries) from the document icon to the end of the entry text. The leaf class is applied to each menu entry that is not expandable (i.e. has no child entries) from the document icon to the end of the entry text.

In addition, you can assign styles to individual entries by defining a class in the STYLE section and then assigning it to the entry's CSSClass property.

Note that the hover pseudo-class (which causes the text style to change when the mouse is positioned over it) is only supported by MSIE 4.0 (and up).

Note: Cascading Style Sheets only work on MSIE 3.0 (and up) and Netscape 4.0 (and up).

<META> and <TITLE> Tags

All of the Joust files contain a <TITLE> tag. This does not have any visible effect on anything (except for the <TITLE> tags in index.htm, index2.htm, and index3.htm which set the title bar for the browser). The purpose of these tags is to ensure that the pages produce meaningful entries in search engines. You should change these to something appropriate to your site.

You should also add a <META name="description" content="..."> tag to the files with a description of your site. Without this tag, most search engines will take the first few hundred characters of your pages as their description of your site.

The Joust Outliner