Skip to content

Fortified IDDocs

Get started

First steps for applying an organisation overlay to a Fortified ID application

This page takes you from a standard installation to a visibly changed application in four steps. It uses Fortified ID Access as the example, where an overlay directory is configured out of the box.

Where the files go

Section titled “Where the files go”

An overlay directory contains an assets folder, and the files inside it replace files of the same name in the application.

<overlay directory>/
└── assets/
    ├── css_overrides.css
    ├── ui_config_overrides.json
    └── logo.svg

In Fortified ID Access the overlay directory defaults to ${system.customer_home}/overlay, so no configuration change is needed to get started. Other products set overlay_dir or overlay_dirs explicitly. See Overlay.

Change a colour

Section titled “Change a colour”

  1. Create <overlay directory>/assets/css_overrides.css.

  2. Add the variables you want to change. Only the variables you list are affected.

    :root {
      --color-primary: #6b2d5c;
      --color-button-background: #6b2d5c;
    }

  3. Reload the authentication page. The change applies immediately; no restart is required.

If nothing changes, check that the file is reachable at <application url>/assets/css_overrides.css in the browser. A 404 means the overlay directory is not configured or the file is in the wrong folder.

The full list of variables is in CSS.

Change the logo and title

Section titled “Change the logo and title”

  1. Place your logo in <overlay directory>/assets/.

  2. Create <overlay directory>/assets/ui_config_overrides.json.

    {
      "logos": {
        "access_header": {
          "src": "assets/logo.svg",
          "size": "80px"
        }
      },
      "title": "Acme"
    }

  3. Reload the page.

Which logo slots an application uses by default differs per application, so check UI Configuration Overrides before assuming a slot is in use.

Next steps

Section titled “Next steps”