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
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
@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.
For more information, refer to the UI Customization Guide on the extranet Ubisecure SSO 8.0.0 Login UI Customization.pdf