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).

Note:  
  • You cannot customize the ActivID Management Console per domain.

  • You cannot customize the ActivID AS RADIUS Front End.

  • You can also customize the styles and layout of the ActivID Authentication Portal by modifying the stylesheet.

Customize the Labels in English

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

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

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

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

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

  6. 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.

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

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

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

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

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

  7. 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.

  2. 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.

Important: When you have finished customizing the labels and/or images, you must apply the package.

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:

Copy
<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.

Important: At the first reset or the first application of a customized package, the script also creates a backup folder as a .ZIP file containing the default versions of all the customizable configuration files (but not the branding files).
Do NOT delete this backup or you will not be able to restore the default configuration.

Customize the Design of the Authentication Portal

Prerequisites:
  • You have created a reference customization package.
  • Before implementing your customization, it is recommended that you use browser-based developer tools to analyze the stylesheet elements and visualize your customization options.

  • For example, in Google Chrome, either press F12 or right-click on the page and select Inspect, or from the browser menu, select More tools and then Developer tools.

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.

Important:
  • Do NOT modify the default stylesheet. Instead, use it as a template and add your customization to a copy of the default file.

  • You must have a good working knowledge of editing CSS files.

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.

  4. 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.

  5. 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;
}
  1. Add the display: none; line.
  2. Locate the .authMethodsDropDown rule:
Copy
.authMethodsDropDown {
     /* display: none; */
}
  1. Comment the display: none; line.
  1. 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;
    }
    1. Locate the .domainList rule and replace it with the following code:
    Copy
    .domainList {
    position: absolute;
    top: 0;
    }
  2. Save your changes.
  3. 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.
  4. To fully customize the ActivID Authentication Portal, you can also modify the labels and images.

  5. Apply the package.

  6. Restart all the ActivID AS applications.

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

Apply the New ActivID AS 8.5 Look and Feel

The new ActivID Authentication Portal look and feel will not be applied if an existing customization is detected at installation time in order to not alter existing customizations.

When the customization is limited to only one or several domains, the remaining domains will not be updated with the new look and feel.

To apply the new look and feel for the domains that are not customized:

  1. Download the customization package.
  2. Merge the common customization with each of your customized domains in the domain-specific customization folders.
  3. Reset the customization to default.
  4. Important: The “Reset to default customization” operation will delete the selected customization (all or domain-specific). Do not forget to download the customization package to save them!
  5. Upload your modified customization package.
Note: If you were already using ActivID portals before the Service Pack installation, apply Crtl+F5 on the browser after installation to display the new look and feel.