11.2 Branding the SailPoint User Interface

Branding the SailPoint User Interface

Objective 4.9 asks you to know which elements of the SailPoint UI can be branded and how to change them. SailPoint's Compass white paper Branding IdentityIQ is the detailed reference. For the exam, know the categories of brandable elements and the mechanism for each.

What Can Be Branded, and How

CSS Branding

The custom style sheets exist so that rules placed in them override the product defaults without anyone editing product CSS. Community examples use rules like these:

/* Page background */
.sp-body-container { background-color: #ffffff; }

/* Top navigation hover and selected colors */
.bg-primary .nav li > a:hover,
.bg-primary .nav li > a:focus { background-color: #0b3d91 !important; }
.bg-primary .nav li.active > a { background-color: #0b3d91 !important; }

Practical tips:

• Use the browser's developer tools to find the class that styles an element, then override it in the custom file.
• Browsers cache CSS aggressively. Clear the cache or use a private window when testing.
• Some product rules use !important. An override may need the same weight or a more specific selector.

Image Branding

The white paper's guidance, as quoted in SailPoint's developer community:

The logos are specified in core product .xhtml files. The recommended approach is to replace the image files in the ui/images directory with custom images, using the same file names. This avoids changing the .xhtml files and simplifies upgrades.

If you must point to a new file name, you edit the include that renders it, such as the login page include. That file then has to be re-checked on every upgrade.

Text Branding

To show "ACME Access Portal" instead of product wording, override the relevant message keys in iiqCustom.properties instead of editing pages. The same mechanism translates text (section 11.3).

Keeping Branding Safe

1. Everything lives under the web application. Upgrades replace the installation directory (section 3.2), so custom CSS, images, and properties must be reapplied.
2. Put branding in the build. With the SSB (section 3.1), branding files go in the project's web folder, so every build and environment gets them. The community also describes using build file-layout rules to ship different logos per environment, such as a red "TEST" banner in non-production.
3. Prefer overrides over edits. Custom CSS files, same-name images, and iiqCustom.properties all avoid changing product files, which keeps upgrade work small.
4. Remember object text. Application, role, policy, and entitlement descriptions shown in the UI are data, not branding files. They can be localized with multi-language descriptions (section 11.3).

A Branding Project Plan

A typical branding request covers the login page, the header, colors, email, and a few wording changes. A practical order:

1. Inventory the requirements against the table above: which are CSS, which are images, which are text, and which are email templates.
2. Build styles first in ui-custom.css. Test the Home page, request pages, certifications, and the login page in each supported browser.
3. Swap images by replacing same-named files in ui/images with correctly sized logos, including any images used on the login page.
4. Adjust text in iiqCustom.properties (and the language variants if the installation is multilingual).
5. Match email styling by giving custom templates the same colors and logo, hosted at a URL recipients can reach. For Rapid Setup, update the style sheet, header, and footer templates on its Miscellaneous tab.
6. Package and promote the files through the build, so development, test, and production match. Consider a visible environment marker in non-production.

Test after every patch as well. Patches can change page markup, and a CSS selector that worked before may no longer match.

What You Cannot Brand Through the UI

IdentityIQ has no admin screen for logos and colors. Some SaaS products offer a "Product Branding" page, but IdentityIQ branding is done with files (CSS, images, and properties) deployed with the application. If an exam option says "upload a logo in Global Settings," reject it for IdentityIQ.