Configure branding in Smart ID Self-Service

This article includes updates for Smart ID 22.10.

This article describes how to configure the branding to be used in Smart ID Self-Service.

<SMARTIDHOME>

In this article, <SMARTIDHOME> refers to /home/nexus, but this can be different depending on the setup.

Smart ID Self-Service offers the possibility to select a customized branding, for example to adapt logos, colors and fonts.

Customize the branding

Go to the folder <SMARTIDHOME>/docker/compose/selfservice/config/branding.
Copy the default folder and select a new name for the copied folder (for example, my-custom-branding).
In the new folder, to reflect your custom branding, you can:
1. change colors and fonts in theme.css file.
2. change the logo by replacing logo.png with your own (name must be logo.png).

Customizing Fonts

A few things to know before changing the font in Smart ID Self-Service:

You should always define at least two fonts, because if the browser is not able to render a character using your first font, it will fall back on the next one in the list, and so on.
The css variable "--font-family-sans-serif" comes from bootstrap and allows for high compatibility on all devices (Windows, Mac, Android, and more...). It is suggested to keep it as a fall back, in case the browser is not able to render one of the characters using your own font.

If you are unsure about what values to use, check out the definition of the font-family css property.

Select the branding

Open this file for editing: <SMARTIDHOME>/docker/compose/selfservice/docker-compose.yml.
Change the parameter theme to the folder name you created in "Customize the branding" above. This is done in the CONFIG_JSON environment variable, see Set properties for Smart ID Self-Service.
See this example:
Example: Select branding
TEXT
```
"theme": "my-custom-branding"
```

Custom branding and software updates

There is no automated update path for custom branding. It might be necessary to adapt the style with new releases because of changes in the standard software. Therefore, custom branding can cause additional efforts during update.