Customize PPM interface

You can customize the PPM interface color and corporate logo to match your company's visual guidelines.

Customize theme color

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

To customize the theme color:

  1. On PPM menu, click Open > Administration > Open Administration Console.
  2. In the Administration Console Actions panel, click Administration Task > Theme Customization.

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

    Action Details
    Customize menu bar background color

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

    • 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 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.

    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.

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

Back to top

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.

Back to top

Change corporate logo

You can change the corporate logo displayed in the PPM standard interface.

To change the corporate logo:

  1. In the Administration Console Actions panel, click Administration Task > Theme Customization.
  2. Go to the Logo area.
  3. Click the image with a camera icon on it.
  4. Select the image file to be used as the new corporate logo.
  5. Refresh the page to apply the changes.
  6. To revert back to the default logo image, at the bottom of the Logo area, click the Restore to Default button.

Back to top

See also: