CSS

Within the Appearance / CSS page, you can edit the CSS loaded by the Web and Mobile application.

Here is the place where you can configure the visual identity of your company.

How to edit the CSS

Here is described how to edit the CSS of your application.

Enter the CSS editing page.
Within the Environment configuration area, navigate Appearance and then the CSS page.
Edit the CSS
Within this page, you can modify the CSS used by the Web and Mobile application by adding your custom rules. In this way, it is possible to provide users with the best experience according to the visual identity of your company.

The CSS editor helps you in defining a correct set of CSS rules. In case of errors, a warning icon is displayed on the left of the row where the error is present.
Save CSS
When your CSS is ready, you can click on the SAVE button to apply changes.
Test your changes
To see your changes, it is enough to refresh the DPS application within your browser.

Main Colors

In the CSS you can find a set of variables that can be used to change the main colors of the DPS application.

primary-color	The main color used for branding and primary interactive elements (e.g., buttons, links). Default Value: #0A70F8 Usage: background of primary buttons, active elements.
primary-color-hover	A slightly lighter or darker variant of `primary-color`, used when a user hovers over primary interactive elements. Default Value: #548CFF Usage: button hover states, link hover effects.
primary-color-fg	The foreground (text or icon) color used to contrast the `primary-color`. Default Value: #FFFFFF Usage: text color inside a primary-colored button to ensure readability.
secondary-color	A supporting or contrasting color used to complement the `primary-color`. Often used for secondary actions or less prominent UI elements. Default Value: #101E2F Usage: secondary buttons, subtitles, borders.
info-color	A color used to convey informational messages. Default Value: #D8E1ED Usage: notifications, alerts, or badges for information.
accent-color	A highlight color used to draw attention to key elements. It’s usually bright or distinct from the primary/secondary palette. Default Value: #FF9800 Usage: highlights, selected form controls like radio buttons.
accent-color-bg	A background variant of the accent color. It’s often a very light tint of `accent-color`, used to subtly highlight areas. Default Value: #FF980077 Usage: background of badges, tags, cards, or active boxes.

Here is an example of variables declaration and usage in the CSS.

/* variables declaration */
:root {
	--primary-color: #0A70F8;
	--primary-color-hover: #548CFF;
	--primary-color-fg: #FFFFFF;
	--secondary-color: #101e2f;
	--info-color: #d8e1ed;
	--accent-color: #ff9800;
	--accent-color-bg: #ff980077;
}

/* variable usage sample */
#override a {
	color: var(--primary-color-fg);
}

CSS editing best practices

You can test your custom rules by using the browser debug tools (e.g. Chrome DevTools) or your DEVELOP environment, if available.
Do not define rules specific for each element, but try to define rules that match all the elements of the same category (e.g. buttons, fields, labels).
Avoid the usage of XPaths into rules.
Use variables (like above) to define settings commonly used across different rules.
Try to group rules with common behavior and use comments.