How to add custom colors to Identity Portal

book

Article ID: 103341

calendar_today

Updated On:

Products

CA Identity Manager CA Identity Governance CA Identity Portal

Issue/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

Resolution

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

<Please see attached file for image>

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.

<Please see attached file for image>

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.

<Please see attached file for image>

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.

<Please see attached file for image>

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.


 

Attachments

1558699246649000103341_sktwi1f5rjvs16jne.png get_app
1558699244806000103341_sktwi1f5rjvs16jnd.png get_app
1558699243034000103341_sktwi1f5rjvs16jnc.png get_app
1558699241193000103341_sktwi1f5rjvs16jnb.png get_app
1558699239270000103341_sktwi1f5rjvs16jna.png get_app
1558699237521000103341_sktwi1f5rjvs16jn9.png get_app
1558699235753000103341_sktwi1f5rjvs16jn8.png get_app
1558699233396000103341_sktwi1f5rjvs16jn7.png get_app