Setting navigation field color options

When using panels along with navigation fields in a console (for example, if you embed a navigation field in a collapsible panel), you might find that the panels and navigation fields differ in background colors, height of header text, and appearance of the icons used to expand and collapse items. The following figure shows the difference in colors between panel headers and navigation field items.

Navigation field and panel colors

 Previously, text and background colors were not customizable for navigation fields, but were for panels. You can now customize navigation field text and colors (including gradients) so that their appearance matches that of panels used in conjunction with them in a form.
You can customize navigation field elements using these properties:

• Top level background color for menu (including gradient colors)
• Sub level background color (where subordinate menus and menu items are listed)
• Top level text color
• Sub level text color
• Item height
• Font of menu label and text

The following figure shows a navigation field and a panel with the same color and text display attributes.

Navigation field and panel with same color and display attributes


Each object has these properties:

To customize a navigation field's display properties

1. Select the navigation field to customize.
2. If the navigation field will be displayed in conjunction with a panel (for example, embedded in a collapsible panel or as part of a series of navigation items in a console), determine the display properties that you need for the appearance of the items to match.
3. Select the display properties for the navigation field:
   • Color:
     
     • Top level text color—The text color of the top level of the menu
     • Sub level text color—The text color of the menu items
     • Top level background color—The background color (and gradient, if selected) of the menu label
     • Sub level background color—The background color of the area where menu items are listed

   • Display:

     • Item height—The height of the navigation item in the navigating bar
       Sub-level items do not support gradients.
     • Item height—The amount of line spacing, between 20 and 50 pixels, between items in the menu. The default is 25 pixels.
     • Label font—The font of the menu label and menu items.
       This selection applies the chosen font to all items. You cannot select one font for the menu labels and another for the menu items.

     For more information about display properties, see Field-Properties.