Colors

On the Colors page, you can customize the color theme of the home box, navigation bar, page bar, title bar, and images in the Genesis instance.

The Colors page includes the following panes:

  • On the Color Options pane, you can view color sets and apply them.

    The Color Options pane displays the current color set selection, a drop-down menu with color sets available, a list of colors and the location they display in the home box, navigation bar, page bar, title bar, and image, and a toolbar.

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

    1. Home box is a drop-down menu of Application Groups. 2. Navigation bar is a vertical column below the home box that displays the Navigation Groups in the selected Application Group. 3. Images are icons that display next to the items in the navigation bar or page bar. 4. Page bar is a horizontal row to the right of the home box that displays the Pages in the selected Navigation Group.

    1. Home box

    2. Navigation bar

    3. Image

    4. 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).

Use the toolbar at the bottom of the pane to edit, delete, copy, and apply a color set.

Color Options pane toolbar is a row of icons. Edit the Selected ColorSet button is a pencil icon. Delete the Selected ColorSet button is a trash bin icon. Copy the Selected ColorSet button is a stack of documents icon. Apply Selected ColorSet to Application Foundation button is a floppy disk icon.

Apply a Color Set

  1. In the Color Sets drop-down menu, select an option. The details will display in the pane.

    Home Box

    • HomeBoxBackground: Background color of the Application Group drop-down menu

    • HomeBoxButtonHoverBackground: Color change when you hover over an item in the Application Group drop-down menu

    • HomeBoxText: Text color of items in the Application Group drop-down menu

    Navigation Bar

    • NavBarBackground: Background color of the navigation bar

    • NavBarButtonBackground: Background color of items on the navigation bar

    • NavBarButtonHoverBackground: Color change when you hover over an item on the navigation bar

    • NavBarButtonIndicatorBackground: Color of the indicator bar that highlights a selected item on the navigation bar

    • NavBarButtonText: Text color of items on the navigation bar

    See NavBar Settings.

    Page Bar

    • PageBarBackground: Background color of the page bar

    • PageBarButtonBackground: Background color of tabs on the page bar

    • PageBarButtonHoverBackground: Color change when you hover over a tab on the page bar

    • PageBarButtonIndicatorBackground: Color of the indicator bar that highlights a selected item on the page bar

    • PageBarButtonText: Text color of tabs on the page bar

    See PageBar Settings.

    Title Bar

    • TitleBarBackground: Background color of the title bar

    • TitleBarText: Text color of items on the title bar

    Image

    • ImageColor: Color of images on the navigation and page bars

  2. Click the Apply Selected ColorSet to Application Foundation button to apply the color set and view the updates in the Preview tab.

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

Edit a Color Set

  1. In the Color Sets drop-down menu, select an option.

  2. Click the Edit the Selected ColorSet button. For details about each item in the color set, see Apply a Color Set.

    Edit the Selected ColorSet button is a pencil icon.

  3. On the ColorSet Editor dialog box, in the field for each option, enter the 6-digit hex color code in the format #FF000000. To make an option transparent, type Transparent. To update ImageColor, in the drop-down menu, select Black or White.

    The ColorSet Editor dialog box lists each option on the left, then a sample of the color, and then on the right a field to enter the 6-digit hex color code. Save and Cancel buttons are at the bottom. Save has a blue background with white text, and Cancel has a white background with blue text.

  4. Click the Save button.

Delete a Color Set

When you delete a color set, it cannot be recovered unless it is backed up and imported in Instance Management. See Instance Management.

To delete a color set, follow these steps:

  1. In the Color Sets drop-down menu, select an option.

  2. Click the Delete the Selected ColorSet button.

    Delete the Selected ColorSet button is a trash bin icon.

Copy a Color Set

To create a new color set, you can copy a color set and update it.

  1. In the Color Sets drop-down menu, select an option.

  2. Click the Copy the Selected ColorSet button.

    Copy the Selected ColorSet button is a stack of documents icon.

  3. On the ColorSet Editor dialog box, enter a new name. The name must be unique; it cannot be used for another color set.

    The ColorSet Editor dialog box has a field for ColorSet Name. Light Blue is the name added in this example. Save and Cancel buttons are at the bottom. Save has a blue background with white text, and Cancel has a white background with blue text.

  4. Click the Save button.

  5. (Optional) Update the color set. See Edit a Color Set.