10.5.6 Modifying OmniHelp CSS classes

Suppose you want a background image behind the entire top OmniHelp panel, buttons and all. To accomplish this you would modify the CSS class Mif2Go applies to the top navigation table. JavaScript in ohtop.js creates the top navigation pane, and produces (by default) the following HTML for the navigation table:

<table class="topnav" border="0" height="50" width="100%">

<tr><td class="topnav" width="230">

<img src="ohlogo.jpg" height="25" width="50"

alt="Logo" />&nbsp;OmniHelp &nbsp;</td>

<td class="topnav"><button type="button" id="topStart"

onclick="parent.ctrl.getStart()"

title="Go to starting topic">Start</button></td>

.... more button cells written here ...

<td class="topnav"><img src="ohvalidh.gif" border="0"

alt="Valid HTML 4.01!" height="25" width="71" /></td>

</tr></table>

The CSS rules to modify are those for selector table.topnav. For example:

table.topnav { background-image: url(my_favorite_pic.jpg); }

This rule would tile the image to fill the entire top panel.

You would most likely want to add the new rule to all four of the browser-specific CSS files included with OmniHelp: 

ohctie.css	Internet Explorer
ohctn4.css	Netscape 4.x
ohctn6.css	Mozilla-derived browsers, such as Firefox
ohctrl.css	Other browsers, such as Opera

If you put the rule in just one of these CSS files, it would be effective only when someone uses that particular type of browser to view your OmniHelp system.

The CSS file for Internet Explorer, ohctie.css, has the following top-panel rules; these rules are similar in the other CSS files:

/* top panel only */

body.topnav { background: #999 ; margin: 0 }

p.topbody { font: bold 12pt/12pt sans-serif }

table.topnav { vertical-align: middle; border-style: none }

td.topnav { font: bold 10pt/10pt sans-serif;

margin: 0; text-align: center; vertical-align: top }

A body background color is already set, #999999 (gray). You still want a background color; however, you can change its value.

A couple of rules are already present for table.topnav, so just add yours:

table.topnav { background-image: url(my_favorite_pic.jpg);

vertical-align: middle; border-style: none }

Or, you could add the image to the body rules instead:

body.topnav { background-image: url(my_favorite_pic.jpg);

background: #999 ; margin: 0 }

However, do not add the image to both table.topnav and body.topnav.

Repeat for the other three ohct*.css files, and see how the new background looks in different browsers.

---

> 10 Generating OmniHelp > 10.5 Customizing OmniHelp display features > 10.5.6 Modifying OmniHelp CSS classes