#### 19.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 DITA2Go 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.

Previous Topic: 19.5.5 Localizing the OmniHelp interface

Next Topic: 19.5.7 Modifying the OmniHelp template

Parent Topic: 19.5 Customizing OmniHelp display features

Sibling Topics:

19.5.1 Configuring OmniHelp window usage and frameset dimensions

19.5.2 Altering OmniHelp top navigation frame content

19.5.3 Modifying OmniHelp navigation aids

19.5.4 Choosing whether to use cookies for OmniHelp

19.5.5 Localizing the OmniHelp interface

19.5.7 Modifying the OmniHelp template