In my last blog, I explained that because login is often the “front door” of a website, the branding, logos and colours should match the web service, as they are all important trust indicators to the end user.

Let’s look at some examples of these settings in practice:

Changing default text for a friendlier customer experience

To make error messages more polite, modify the localization file from

INVALID_CREDENTIALS = Invalid credentials

to

INVALID_CREDENTIALS = Oops. Are you sure you have typed the username and password correctly?

Changing default colours to make things more inviting

To make even error colours a little less angry, modify the template definitions file from

@LOGIN_ERROR_COLOR@ = red
@LOGIN_ERROR_BACKGROUND@ = yellow

to

@LOGIN_ERROR_COLOR@ = darkblue
@LOGIN_ERROR_BACKGROUND@ = white

Dynamic brand changes

The same application can request different UI templates at run time dynamically. An application that has been integrated with SAML SP for Java or SAML SP for ASP.Net can select from a predetermined list of templates at run time. Configure the list of permitted templates in the Template Names field of the Web Agent definition in Ubisecure SSO Management. Template names are separated by white space. The first template name is considered the default template and is used if no template is selected by the application using the API during the LoginEvent.

CSS modifications – when you need more flexibility

The template configuration file contains a powerful css tag:

css = mycustomcss.css

All aspects of the display that can be controlled by CSS can be tweaked using a custom CSS. It’s typically easiest to start with a saved copy of the default CSS, and modify it accordingly until it has a look that matches your service.

Copy the corresponding elements and styles from your standard brand CSS. You don’t need to restart the application for seeing changes made to CSS – just save the CSS file and refresh the page.

Custom javascript – extreme control

The most powerful option is to allow the use of custom javascript files:

javascript = mycustomjavascript.js

The javascript (or many different files) will be included in the head tag of the page and can be used to invoke all kinds of programmatic changes to pages. The javascript has full access to the page layout DOM and access to special variables to find out more about what the user is doing, what page they are on and other selected session information such as language selected and template used.

For more information, refer to the UI Customization Guide on the extranet Ubisecure SSO 8.0.0 Login UI Customization.pdf