Using styles as your navigation bar buttons is enabled with the behavior setting NAV_BAR_DISPLAY set to a value of STYLE.
There are a set of behavior settings that define the look of the navigation bar buttons. However, it is possible within the Navigation Bar editor to pverride the style of any individual button with a different style, both for its “off” state, and its “on” state when the user places their mouse over the button.
The settings that control the default navigation bar buttons are:
| Behavior Setting | Purpose |
| NAV_BAR_DISPLAY | This must have a value of STYLE to enable the entire feature |
| NAV_BAR_ICON_POSITION | This setting places the icon to the TOP or LEFT of the title |
| NAV_BAR_FONT | This selects the default font to use to display the title on the navigation bar buttons |
| NAV_BAR_FONT_SIZE | This selects the default size of the font used to display the buttons. This can be an integer number, or can be followed by pt or px to set points or pizels as the dimension. If pt or px is not entered, points are assumed |
| NAV_BAR_TEXT_COLOR | This is the hexadecimal color value, or a valid HTML color for the text and icon on the navigation bar buttons |
| NAV_BAR_BG_COLOR | This is the hexadecimal color value, or a valid HTML color for the background color to the navigation bar buttons |
| NAV_BAR_BG_STYLE | This setting is an optional CSS style that is applied to the background of the entire navigation bar. When not provided, the NAV_BAR_BG_COLOR is applied to the background of the navigation bar |
| NAV_BAR_TEXT_HOVER_STYLE | This is an optional CSS style used for the text and icon on the navigation bar buttons. This is entered as a valid CSS expression. Multiple CSS styles can be set by using a semi-colon between each style |
| NAV_BAR_HOVER_COLOR | This is the hexadecimal color value, or a valid HTML color for the background color to the navigation bar buttons when the user places their mouse over the buttons |
| NAV_BAR_BUTTON_STYLE | This is an optional style, used to apply a rectangular box behind the text and icon, giving the appearance of a traditional on-screen button |
Note that NAV_BAR_TEXT_HOVER_STYLE is expressed as a CSS value rather than a simple color value. This allows for more interesting and complex effects when the user mouses over the buttons, and multiple effects can be chained together using a semi-colon.
The background color of the entire navigation bar area ouside of the navigation buttons takes the color of the setting NAV_BAR_BG_COLOR.
Tips
- Use the administrative utility to set a complete theme, without needing to alter the behavior settings
- The following settings are global – i.e.they are the basis for all navigation bars that are defined within your installation
- Most settings can be overridden within any custom navigation bar you define, allowing individual buttons or entire custom menus to adopt different styles
- The settings that are only available globally are NAV_BAR_DISPLAY and NAV_BAR_ICON_POSITION
- Once you have set a theme with the administrative utility, you can tailor it with any of the settings, for example altering the colors or the overall size of the navigation bar buttons.
Examples
| “Off” state | “On” State | Setting | Value |
 |
 |
NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
TOP Franklin Gothic, Arial 14 #015597 #f5f5f5
color:#9bb7d4 #dedede
|
 |
 |
NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
LEFT Arial 16 #0075c9 #fff
color: #0000cc #fff
|
 |
 |
NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
TOP Verdana 16 #779e91 #4e7f71
color: #ddd transparent
|
 |
 |
NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
LEFT Algerian 16 #f29e3b #fff
border-bottom:4px red solid #fff
|
 |
 |
NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
TOP Verdana 16 #fff #000
color: #000 #aaa
|
 |
 |
NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
LEFT Verdana 12 #fff #fff color:#c1d3f3
#fff background-color: #015597; padding:5px 10px 5px 10px; border-radius: 6px; position: relative; top: 30px |
 |
 |
MENU_SIZE NAV_BAR_ICON_POSITION NAV_BAR_FONT NAV_BAR_FONT_SIZE NAV_BAR_TEXT_COLOR NAV_BAR_BG_COLOR NAV_BAR_BG_STYLE NAV_BAR_TEXT_HOVER_STYLE NAV_BAR_HOVER_COLOR NAV_BAR_BUTTON_STYLE |
100 LEFT Verdana, Arial 12 #fff #005599 border-top: 50px solid #fff color:#c1d3f3
background-color: #015597; padding:5px |