Customize the ActivID AS Design

You can customize the look and feel of the ActivID portals to meet any branding and/or language requirements.

Customize the Labels and Images

You can customize the language of the labels and the images of the ActivID Authentication Portal, the Management Console and the Self-Service Portal, as well as the Mobile Application (that is, HID Approve).

About Non-ASCII Language Files

You must convert non-ASCII language files to ASCII encoding before adding them to the customization package.

To convert non-ASCII language files, you can use Java tools such as native2ascii. The following is an example for a Hindi authentication portal language file (where encoding is one of the original files):

native2ascii.exe -encoding UTF-8 ac-4tress-portal_hi.properties

If you want to make changes to the language file, you must convert the file and paste the changes to the ActivID AS Customization package.

For information on supported encodings, go to http://docs.oracle.com/javase/8/docs/technotes/guides/intl/encoding.doc.html.

Customize the Labels in English

1. In the reference customization package, locate the properties files for the application that you want to customize.

For example, to customize the ActivID Self-Service Portal labels, you need the SelfServicePortal/branding/default/ssp/ac-4tress-ssp_en.properties file.

2. Make a copy of this file on your local disk and open it for editing.

3. Update the labels properties as required and save the file.

4. If you have not previously customized your deployment, manually create the _common_ and/or domain-specific folders using the default folder as a template.

5. Copy the updated file to the relevant folder in the customization package:

   • <ApplicationFolder>/branding/_common_/<application> for a customization common to all domains.
   • <ApplicationFolder>/branding/<DOMAIN_NAME>/<application> for a domain-specific customization (for the ActivID Authentication Portal and Self-Service Portal only).

   For example, for the ActivID Self-Service Portal in the ONLINEBANK domain, copy the file to the SelfServicePortal/branding/ONLINEBANK/ssp folder.

Localize the Labels With Another Language

1. In the reference customization package, locate the original properties files for the application that you want to customize.

For example, to customize the ActivID Self-Service Portal labels, you need the SelfServicePortal/branding/default/ssp/ac-4tress-ssp_en.properties file.

2. Make a copy of this file on your local disk and rename it with the locale corresponding to the required language.

For example, for French, rename the file to ac-4tress-ssp_fr.properties.

3. Translate the label properties to the required language and save the file.

4. If you have not previously customized your deployment, manually create the _common_ and/or domain-specific folders using the default folder as a template.

5. Copy the updated file to the relevant folder in the customization package:

   • <ApplicationFolder>/branding/_common_/<application> for a customization common to all domains.
   • <ApplicationFolder>/branding/<DOMAIN_NAME>/<application> for a domain-specific customization (for the ActivID Authentication Portal and Self-Service Portal only).

   For example, for the ActivID Self-Service Portal in the ONLINEBANK domain, copy the file to the SelfServicePortal/branding/ONLINEBANK/ssp folder.

Customize the Images

1. In the reference customization package, locate the original image file for the application that you want to customize.

For example, to customize a ActivID Self-Service Portal image, go to the SelfServicePortal/branding/default/ssp/img folder.

1. Determine the dimensions of the original image and prepare your new image with the same dimensions.

2. If you have not previously customized your deployment, manually create the _common_ and/or domain-specific folders using the default folder as a template.

3. Copy the updated file to the relevant folder in the customization package:

   • <ApplicationFolder>/branding/_common_/<application>/img for a customization common to all domains.
   • <ApplicationFolder>/branding/<DOMAIN_NAME>/<application>/img for a domain-specific customization (for the ActivID Authentication Portal and Self-Service Portal only).

   For example, for the ActivID Self-Service Portal in the ONLINEBANK domain, copy the file to the SelfServicePortal/branding/ONLINEBANK/ssp/img folder.

Restore the Default ActivID AS Branding/Configuration

You can also use the script to restore the ActivID AS branding and configuration default values (that is, those at installation before any customization).

To restore the values on an ActivID AS installation, run the customizeApplications.sh script as ftadmin using the following reset command:

<ACTIVID_HOME>/ActivID_AS/bin/customizeApplications.sh -r

The script then deletes the existing branding files and restores the default configuration files, deleting the customized versions.

Customize the Design of the Authentication Portal

You can customize the design of the ActivID Authentication Portal by modifying the portal’s stylesheet (.css) is included in the customization package.

The default CSS file is named theme.css, and is located in the /AuthenticationPortal/branding/default/ap/css folder of the customization package.

You can customize the following elements:

• Header – logo and background.

• Content:

  • Title and text (infoText section).
  • Login Box – position, login fields and authentication methods.

  • Footer – logo and text.

The Login Box sections are located in the loginForm element:

• Header – logo, title, selected authentication method and message.

• Content:

loginfields – the fields are organized in a table where:

• Each field entry (including the button) is represented by a row.
• Each row contains two columns, identified by label and input classes.
• The domain list is identified by the domainList class.
• The buttons row is also identified by a loginBoxButtons class.



Note: The rows and columns organization is not mandatory. You can modify the layout of the label and input fields as required. For example, you can move the domain selection field above the user name and password fields.

authMethods – the icons for the available authentication methods (determined by the authentication policy) are located in the /AuthenticationPortal/branding/default/ap/img folder of the customization package.

You can also display the available methods as a drop-down list instead of the row of icons.

• Footer – the *required legend

1. If you have not previously customized your deployment, manually create the _common_ and/or domain-specific folders using the default folder as a template.

2. Make a copy of the default theme.css (in the /AuthenticationPortal/branding/default/ap/css folder).

3. Edit the stylesheet with your required customization.

Note: Editing guidelines:

• Some rules might be empty. They identify a section which does not require specific customization by default but can be customized if necessary.

• You can add new rules if required, even if a part/component is not identified in the page.

• You can also hide certain parts by changing the corresponding rule to display: none.

• Some rules cannot be customized (for example, those specific to generated JSF/PrimeFaces components).

• Certain elements have complex structures (for example, those specific to generated JSF/PrimeFaces components) and are less easy to identify.

4. To display the available authentication methods as a drop-down list instead of a row of icons, in the stylesheet:

1. Locate the .authMethods rule:

Copy

.authMethods {
     position: absolute;
     bottom: 0;
     width: 100%;
     display: none;
}

2. Add the display: none; line.
3. Locate the .authMethodsDropDown rule:

Copy

.authMethodsDropDown {
     /* display: none; */
}

4. Comment the display: none; line.

5. To move the domain selection field above the user name and password fields:
   1. Locate the .loginFields rule and replace it with the following code:
   Copy

   .loginFields {
       width: 100%;
       position: relative;
       padding: 1px;
   }
   
   .loginFields > div:first-of-type {
        margin-top: 30px;
   }

   2. Locate the .domainList rule and replace it with the following code:
   Copy

   .domainList {
   position: absolute;
   top: 0;
   }

6. Save your changes.

7. Update the customization package with your stylesheet:

   • To apply the customized design to all your domains, add your stylesheet to the /AuthenticationPortal/branding/_common_/ap/css folder.
   • To apply the customized design to a specific domain, add your stylesheet to the /AuthenticationPortal/branding/<DOMAIN_NAME>/ap/css folder.

8. To fully customize the ActivID Authentication Portal, you can also modify the labels and images.

9. Apply the package.

10. Restart all the ActivID AS applications.

11. If necessary, refresh (F5) the ActivID Authentication Portal page in your browser to apply the new design.