Theming

About theming

The Signicat Theming service allows you to configure the appearance of the content that is presented to your end-users, so that you can provide a cohesive user experience and conform with your company's branding guidelines.

With our theming service, you can determine:

• The placement of a custom logo.
• The placement and size of the headers.
• The background colour or image.
• The alignment of the widget.
• The alignment of the content.
• The colour palette used for the background, headers and buttons.

Which products support theming?

Theming is currently only supported by certain eID methods in the eID Hub. We are in the process of adding support for more eID methods, and will eventually roll out theming to all Signicat products.

Are themes the same as graphical profiles?

With the new Theming service, you can do everything and more that you could do previously with the Graphical profiles editor.

How does theming work?

You can create custom themes with the theming service in the Signicat Dashboard, which can be configured to your requirements.

Note

Themes do not affect the appearance of the Signicat Dashboard, only the appearance of the content that is presented to your end-users.

A theme can be created on an organisation or an account level, and can be applied on an organisation, account or domain level.

• You can only apply one theme at an organisation or account level. This becomes the default theme for the children of that level. This means that:
  • If you set the theme at an organisation level, then any account under this organisation gets the theme automatically applied.
  • If you set the theme at an account level, then any domain under this account gets the theme automatically applied.
• If you have created multiple accounts under the same organisation, then it is possible to set a different theme for each account.
• You can apply one or more themes at a domain level.

Get started with the theming service

You can create and manage themes in the Signicat Dashboard. To do this:

1. Log in to the Signicat Dashboard.
2. In the top navigation bar, use the dropdown menu next to your organisation name to select the account that you want to make changes to.
3. Navigate to the Theming service. You can find this either:
   • Under the Management heading, click Theming.
   • In the left-side menu, expand the Branding dropdown menu, then click Theming.

Success!

You are now in the account theming section, where you can see the default theme setting. From here, you can customise the theme for the selected account.

How to create a new theme

1. To begin creating your own theme, click the + Add new in the left-side menu.
2. In the Create new theme dialog box:
   1. Enter a name you want to give the theme in the Theme name field.
   2. Enter a short description of the theme in the Description field.
   3. Click the Create button to create the theme.

Success!

You have now created a new theme. This theme is now selectable from the Selected theme dropdown menu.

How to customise a theme

Once you have created a theme, you can begin to customise it. You can follow these steps for any themes that you want to configure, including existing themes that you want to update.

Important

You must ensure that you are compliant with Web Content Accessibility Guidelines(WCAG) regarding contrast between font colours and other elements.

1. Enter edit mode

1. Ensure that the theme you want to edit is selected from the Selected theme dropdown menu.
2. Click the Edit theme button.

2. Customise the header

To customise the header, click the Header button. Here, you can configure the following parameters:

• The header position:
  • None: Not using a header.
  • Page: Placing a header at the top of the page.
  • Widget: Placing a header at the top of the widget.
• The header height.
• Whether you want a logo in the header.
  Maximum file size

  The maximum logo file size is 5 MB.

• Where the logo is positioned in the header.

3. Customise the widget

To customise the widget, click the Widget button. Here, you can configure the following parameters:

• Whether you want a logo in the widget, and where the logo is positioned.
  Maximum file size

  The maximum logo file size is 5 MB.

• The logo size.
• Where the logo is positioned in the widget.
• How the content is aligned in the widget.

4. Customise the colours

To customise the colours, click the Colours button. Here, you can configure the following parameters:

• Primary colour: The colour and text colour of the primary buttons, such as the Continue button.
• Secondary colour: The colour and text colour of the secondary buttons, such as the Cancel button.
• Background colour: The colour of the top half of the background, or the entire background.
  How to show a full screen background colour

  To learn how to toggle between a split and full screen background, see the Customise the background section.

• Header colour: The colour of the header at the top of the page or widget, if a header has been enabled.

5. Customise the background

To customise the background, click the Background button. Here, you can configure the following parameters:

• The page layout, which determines the position of the widget on the background.
• Whether you want a solid colour or an image as the background.
  Maximum file size

  The maximum background image file size is 5 MB.

• Whether the background is split or full screen.

6. Save your changes

Once you have finished editing your theme, you must click the Save changes button to save your configuration.

How to apply a theme

Apply a theme on an account level

1. On the Theming page, you will see the name of the account you are currently making changes to in the Accounts and domains dropdown menu.
   1. Click the Use different themes for domains toggle button.
   2. Select the domain you want to make changes to from the Accounts and domains dropdown menu.
2. Use the Selected theme dropdown menu to select the theme that you want to apply to the account or domain.
3. Click the Apply theme button.

Apply a theme on a domain level

If you have created domains under your account, then it is possible to apply a different theme to each domain that you have. If you want to do this, you must use the following order:

1. Set the custom theme for the account.
2. Set the custom theme for the domain(s).

If you set the account theme after the domain themes instead, then the account theme will overwrite the saved custom domain themes and your work will be lost.

We recommend that you create two distinct themes first. By doing this, you will prevent any loss of work if you decide that you want to apply one theme at an account level and one theme for a specific domain.

To set a custom theme for a domain:

1. On the Theming page, click the Use different themes for domains toggle button.
2. Select the domain you want to make changes to from the Accounts and domains dropdown menu.
3. Use the Selected theme dropdown menu to select the theme that you want to apply to the account or domain.
4. Click the Apply theme button.

Apply multiple themes for a domain

If you have created domains under your account, then it is possible to apply multiple themes to each domain that you have. To do this:

1. On the Theming page, click the Use different themes for domains toggle button.
2. Select the domain you want to make changes to from the Accounts and domains dropdown menu.
3. Click the Use multiple themes for this domain toggle button.
4. Select the the theme that you want, then click the + Add theme button. Repeat this step for every theme that you want to apply. The added themes will appear in the list below.
5. Once you are happy with your selection, click the Apply multiple themes button to proceed.

Specify a theme per request

If you have multiple themes for a domain or account, then you can specify which theme you want to use per request.

The way you do this depends on which authentication protocol you use.

OpenID Connect

To specify a theme when using OpenID Connect, you must use the acr_values URL parameter.

Example: Specifing a theme with OIDC

acr_values=theme:xfwfyv1340

In this example,xfwfyv1340 is the theme ID. You can find and copy the required theme ID from the Themes service in the Signicat Dashboard.

Want to learn more?

To learn more about ACR values, see acr_values in our the OIDC documentation.

Authentication REST API

To specify a theme when using the Authentication REST API, you must use the optional themeId field when creating authentication sessions.

Example: Specifing a theme with the Authentication REST API

"themeId": "agkaa12"

In this example,agkaa12 is the theme ID. You can find and copy the required theme ID from the Themes service in the Signicat Dashboard.

Want to learn more?

To learn more about this, see our Authentication REST API reference documentation.

SAML 2.0

Information will follow soon.