Theming

The cidaas ID validator offers extensive UI customization options through CSS variables, allowing you to align the verification experience with your brand identity. By creating a custom theme, you can ensure a seamless transition between your application and the ID verification process.

First, head to the Admin UI and log in. Once you've done that select the section Hosted Pages in the sidebar menu. On the right hand side a user interface will open. At the top of the page select the tab Theming

Above the list of created themes - which will most likely still be empty at the moment - click the button with the label Create Theme.

In the now visible screen select a preset-theme. It does not matter which one you select, since we are going to replace the whole content anyways. You should now see the following:

First of all choose a fitting name for your theme and enter it in the top right input field. It is important that you prefix your name with idval. So for example you could name the theme idvalMyAwesomeTheme.

Afterwards please go ahead and delete all content by selecting all text within the :root{} selector in the right side window. In order to get you started another section provides an overview of all available variables. If you are not familiar with CSS, please read the following section and skip the rest of the page.

To save the theme, simply press the Create button.

I am not familiar with CSS. What do I do ?

In case you are not familiar with CSS we recommend to just stick to our default theme and only adjust specific variables. You can go ahead and copy-paste the content below into the theme field.

:root{
    --idval-font-family: 'Lato', serif;   
    --idval-header-visibility: visible;
    --idval-header-logo-position: center;
    --idval-header-background-color: #FFFFFF;
    --idval-header-logo-url: url('https://www.cidaas.com/wp-content/uploads/2021/05/cidaas-black-logo-300x77.png');  
    --idval-button-background-color: #f7941d;
    --idval-button-font-color: #FFFFFF;
}

Generally it is still recommended to adjust --idval-header-logo-url with a URL which points to a publicly available logo of your liking, otherwise the cidaas logo will be visible. If you do not want to have a visible header, simply adjust the value of of --idval-header-visibility to hidden

Once you created the theme, you can continue to the next chapter.

Available Variables

The following variables define the look and feel of the application.

Each variable has a cidaas-inspired fallback value, in case the variable is no defined by you.

What if I do not define the variables?

Each variable has a pre-defined cidaas inspired fallback value. However, we heavily recommend you to set each variable to your liking!

Typography

Variable	Description	Example
--idval-font-family	Sets the primary font for all text elements	'Lato', Verdana, serif

There are a few important points to mention regarding the chosen font-family. First, the selected font needs to be available in the browser of the user. Hence, it is always good to include a general font - such as sans-serif, serif or system-ui - at the last position of the list. The second-to-last element can be a "web-safe" font. The first element should be your preferred font.

Background

Variable	Description	Example
--idval-background-image	URL pointing to background image	url('https://example.com/background.jpg')

Avoiding Issues

Please make sure that the URL you set for this field is publicly available, otherwise the image will not properly load. Also make sure that the image has a reasonable file size, in order to avoid heavy file transmissions - especially for users on mobile networks with data limitations.

Header Customization

Variable	Description	Example
--idval-header-visibility	Controls header visibility	visible or hidden
--idval-header-logo-position	Alignment of the logo in the header	'flex-start', 'center', or 'flex-end'
--idval-header-background-color	Background color of the header	#f7941d
--idval-header-logo-url	URL to your company logo	url('https://example.com/logo.png')

Please be aware when --idval-header-visibility is set to hidden all other variables have no effect, since the header will not be visible.

Button Styling

Variable	Description	Example
--idval-button-background-color	Background color for primary buttons	#000000
--idval-button-font-color	Text color for primary buttons	#FFFFFF

You can enforce any color combination, but that does not mean you should! In order to ensure accessibility it is recommended to check the contract of both colors by using a tool such as Contrast Checker.

Best Practices

1. Maintain readability: Ensure sufficient contrast between text and background colors
2. Consistent branding: Use colors and fonts that match your application's design system
3. Responsive design: Test your theme on both desktop and mobile devices
4. Accessibility: Follow WCAG guidelines when selecting colors and contrast ratios
5. Image optimization: Compress background images for faster loading times