Styles

On the Styles page, you can customize the display of the navigation bar and page bar in the Genesis instance.

The Styles page includes the following panes:

  • On the left pane, you can view settings and apply them to the navigation bar and page bar.

    The left pane displays navigation bar settings and page bar settings.

  • The Preview pane displays a preview of the end-user view with the saved settings applied.

    1. Navigation bar is a vertical column below the home box that displays the Navigation Groups in the selected Application Group. 2. Page bar is a horizontal row to the right of the home box that displays the Pages in the selected Navigation Group.

    1. Navigation bar

    2. Page bar

    In the upper right, you can set your preference to turn the preview on (click the Show Preview The Show Preview button is an icon of an eye with a slash. button) or off (click the Hide Preview The Hide Preview button is an icon of an eye. button).

  1. In the left pane, select the style settings. See NavBar Settings and PageBar Settings.

  2. Click the Apply Selected Layout Settings to Application Foundation button to apply the style and view the updates in the Preview pane.

    Apply Selected Layout Settings to Application Foundation button is a floppy disk icon.

NavBar Settings

Application Group Display

  • Menu: Select to view the description for the selected item in the Application Groups drop-down menu.

    Application Group drop-down menu with Home selected and the text displayed.

  • Image: Select to view a menu image for the selected item in the Application Groups drop-down menu. Use this option to reduce size in the navigation bar.

    Application Group drop-down menu with Home selected and the icon of three horizontal lines displayed.

Width: Enter the number of pixels to set the width of the navigation bar.

Button Height: Select the height of the space for each item in the navigation bar.

TIP: To make space for long names or a larger font size, you can increase the navigation bar width or button height.

Selected State Type

  • Indicator: Select to include a vertical indicator bar next to the selected item in the navigation bar.

    Selected item in the navigation bar has a vertical line to the left

  • Highlight: Select to highlight the selected item in the navigation bar.

    Selected item in the navigation bar has the background highlighted

NOTE: The color listed in NavBarButtonIndicatorBackground on the Colors page is used for the vertical indicator bar or highlight. See Apply a Color Set.

Indicator Size: If you selected Indicator as the Selected State Type, choose a length for the vertical bar: Tiny, Small, Medium, or Large.

Indicator Thickness: If you selected Indicator as the Selected State Type, choose a thickness for the vertical bar: Thin, Standard, or Thick.

PageBar Settings

Button Width: Enter the number of pixels to set the width of the page bar tabs.

TIP: To make space for long names, you can increase the button width.

Indicator Size: Select a length for the horizontal bar under the Page name: Tiny, Small, Medium, or Large.

Indicator Thickness: Select a thickness for the horizontal bar under the Page name: Thin, Standard, or Thick.