Cloud Access Manager 8.1.4 - Advanced Customization

Introduction

This guide describes how you can customize the appearance of Cloud Access Manager to meet the needs of your users and to match your corporate branding.

Topics:

Overview

You can easily change common aspects of the look and feel of Cloud Access Manager using the Customize Appearance options in the Cloud Access Manager Administration User Interface (UI). For example, you can change the colors, company name and logo in the Admin UI. For more extensive changes, you can manually edit the Cascading Style Sheet (CSS) file that is used to style Cloud Access Manager from the Admin UI.

If you cannot achieve the look you require by editing the CSS file, you can also edit the HTML of the Login and Home Realm Discovery (HRD) pages. You will find the customization settings in the Admin UI under Settings | Customize Appearance.

• To manually edit the CSS file, select Enable advanced customization mode. You will then be able to download the CSS file and upload a modified version. This CSS file is called theme.css.

  If you want to reference additional images and fonts in the CSS file, you can copy the images/fonts to the customization directory on each Security Token Service (STS) host:

  C:\Program Files\One Identity\Cloud Access Manager\Customization\

  You can then reference these files using the path /CloudAccessManager/Customization/<filename> in the CSS file.

• To manually edit the HTML for the Login and HRD pages, you need to log into each of the STS hosts and manually edit the following files:

  C:\Program Files\One Identity\Cloud Access Manager\Customization\Login.htm

  C:\Program Files\One Identity\Cloud Access Manager\Customization\UserIdentity.html

  When you edit these HTML files, you must ensure the changes are applied to each STS host. If you need to include JavaScript or image files, you can place these files in the same directory and reference them using a relative path.

Upgrading

Files that you have edited manually will not be updated when Cloud Access Manager is upgraded to the latest version.

It is important that you keep track of the changes that you have made to the default files, so that you can re-apply those changes to the latest default files after upgrade.

We recommend that you keep your own backup of the original versions of the files that you edit so that you can compare the original default file with the upgraded default file to see the changes that have been made.

Updated default files can be found in the following locations:

• For any files uploaded using the Cloud Access Manager Admin User Interface (UI):
  • Go to the page where you uploaded the file (such as the Customize Appearance settings page or the Customize page for any authenticators that you have customized)
  • Download the default files using the buttons provided
• For the login and Home Realm Discovery (HRD) HTML files, you can find the updated default files in the backup folders in the following locations:
• C:\Program Files\One Identity\Cloud Access Manager\Customization\Login\backup\Login.htm
• C:\Program Files\One Identity\Cloud Access Manager\Customization\HRD\backup\UserIdentity.html

Changing text

To change any existing text in Cloud Access Manager you will need to update the language definition files. Please refer to the One Identity Cloud Access Manager How to Support Multiple Languages guide for information on how to do this.

If you add any new text into the login or Home Realm Discovery (HRD) pages and also want to support multiple languages, then you will need to add this text to all of your language definition files and reference the key within the HTML file.

• For new text in the login page, you will need:
  • update the login_<language code>.json files
  • reference the key using the HTML attribute: data-localize="<key>"
• For new text in the HRD page:
  • update the cam_<language code>.json file
  • reference the key using one of the following methods:
    • enter where you want the text to be displayed: {{ '<key>' | translate }}

    • using the HTML attribute: translate=”<key>”