Portal Configuration Tool Guide

10.5 HotFix 2

Back Next

Customize Color Settings

You can modify the color settings of the UI sections to any valid CSS color code. For example, to change background color of unselected tabs to

AliceBlue

, set the property

--app-nav-item-background-color

#F0F8FF

The following table displays the properties you can modify in the

custom.css

file to customize the color settings for each Portal UI section:

S.No	Property	Description
1.	--app-header-bottom-border-color	Modifies the color of the bottom border of the header. Default is #ff800e . For example, set the property to #F0F8FF for AliceBlue .
2	--app-nav-item--selected-leftbar-color	Changes the color of the vertical orange line on the left side of the selected tab. Default is #ff800e .
3.	--app-call--to-action--background-color	Changes the background color of action buttons. For example, Save button. Default is #70be44 .
	--app-call--to-action--text-color	Alters the text color of action buttons. Default is #fff .
	--app-call--to-action--hover-background-color	Changes the hover background color of action buttons. Default is #d4edb1 .
	--app-call--to-action--hover-text-color	Modifies the hover text color of action buttons. Default is #fff .
4.	--app-nav-item-background-color	Changes the background color of unselected tabs. Default is #ddd .
4.	--app-nav-item-text-color	Modifies the text color of unselected tabs. Default is #000 .
5.	--app-nav-item-selected-background-color	Changes the background color of selected tabs. Default is #fff .
5.	--app-nav-item-selected-text-color	Changes the text color of selected tabs. Default is #000 .
6.	--app-secondary-button--text-color	Changes the text color of secondary buttons. Default is #000 .
	--app-secondary-button--background-color	Changes the background color of secondary buttons. Default is #ddd .
	--app-secondary-button--border-color	Modifies the border color of secondary buttons. Default is #4996f3 .
	--app-secondary-button--hover-text-color	Modifies the hover text color of secondary buttons. Default is #000 .
	--app-secondary-button--hover-border-color	Modifies the hover border color of secondary buttons. Default is #9c9c9c .
	--app-secondary-button--hover-background-color	Changes the hover background color of secondary buttons. Default is #ddd .
7.	--app-primary-button--background-color	Changes the background color of primary buttons. Default is #0d66d0 .
	--app-primary-button--border-color	Modifies the border color of primary buttons. Default is #0a4fc7 .
	--app-primary-button--text-color	Modifies the text color of primary buttons. Default is #fff .
	--app-primary-button--hover-text-color	Modifies the hover text color of primary buttons. Default is #fff .
	--app-primary-button--hover-border-color	Modifies the hover border color of primary buttons. Default is transparent.
	--app-primary-button--hover-background-color	Changes the hover background color of primary buttons. Default is #0d66d0 .
8.	--app-dropdown-item--background-color	Changes the background color of the dropdown menu item. Default is #fff .
8.	--app-dropdown-item--text-color	Modifies the text color of the dropdown menu item. Default is #000 .
9.	--app-dropdown-item--hover-background-color	Changes the hover background color of the dropdown menu item. Default is #f5fafe .
	--app-dropdown-item--hover-text-color	Modifies the hover text color of the dropdown menu item. Default is #000 .
	--app-dropdown-item--hover-border-color	Changes the hover border color of the dropdown menu item. Default is #e3f1ff .

Perform the following steps to modify

custom.css

file:

Navigate to the following path in your system:

<INFA_HOME>\app\portal\styles

Modify the

custom.css

file to change the color settings of the Portal UI.

Save the changes.

Navigate to the following path:

<INFA_HOME>\app\porta\bin

Run

install-portal.bat

install-portal.sh

file to deploy the changes. For more information on how to deploy changes, refer https://docs.informatica.com/master-data-management/supplier-360/10-5-hotfix-2-sp-1/installation-and-configuration-guide/installing-the-supplier-360-components/installing-the-portal-configuration-tool.html

Rename Saved Search

Table of Contents

Portal Configuration Tool Guide

Portal Configuration Tool Guide

Customize Color Settings

Customize Color Settings