Colors

On the Colors page, you can customize color sets to apply to the home box, navigation bar, page bar, title bar, and images in the Genesis instance that display in the end-user view.

The Colors page is organized into the following sections:

  • Color Options: In this panel, you can view color sets and their properties. Use the toolbar to edit, delete, copy, and apply a color set.

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

    See the following sections:

  • Preview: This tab displays a preview of the end-user view with the saved color set applied.

    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. icon) or off (click the Hide Preview The Hide Preview button is an icon of an eye. icon).

    Preview tab has November Rain color set applied. 1 = home box is a rectangular drop-down menu in the upper left with Application Groups; 2 = navigation bar is the vertical bar on the left below the home box that lists Navigation Groups, 3 = images are displayed to the left of each Navigation Group name; 4 = title bar is the horizontal bar at the top of the page; 5 = page bar is the horizontal bar below the title bar that lists each Page.

    1. Home box

    2. Navigation bar

    3. Images

    4. Title bar

    5. Page bar

Color Set Properties

These properties set the color theme in the Genesis instance. You can edit these properties as needed. See Edit a Color Set.

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 Navigation Bar.

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 Page Bar.

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

Apply a Color Set

Apply a color set to update the Genesis instance with the selected colors.

  1. From the Color Sets drop-down menu, select an option. The properties display in the Color Options panel. See Color Set Properties.

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

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

Edit a Color Set

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

  2. Click the Edit the Selected ColorSet icon.

    Edit the Selected ColorSet button is a pencil.

  3. On the ColorSet Editor slide-out panel, in the field for each option, update the properties. See Color Set Properties.

    • Enter hex color values using the format #FF000000 or a OneStream color name, which is a name from the standard list of colors used in OneStream, for example, for a button component.

    • To make an option transparent, type Transparent.

    • To update ImageColor, from the drop-down menu, select Black or White.

    The ColorSet Editor slide-out panel 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.

    TIP: Apply a color set to update the Genesis instance. See Apply a Color Set.

Delete a Color Set

You can delete color sets that are no longer needed to keep the list updated.

CAUTION: If you delete a color set, the action cannot be reversed.

To delete a color set, follow these steps:

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

  2. Click the Delete the Selected ColorSet icon.

    Delete the Selected ColorSet button is a trash bin.

  3. In the Confirm Delete slide-out panel, click the Delete button.

Copy a Color Set

Copy a color set to create a new color set based on an existing one.

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

  2. Click the Copy the Selected ColorSet icon.

    Copy the Selected ColorSet button is a stack of documents.

  3. On the ColorSet Editor slide-out panel, enter a unique name for the new color set.

    The ColorSet Editor slide-out panel 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 new color set. See Edit a Color Set.

    TIP: Apply a color set to update the Genesis instance. See Apply a Color Set.