Customizing the way it looks

NavBar look is defined through a CSS file. Presently, the default distribution contains a base skin (navbar.css) and a pretty complex one (WinXP theme). In order to be able to customize the look you need to understand how CSS works and how the NavBar layout is defined.

When NavBar is generated, it takes the element whose ID was passed to the constructor (the “content” div) and inserts the NavBar elements there, creating a DOM structure like this (we present tag names like this and class names [like this]):

• div [menuholder] -- a toplevel DIV that contains all NavBar elements
  • div [menubar] -- another DIV, required for proper layout in IE
    • table [control] -- this is a one-row table that contains the control buttons
      • tbody
        • tr
          • td [btnholder] -- contains one single control button
            • img [img button]
          • ... (more td.btnholder-s)
    • div [space] -- a spacer DIV
    • table [title] -- menu section title
      • tbody
        • tr
          • td -- holds the section title text
          • td -- holds the expand/collapse button
            • img [img] -- expand/collapse button img
    • div [section] -- menu section contents
      • div [body] -- section body
        • table -- items are in a table
          • tbody
            • tr [item] -- an item in a section
              • td [image] -- holds the item's icon or the default “»”
                • img [img] -- item icon, if defined
              • td -- item label
    • ... (more div.space-s, table.title and div.section-s)
    • ... (then again the div.space and table.control that closes the menu)

Whatever was present in the “content” div is embedded in a second div--therefore, the full page contents is now a DIV which contains 2 DIV-s: one is “menuholder” and the other is a DIV that embeds your page content.

Writing your skin

The recommended way to customize the look is to write your own CSS file that first thing imports the original NavBar file then customizes whatever is appropriate. Doing this grants you some benefits, for instance, when you want to upgrade your NavBar installation you can do it easy because you don't modify the original sources, and secondly, you have all the padding and spacing properly defined in the original CSS file so you don't need to mess with it (unless you really need it).

So, your CSS file should be located some place outside the NavBar installation dir (“/navbar/”) and it should start like this:

@import url("/navbar/navbar.css");

This gets you all the goodies defined in the main file. Then, in order to customize, say, the background color for the toplevel NavBar DIV, you would write:

.menuholder {
  background-color: #fff; /* make it white */
}

If you want the NavBar to be a bit wider (i.e. 200 pixels), you can:

.menuholder {
  width: 200px; /* the default is 160px */
}

Now experiment! :-) Customizing the look is easy.