User-interface styling
This document describes how to customize end-user user-interfaces using CSS stylesheets. Instructions provided apply to version 6 of Trivore ID. Customizing management user-interface (/ui/*) is not supported.
Trivore ID user-interface uses Vaadin library version 25. Vaadin provides styling guide which is available at https://vaadin.com/docs/latest/styling.
Here are some direct links to most common components that Trivore ID uses.
Managing stylesheets
Stylesheets can be managed by navigating to System preferences -> Branding -> Web styling. You can also select default stylesheet which is applied to every end-user user-interface when no other selection is made. OpenID clients may choose to use different stylesheets.
Click "Manage styles" button to open dialog where styles are managed. Click "Add" button to add new stylesheet.
Recommendation is to click "Replace editor content with default stylesheet" button and then customize that default stylesheet.
List of user-interfaces
Default stylesheet is applied to following end-user user-interfaces.
| User-interface | Description |
|---|---|
/accept | Accept user invite view. |
/rp/suomi.fi-valtuudet/authorise | Suomi.fi authorisation to act on behalf of user (henkilön puolesta-asiointi) |
/rp/suomi.fi-valtuudet/authorise/company | Suomi.fi authorisation to act on behalf of company (yrityksen puolesta-asiointi). |
/verifyemail | Verify email address. |
/verifysms | Verify mobile number. |
/bootstrap | Service bootstrap (not relevant here). |
/changePassword | Change password. |
/ldapAuth | LDAP user directory authentication. |
/openid/auth-app | OpenID sign-in using an external authentication app. Different clients may choose to use different stylesheets, not just the default one. |
/openid/logout-ui | OpenID sign-out. |
/openid/auth-ui | OpenID sign-in and registration. Different clients may choose to use different stylesheets, not just the default one. |
/personaldata | View personal data requests. |
/resetPassword | Reset password. |
/smartCardAuth | Smartcard authentication. |
List of CSS class names
This section describes CSS class names that can be used to customize parts of the user-interface.
Common CSS classes
Following table describes common CSS class names that are used in most user-interfaces.
| CSS class | Description |
|---|---|
.ui-root | Outer-most <div> element. All other elements are inside this. |
.heading-label | General heading element. Applied to <h1> and <h2> elements. |
.info-label | General info element. Applied to <span> elements. |
.service-logo | Service (system-wide) logo <img> element. |
.main-content | Main content which is usually <vaadin-vertical-layout> element. Logo images, main panel and language selection are usually inside this. Centered by default and max-width of 700px. |
.main-panel | Main panel <div> which contains input elements and buttons and has borders by default. |
.layout-common | Common layout usually placed inside .ui-root element. |
.language-select | Language select <vaadin-select> element available in most views. Label is hidden by default. |
.language-container | Layout <vaadin-horizontal-layout> which contains the language selectors .language-select and .language-buttons. |
.language-buttons | Language buttons <vaadin-custom-field> element inside .language-container. Shows one button per supported language. |
.language-buttons-content | Layout <vaadin-horizontal-layout> inside .language-buttons which contains the language buttons. |
.language-button | Language button <vaadin-button> element inside .language-buttons-content. Button text is the 2-letter language code. |
.language-<code> | Applied to .language-button to identify the language, where <code> is the 2-letter language code, for example .language-fi. |
.selected | Applied to .language-button of the currently selected language. Uses primary color as background by default. |
.button-main | Main button <vaadin-button> elements such as "Cancel" or "Confirm". Full width by default. |
.button-aux | Auxiliary button <vaadin-button> element which does NOT define full width by default. |
.button-link | Button <vaadin-button> element that looks like link, does not have background or border by default. |
.link-common | Common link <a> element. |
.error-label | Common error label <div> element. |
.success-label | Common success label <div> element. |
.field-label | Used on non-editable fields that only show text, not any input field. |
.field-main | Used on all editable input elements such as <vaadin-text-field> or <vaadin-checkbox>. |
.user-wrapper | Wrapper element to choose user. Used on <vaadin-vertical-layout>elements. |
.user-selector | User selector inside .user-wrapper. Applied to <vaadin-horizontal-layout>. |
OpenID login CSS classes
Following table describes CSS class names that are used in OpenID login view (/openid/auth-ui).
| CSS class | Description |
|---|---|
.login | Outer-most <div> element. |
.login-base | Login base layout inside .login element, applied to <vaadin-vertical-layout>. |
.login-logos | Logo layout <div> which shows different logo images. |
.login-verify-comm | Layout which shows elements to verify communication method such as email or mobile number. Applied to <vaadin-vertical-layout>. |
.login-verify-comm-link | Layout which shows elements to send communication method (email, mobile) verification link. Applied to <vaadin-vertical-layout>. |
.login-confirm | Applied to <vaadin-vertical-layout> view that confirms OpenID client access. |
.login-error | OpenID login error layout. Applied to <vaadin-vertical-layout>. |
.login-enter-credentials | OpenID login enter credentials layout. Applied to <vaadin-vertical-layout>. |
.login-user-select | OpenID layout to select user to login as. Applied to <vaadin-vertical-layout>. |
.login-return-button | Return button shown in email/mobile verification layout. |
.login-user-photo | User photo <img> shown when confirming OpenID client access. |
.login-user-info | Layout <vaadin-horizontal-layout> which shows user information and user photo when confirming OpenID client access. |
.login-divider | Divider <hr> element used in OpenID login views. |
.login-app-name | Application (OpenID client) name <h2> element. |
.login-app-dev | Application (OpenID client) developer information. Applied to <span> element which shows client owner's namespace name. |
.login-app-url | Link <a> which shows application (OpenID client) homepage URL. |
.login-app-policy-url | Link <a> which shows application (OpenID client) policy URL. |
.login-app-tos-link | Link <a> which shows application (OpenID client) terms of service URL. |
.login-scope-details | Field <vaadin-custom-field> which shows information about OpenID scope (information and permissions the client is requesting). |
.login-header | Login header which shows information where user is logging in. Uses <vaadin-custom-field>. |
.login-ext-login-layout | External login layout <vaadin-vertical-layout> in OpenID login view. |
.login-ext-login-content | Layout <vaadin-vertical-layout> inside .login-ext-login-layout which holds external login buttons or other components to initiate external login via user directory. |
.login-ext-login-button | Button <vaadin-button> to initiate external login. |
.login-ext-login-link | Link <a> to initiate external login. |
.login-ext-login-icon | External login icon used with buttons, links or combo box. |
.login-ext-login-select | External login <vaadin-select> component. |
.login-ext-login-combobox | External login <vaadin-combo-box> component. |
App authentication CSS classes
Following table describes CSS class names that are used in app authentication view (/openid/auth-app), where user signs in using an external authentication app either by scanning QR code or by opening the app on the same mobile device.
The stylesheet applied to this view is selected in OpenID client's app authentication settings. If no stylesheet is selected, the default stylesheet is used. The outer-most element also gets class name .brand-<style code>, where <style code> is the code of the applied stylesheet.
| CSS class | Description |
|---|---|
.app-auth | Outer-most <vaadin-vertical-layout> element. Also has .ui-root class. |
.brand-<style code> | Applied to outer-most element. Identifies the applied stylesheet, for example .brand-default. |
.logo | Logo <img> element. |
.title | Title <h1> element. |
.content | Content <div> element. Contains one of the layouts below depending on authentication state: .begin-auth-layout, .waiting-for-auth, .post-auth-layout or .error-message. While the session code is generated, it contains .code-progress-bar and .code-progress-text. |
.code-progress-bar | Indeterminate progress bar <vaadin-progress-bar> shown while the session code is generated. |
.code-progress-text | Information <span> element shown below .code-progress-bar while the session code is generated. |
.begin-auth-layout | Layout <vaadin-vertical-layout> shown before authentication has started. Contains .mode-switch-layout and .instructions-layout. |
.mode-switch-layout | Layout <div> which contains buttons to switch between QR code and mobile app modes. |
.qr-mode-button | Button <vaadin-button> to switch to QR code mode. |
.mobile-mode-button | Button <vaadin-button> to switch to mobile app mode. |
.instructions-layout | Layout <div> which contains .qr-layout and .mobile-layout. Only one of them is visible at a time. |
.qr-layout | Layout <vaadin-vertical-layout> shown in QR code mode. Contains .qrcode-instructions, .qrcode and .sessioncode. |
.qrcode-instructions | Instructions <span> element for scanning the QR code. |
.qrcode | QR code <img> element. |
.sessioncode | Session code <span> element shown below the QR code. |
.mobile-layout | Layout <vaadin-vertical-layout> shown in mobile app mode. Contains .mobile-instructions and .applink-button. |
.mobile-instructions | Instructions <span> element for opening the authentication app on mobile device. |
.applink-button | Link <a> which opens the authentication app on mobile device. |
.waiting-for-auth | Information <span> element shown while waiting for user to complete authentication in the app. |
.post-auth-layout | Layout <vaadin-vertical-layout> shown after authentication has been completed. Contains .post-auth-info and .continue-link. |
.post-auth-info | Information <span> element shown after authentication has been completed. |
.continue-link | Link <a> to continue back to the application (OpenID client). |
.error-message | Error message element shown when authentication fails or session has expired. |
.refresh-link | Link <a> to restart authentication with a new session code. |
.cancel-button | Button <vaadin-button> to cancel authentication and return to the application (OpenID client). Uses tertiary theme variant. |
.help-link | Help link <a> which opens in a new window. |
.language-selector | Language select <vaadin-select> element. |
OpenID logout CSS classes
Following table describes CSS class names that are used in OpenID logout view (/openid/logout-ui).
| CSS class | Description |
|---|---|
.logout | Outer-most <div> element. |
.logout-content | Layout <vaadin-vertical-layout> inside .logout element. |
.logout-form | Layout <vaadin-vertical-layout> inside .logout-content which contains buttons and information text about logout. |
Reset password CSS classes
Following table describes CSS class names that are used in reset password view (/resetPassword).
| CSS class | Description |
|---|---|
.reset-password | Outer-most <div> element. |
.reset-password-base | Base layout <vaadin-vertical-layout> inside .reset-password. |
.reset-password-start | Start layout <vaadin-vertical-layout> where user enters information. |
.reset-password-invalid-link | Layout <vaadin-vertical-layout> which shows information about invalid reset password link. |
.reset-password-email-sent | Layout <vaadin-vertical-layout> which shows information that reset password email was sent. |
.reset-password-name-check | Layout <vaadin-vertical-layout> which asks user to enter their name for checking purposes. |
.reset-password-new-password | Layout <vaadin-vertical-layout> where user enters new password. |
.reset-password-changed-info | Layout <vaadin-vertical-layout> which shows information that password was changed. |
.reset-password-verify-code | Layout <vaadin-vertical-layout> which asks user to enter code that was sent via email or sms. |
Change password CSS classes
Following table describes CSS class names that are used in change password view (/changePassword).
| CSS class | Description |
|---|---|
.change-password | Outer-most <div> element. |
.change-password-base | Base layout <vaadin-vertical-layout> inside .change-password. |
.change-password-error | Layout <vaadin-vertical-layout> which shows error information. |
.change-password-login | Layout <vaadin-vertical-layout> where user enters login credentials. |
.change-password-new-password | Layout <vaadin-vertical-layout> where user enters new password. |
.change-password-success | Layout <vaadin-vertical-layout> which shows information about successful password change. |
Smartcard authentication CSS classes
Following table describes CSS class names that are used in smartcard authentication view (/smartCardAuth).
| CSS class | Description |
|---|---|
.smartcard | Outer-most <div> element. |
.smartcard-base | Base layout <vaadin-vertical-layout> inside .smartcard. |
.smartcard-error | Layout <vaadin-vertical-layout> which shows error information. |
.smartcard-login | Layout <vaadin-vertical-layout> which asks user to perform smartcard authentication. |
Examples
This section provides some examples how to style different components.
Change border-radius for all buttons:
vaadin-button {
border-radius: 30px;
}
Change font-family for all text field input elements.
vaadin-text-field > input {
font-family: monospace;
}
Change background-color for all primary buttons (blue by default).
.ui-root {
--vaadin-button-primary-background: green;
}
Change text color for all buttons.
vaadin-button::part(label) {
color: black;
}
Change width for logout button.
.logout .button-aux {
width: 100%;
}
Center all logos in login page.
.login-logos {
width: 100%;
justify-content: center;
}
Change QR code size and session code font in app authentication page.
.app-auth .qrcode {
width: 240px;
height: 240px;
}
.app-auth .sessioncode {
font-family: monospace;
font-size: 1.5rem;
}
Migrating from Trivore ID version 5 to 6
Trivore ID version 5 uses Vaadin 8 and version 6 uses Vaadin 25. There are significant changes between these Vaadin versions and there is no automatic migration available for CSS stylesheets.
Html rendering, CSS class names and shadow DOM usage have all changed between Vaadin 8 and 25 and therefore any migration of existing stylesheet requires manual work, sometimes a lot.
For example, Vaadin 8 uses CSS class names such as .v-button and .v-text-field (and other names using .v- prefix). When migrating existing stylesheet, replace these CSS class names with element names such as vaadin-button and vaadin-text-field. This gets you started but note that shadow DOM usage probably breaks your existing stylesheet because with Vaadin 25 you often need to use ::part() selectors.