In the Dashboard, go to Settings > Configuration > Web App V1: CSS to add/change your customization settings.
Under Settings you can change the following elements in Token.io's HP:
Configures the TPP logo for the HP.
Click the Choose file button, and select a file from the File explorer.
The selected image:
can have a can have a maximum size of 250 px (width) by 23 px (height); 220 x 20 px is commonly used.
will appear in the HP as the TPP’s logo unless Product Name has been set under the Web App - General tab.
can be tagged as {TPP_LOGO} throughout other HP configuration fields in the Dashboard.
Configures the global font family for the HP.
Select the font family among the listed values in the Font Family dropdown.
Configures the text and button styles for the HP.
The following styles can be configured.
| Style | Configuration |
|---|---|
| Title | A color configuration for titles displayed in the global font family. |
| Text | A color configuration for special text and links displayed in the global font family. |
| Normal 1 | A color configuration for default text on the HP consent page. |
| Spinner | A color configuration used for the spinners in the HP. |
| Link | A text color configuration used for links in the HP. |
| Primary actions | A color configuration used for primary actions such as hover on a list item and the color of an Accept button. |
| Background color | A color configuration used as a background color for lists in the HP. |
| Primary text color | A text color configuration used for the primary text for all primary actions in the HP. |
| Secondary Actions | A color configuration used for secondary actions. |
| Secondary text color | A text color configuration which is used for secondary text, for example, the label of a secondary button. |
| Borders | A color configuration for borders in the HP. |
| Heading 2 & 3 | A text color configuration used for sub title text in the HP. |
| Normal 2 | A text color configuration which is used for consent texts. |
| Button Primary Focus | A color configuration which only appears in the background of a primary button when the user tries to focus on it in the HP. |
| Button Primary Press | A color configuration which will only appear in the background of a primary button when the user tries to click it in the HP. |
| Button Primary Hover | A color configuration which will only appear in the background of a primary button when the user tries to hover over it in the HP. |
| Button Secondary Focus | A color configuration which only appears in the background of a secondary button when the user tries to focus on it in the HP. |
| Button Secondary Press | A color configuration which will only appear in the background of a secondary button when the user tries to click it in the HP. |
| Button Secondary Hover | A color configuration which will only appear in the background of a secondary button when the user tries to hover over it in the HP. |
| Delete Actions | A color configuration for delete actions in the HP. |
| Button Delete Hover | A color configuration which will only appear in the background of an error button when the user tries to hover over it in the HP. |
| Button Delete Press | A color configuration which only appears in the background of an error button when the user tries to click it in the HP. |
| Button Delete Focus | A color configuration which only appears in the background of an error button when the user tries to focus on it in the HP. |
| Button Focus Color Outline | A color configuration used to configure the focus outline color for actionable items in the HP. |
Configures the weight of the fonts for text in the HP.
The following font weights can be configured.
| Font weight | Configuration |
|---|---|
| Bold | A font weight configuration generally used for Product Name and Title texts. |
| Semi Bold | A font weight configuration generally used for sub-title texts. |
| Dark | A font weight configuration used for consent details in the HP. |
| Medium | A font weight configuration used for consent data titles in the HP. |
| Regular | A font weight configuration used on list items, recent banks text, etc . |
| Light | A font weight configuration used in consent texts in the HP. |
Configures the size of the fonts for text in the HP.
| Font weight | Configuration |
|---|---|
| Heading 1 | This size is used in Product Name texts as well as in the titles of HP. |
| Heading 2 | This size is used in text inputs like IBAN and for selected items from lists. |
| Heading 3 | This font size is used in sub titles and for consent details. |
| Normal 1 | This font size is mainly used in consent-data-titles. |
| Normal 2 | This font size is used in consent texts and on back button texts in the HP. |
If you have any feedback about the developer documentation, please contact devdocs@token.io