CSS

Within the Appearance / CSS page, you can edit the CSS to change how the Web and Mobile applications are visualized.

Custom CSS Warning
If you write highly customized CSS to significantly modify the DPS look and feel, you acknowledge that such modifications may not be compatible with future platform updates.
For instance:
Change the rendering and shape of main page elements (menus, toolbars, header, footer, background).
Change the rendering and shape of page controls (buttons, checkboxes, switch, fields).
Change the rendering and shape of secondary page elements (cards, tables, other panels).
Change the placement and margin of page elements.
Servitly cannot guarantee that highly customized styles will continue to work after each update.
After a platform release, it may be necessary to update the CSS to fix rules that are no longer compatible.

How to edit the CSS

Here is 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 is 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 is 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 variable declaration and usage in 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 to 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 in rules.
Use variables (like above) to define settings commonly used across different rules.
Try to group rules with common behavior and use comments.