Customize theme colors

Customize the standard interface to align with your company's visual guidelines. You can customize the masthead and UI control colors, add your corporate logo, set chart color selections, and configure the menu layout.

Prerequisites

To customize theme colors, you must have the following:

  • The Configuration license

  • The Sys Admin: Server Tools: Execute Admin Tools access grant

Customize menu layout

Configure the appearance of the menu, including the menu style, the masthead and menu icon colors, and corporate logo.

To customize the menu layout:

  1. From the masthead, click the Administration button .
  2. From the Administration menu, click System Appearance Customization > Theme Customization.

  3. In the Menu Layout area, configure the following:

    Action Details
    Select a menu style

    Available only with the side navigation menu.

    Next to Menu Style, choose where the main menu items are displayed:

    • SideNav: Main menu items are displayed on the left side of the screen, accessible by clicking the main menu button .

    • Classic: Main menu items are displayed at the top of the screen.

    Both styles use the same menu structure but differ in positioning. For details, see Main menu structure.

    Customize masthead color

    To define the start and end colors of a color gradient for the masthead:

    • Next to Start, select a different color or enter a color code as the gradient start color.
    • Next to End, select a different color or enter a color code as the gradient end color.
    Customize the menu icon color

    Available only with the side navigation menu.

    To define the color for the menu items and buttons in the masthead, next to Menu Icon Color, click the color box to select a different color or enter a color code.

    Change the corporate logo

    To change the corporate logo displayed in the standard:

    1. In the Product Logo area, click the image with the camera icon.

    2. Select the image file to be used as the new corporate logo.

      These formats are supported: JPEG, JPG, PNG, BMP, and SVG.

  4. Click Save.
  5. Refresh the page to apply the changes.
  6. To revert back to the default menu layout settings, at the bottom of the Menu Layout area, click Restore to Default and then click Save.

Customize theme color

Customize the theme color, including alert text background and UI elements colors.

To customize the theme color:

  1. Open the Theme Customization page.

  2. In the Theme Color area, configure the following:

    Action Details
    Customize UI control colors

    To customize colors for UI elements such as buttons and dialog box headings:

    • Next to Default Color, click the color box to select a different color or enter the color code as the default color.

      The default color is the standard color appearance of elements in the user interface.

    • Next to Hover Color, click the color box to select a different color or enter the color code as the hover color.

      The hover color is the color that appears when hovering over a UI element such as a button.

    Customize background color of alert text

    To customize the background color of the alert text, next to Alert Text Background Color, click the color box to select a different color or enter a color code.

    Note: The alert text background color applies only when you configure to display an alert message by setting the APP_SERVER_ALERT_TEXT parameter. For details, see Server parameters.

  3. Click Save.
  4. Refresh the page to apply the changes.
  5. To revert back to the default theme color, at the bottom of the Theme Color area, click Restore to Default.

Define chart colors

Define colors for portlet charts at the system level. For details, see Define portlet colors at system level.

Use CSS code to customize interface

If Theme Color settings do not fully meet your visual requirements, you can enter your custom Cascading Style Sheet (CSS) code in the CSS Editor area to override the default styling.

Best practices of customizing with CSS Editor

  • Use CSS code to customize the color and font styling. Avoid changing the layouts because this may cause issues during upgrades.
  • When CSS code modifies colors specified in the Theme Color area, it takes overrides the color settings configured in the Theme Color area.
  • The structure and CSS class names used in the system-supplied pages are subject to change in later versions. If you override the default CSS styling with custom CSS code, your custom styling settings may not apply effectively. Therefore, we recommend you reevaluate your CSS code and make any necessary changes after upgrading to a later version.

Example

The following CSS code changes section heading color as follows:

Copy code 
.section-title-row {
  background-color:#146693;
}
 
.section-title-row h2{
   color:#fff ;
}
 
.subheader-small, .subheader{
   background-color:#146693 ;
   color:#fff ;
}

Revert back to default

To revert back to the default CSS styling, at the bottom of the CSS Editor area, click Restore to Default. This action clears the code you entered in the CSS Editor area.

Export and import theme configurations

You can export theme configurations from one instance and import them into another, such as from a test environment to a production environment.

To export and import theme configurations:

  1. In the source instance, open the Theme Customization page and click Export to save the configurations as a JSON file.

  2. In the target instance, open the Theme Customization page, click Import, and then select the JSON file.

  3. Click Yes to confirm the import.

    Importing theme configurations replaces all settings on the target instance's Theme Customization page with those from the source instance.

See also