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, see the example below and also links under "Related information".
2. change the logo by replacing logo.png with your own (name must be logo.png).

Example: theme.css

CSS

:root {
  /* The font family. "--font-family-sans-serif" is the default font used by bootstrap. */
  --font_family: var(--font-family-sans-serif);
  /* The primary color (e.g. shown in the navigation header) */
  --color_ussp_primary: #00999980;
  /* The darker version of that primary color (e.g. shown as a header for forms) */  
  --color_ussp_primary_dark: #009999;
  /* The secondary color (e.g. shown in the left menu background) */
  --color_ussp_secondary:#D0D3DA;
  /* The tertiary color (e.g. shown in a submenu item) */
  --color_ussp_tertiary: #a2a2a2;
  /* The quaternary color (e.g. shown login page corner texts) */
  --color_ussp_quaternary: #ffffff;
  /* The background color of the login page */
  --color_ussp_login_background: #D0D3DA;
  /* The text color of the footer */
  --color_ussp_footer_text_color: #fff; 
  /* The background color of the footer when logged in */
  --color_ussp_main_page_footer_background: var(--color_ussp_primary_dark);
   /* The border top color of the footer when logged in */
  --color_ussp_main_page_footer_border: var(--color_ussp_primary);   
  /* The color of the header text on the dashboard */
  --color_grid_header_text:#a2a2a2;
  /* The color of the header on one grid item (process on dashboard) */
  --color_griditem_headline: #a2a2a2; 
  /* The color of the text in one grid item (process on dashboard) */
  --color_griditem_text: #a2a2a2;
  /* The color of an action item (e.g. the search) */
  --color_action_item: #2387AA;
  /* The color of the possible actions link */
  --color_possible_actions: #ffffff;
  /* The color when an action item is disabled */
  --color_disabled: #a2a2a2;
  /* The color of the background of the quick search buttons */
   --quick_search_btn_bg_color: tomato;
  /* The color of the quick search buttons when selected */
   --quick_search_btn_selected_color: black;   
  /* The size of the logo on the login page */
  --size_logo_login: 5rem;
  /* The size of the logo in the nav area */
  --size_logo_nav: 3rem;
}

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.