Customize the ActivID Appliance 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).

1. In the customization package, locate the branding 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 the required files on your local disk and open them for editing.

3. Update the labels files and images that will override the default files and values as required.

To customize images, determine the dimensions of the original image and prepare your new image with the same dimensions.

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 files 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 Authentication Portal and Self-Service Portal only).

For example, if you want to add specific customization (branding and language) for “DOMAIN1” for the ActivID Authentication Portal and ActivID Self-Service Portal, including new images, then the following files should be added:

• AuthenticationPortal/DOMAIN1/ap/ac-4tress-portal_en.properties
• AuthenticationPortal/DOMAIN1/ap/img/<all image files>
• SelfServicePortal/DOMAIN1/ssp/ac-4tress-ssp_en.properties
• SelfServicePortal/DOMAIN1/ssp/ac-4tress-ssp_fr.properties
• SelfServicePortal/DOMAIN1/ssp/img/<all image files>

6. When the new files are ready, archive them all into a new zipped package and upload it.

Reset to the Default Labels and Icons

1. If you want to revert to the original English property files, click Reset to default. This deletes any uploaded customization package.

The default values are restored and all the customizations of the selected file are permanently deleted. The default values are those provided by the latest update installation, either service pack or hot fix.

2. If you want to reset the values for a specific domain, select the required domain from the list.

   To reset all the domains, select All.

3. Click Reset to confirm the reset.

4. Under Configuration in the left-hand menu, select Applications and click Restart all Applications.

   Note: This is required to apply the design configuration.

Localizing the Portals

You can localize the language of all the ActivID portals, except the ActivID Console.

• You can customize the label and language for each domain by editing the corresponding files.
• You can customize the label and language per portal.

Add a New Language File

To add label files for a new language:

1. In the downloaded customization package, locate the English properties file(s) for the portal(s) that you want to localize.

For each file, make a copy and rename the file by replacing the “en” letters with the two letters representing the language as per the two-letter ISO 639-1 codes.

For example, ac-4tress-ssp_en.properties becomes ac-4tress-ssp_fr.properties for the French translation.

For the full list of language codes, refer to the ISO 639 standards.

2. Then edit the properties by translating the English labels.

3. Add the translated files to the customization package and upload it.

Note: The applications might need to be restarted for the customization to take effect.

4. View the new language in the list.

If you need to use several languages for your installation (for example, switching from one language to another), contact HID Global Technical Support for assistance.

5. Once the new files are uploaded and the applications restarted, the languages are added to the ActivID Console language list. If the browser settings on the machine used to access the portal correspond to one of the installed languages, the portal is displayed according to this language. Otherwise, the portal is displayed in the default language (English).

Note: Your browser might need to be restarted when you change the language preference settings. Refer to the documentation provided with your browser.

Edit a Language File

You can directly edit the installed language files using the ActivID Console, without downloading the Customization package.

1. Log on to the ActivID Console and, under Configuration, select Customization.

2. Go to the Customize your language files section.



3. You can either customize the labels to be used for all domains (by default), or customize the labels for a specific security domain.

   • To view/edit the default label files for all the domains, select the All from the drop-down list.

   • To view/edit the label files for a specific domain, select the required domain from the drop-down list.

4. Select the Portal to customize and click Customize.



By default, the English language file is loaded and displayed.

Note: Only the English language label file is delivered with the appliance. Therefore, only one file appears initially. You can add additional languages.

5. If necessary, select the Language file to customize and click Load File.

6. Make the required modifications.

The content of the language label file is displayed in ASCII only. For non-ASCII languages, verify the appropriate conversions.

7. Click Save to save your customization.

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:

The Login Box sections are located in the loginForm element:

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

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

Apply the New ActivID Appliance 8.7 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.
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!
4. Upload your modified customization package.