Examples of CSS Branding in the Portal

Products

• CA Identity Portal
• CA Identity Suite
• CA Identity Manager
• CA Identity Governance

Issue/Introduction

This KB is intended to elaborate on the Portal Branding Documentation available here:  
https://techdocs.broadcom.com/us/en/symantec-security-software/identity-security/identity-portal/14-5/administrating/identity-portal-administration/branding.html
The documentation is very high level, this KB intends to expand on this information and will show how to locate classes and attributes to use in the CSS area of Portal Branding to change the look and feel of the Portal user interface.   The information provided below is from recent client requests for Branding assistance to hide some unused features.  

Using the methods demonstrated in this KB you should be able to modify the Branding throughout the Portal.

Environment

Identity Portal 
14.4
14.5

Resolution

Table of Contents

• Example one:  Requirements: Hide the Register Link on the Login Page
• Creating the CSS in Portal Admin > Branding
• Example 2: Using a unique Attribute in the CSS configuration to hide the Registration Link:
• Example 3: Hide the notify Selected button from the Managed Campaigns area of the Portal Certification module.

Example 1:  Requirements: Hide the Register Link on the Login Page

Locate the Class involved.

1.  Navigate to the location where the object appears.  Right Click and choose ‘Inspect’

 

2. This will open the Browsers Dev tools to the specific Class being used:

3.  You can see the class name that will need to be used later highlighted:
button.sigma-link-button.primary.brand-link-button.md-button.md-ink-ripple

One option to quickly get this information out of the browser Dev tools is to Right Click and Edit as HTML and copy the element out.

<button class="sigma-link-button primary brand-link-button md-button md-ink-ripple" type="button" ng-transclude="" branding-element="" ng-click="_selfRegistrationClick()" ng-show="serverAvailable" ng-hide="submitting || submitSuccessfully" aria-hidden="false">

                        Register

                    <div class="md-ripple-container" style=""></div></button>

The required class:
class="sigma-link-button primary brand-link-button md-button md-ink-ripple"

And the attribute needed to narrow the scope:
ng-click="_selfRegistrationClick()"

You can copy the row and edit it to include 'button' and to replace all spaces with periods to end up with a class that can be used in the CSS Branding: 

At this point the following information has been gathered:

CSS Class:
button.sigma-link-button.primary.brand-link-button.md-button.md-ink-ripple

Attributes need to be wrapped in [brackets]:
[ng-click="_selfRegistrationClick()"]

CSS Class with Attribute specified:
button.sigma-link-button.primary.brand-link-button.md-button.md-ink-ripple[ng-click="_selfRegistrationClick()"]

We are now ready to move into the Portal and start Branding.

Creating the CSS in Portal Admin > Branding

1. In Portal Admin > Branding > select the Page you want to modify, for example for the Register link, Public.

2. Then click the + next to CUSTOM at the bottom left of page:

3.  Set class name:
button.sigma-link-button.primary.brand-link-button.md-button.md-ink-ripple

4.  Select Add Attribute, scroll down, and select ‘display’  If display is not an option, select "other" and type in display.
Then type in "none" or "none !important" as it's value.

5.  Click Save - and check the results. 

6.  Using just the class, button.sigma-link-button.primary.brand-link-button.md-button.md-ink-ripple results in all links being removed from the Login page as they all fall under that class:

 

To make this more specific to only remove the ‘Register’ link we will need to specify additional parameters.  One option is to set the full classpath, but this would require getting each parent class up to the root class, a better option would be to use an attribute specific to that object or feature.

7.  Going back to the inspect element we see that the Registration button has a unique attribute of “ng-click="_selfRegistrationClick()"

8.  Add the Attribute wrapped in [] brackets to the end of the class:

button.sigma-link-button.primary.brand-link-button.md-button.md-ink-ripple[ng-click="_selfRegistrationClick()"]

Using that as the CSS set to "display = none" will only remove the Register link:

 

 

Example 2: Using a unique Attribute in the CSS configuration to hide the Registration Link:

Alternatively, as shown in KB 145094  we can use just the attribute name since it is unique to the Register Module, leaving the class out of the CSS configuration:

1. Add a custom CSS using the attribute name: [ng-click="_selfRegistrationClick()"]

2. Add the attribute "display" for this selector, then set the value to "none" or "none !important"

This will also result in the Registration link being hidden on the Login page. 

 

Example 3: Requirement: Hide the notify Selected button from the Managed Campaigns area of the Portal Certification module.

How to hide the Notify Selected button on the Managed Campaigns view of the Certifications Module?

1.  Find the Class: Right click on the button and select inspect – dev tools elements come up -
 

2.  right-click, Edit as HTML and copy out and format the class as shown in Example 1 by adding button. to the start of the class and replacing all spaces with periods.

 

The resulting class:
button.md-raised.md-primary.mdbutton.md-ink-ripple

3.  Add that as a CSS, this time under the Desktop view.  
Add the ‘display’ from the drop down and set to 'none' or 'none !important' - if display does not show, choose other and type in display.

 

4.  Save and check the results.


This impacts too much and hides the buttons from ALL Campaign areas, including the Submit button on Active Campaigns as they also fall under the button.md-raised.md-primary.mdbutton.md-ink-ripple class:

 

5. We need to narrow this further by going back to the inspect to find any unique attribute in the class.
In this case ‘ng-disabled=!notifyCount’  can be used to narrow down to that specific attribute.

 

6. Set the class[attribute] in CSS under Portal Admin > Branding:

button.md-raised.md-primary.mdbutton.md-ink-ripple[‘ng-disabled=!notifyCount’]

 

This results in the Notify button being removed ONLY from the Managed Campaign area of the Certifications Module, leaving the Submit button available on Active Campaigns

Additional Information

Some CSS settings can be overwritten by other configurations, to force a setting use 'none !important' instead of just 'none' 

To make use of this information a basic understanding of CSS attribute usage if required. For more information about CSS attributes,   https://www.w3schools.com/css/

All images above taken using the latest build of Chrome, but all browsers have a similar Development Tool.