How to add custom colors to Identity Portal
Document ID : KB000103341
Last Modified Date : 18/07/2018
 Show Technical Document Details
Introduction:
We updated some of the OOTB colors through the branding feature. However now we would like to update other portions of the product to match those colors. How can we do this?
Environment:
Identity Portal 14.1
Instructions:
To do this you need to use the custom section on the branding page. You need to inspect the element through your browser and add the CSS class to the custom title. 

1) Inspect element like below
Right click the object needed to grab the CSS class for modification.

Step 2) Notice under "Styles" you can see the class that is needed for modification. To test this you can change the background color temporarily through the UI. Just to confirm that you are using the right class.
Demonstrates the class name to use for the CSS

Step 3) Log into the Admin UI for Identity Portal and select the Branding tab.
Step 4) Be sure to select the appropriate View on the top left. If the wrong view is selected then you won't be able to update the color accordingly. For the specific example above I'm using a public view.
Demonstrates the View options on the Branding Page.

Step 5) Take the CSS Class specified on Step 2. For this scenario it is ".sigma-button.success" and add it to your Custom section.
Step 6) Select add attribute on the next column and choose background-color and hit Save on the top right.
Demonstrates how to add the custom class and attribute for changing colors.

If necessary refresh the page where the change was made and see if the color updated. You should notice it is complete.