Brand Configuration

The DPS application is often the first point of interaction with your customers, and aligning its appearance with your brand style ensures a cohesive and professional experience, as well as improving trust and recognition of your brand.
This article reports all the points where in the Servitly Console you can customize the visual elements of the DPS, from colors and typography to logos and layout styles, so that every detail reflects your unique brand identity.

Images

The DPS comes with a set of predefined images that you can override as you need:

• Logos and Backgrounds: by entering the Images page you can configure the logos, background images (in various formats) that are used into the DPS pages (e.g. login page).

• Menu Icons: when configuring the Views for your user personas, for each page placed in the navigation menu you can configure the icon.

• Secondary Icons: by entering the Images page you can configure the icons used by minor DPS elements (e.g. thing activation, user menu).

Colors

Simply changing the images is often not enough, another distinctive trait of a brand is its color palette.
In the Appearance / CSS page you can find a set of variables that can be used to change the main colors of the DPS application.

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);
}

Web CSS

By defining CSS rules, you can configure other distinctive traits of your brand identity, such as fonts, button styles, frame styles and whether edges must be rounded or sharpened.

In the Appearance / CSS page, other than defining colors, you can also inject your set of specific CSS rules.

Here are some tips you can follow to write your CSS:

• 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 to define XPath-based rules.
  Servitly may introduce new elements to the HTML that makes up the page, which could cause such rules to stop working.

• Use variables (like for colors) to define settings commonly used across different rules.

• Try to group rules with common behavior and use comments.

Note that, the Web CSS is always loaded after the default Servitly CSS.

Mobile CSS

Users can also access the DPS from mobile devices with limited resolution and size.
In the Appearance / CSS page you can edit the CSS that is automatically loaded when navigating the DPS from a mobile device.
For instance, you can change the size of specific elements (e.g. buttons).
Note that, the Mobile CSS is always loaded after the Web CSS.

Components CSS

In addition to being able to configure the general appearance of your DPS, you can also change how individual page components are displayed.
For instance, in case you need to redefine the layout of a widget, you can:

• in the template reference a CSS class, and define it in the Appearance / CSS page.
  

  <div class="d-flex flex-wrap components-row">
  	<thing-details-widget [title]="'Machine Info'" class="flex-fill labels-gray">
  		<property name="name"></property>
  		<property name="serialNumber"></property>	
  	</thing-details-widget>
  </div>

  .labels-gray table tr td:nth-child(1) { background-color:#F2F2F2 }

  
  

• in the Appearance / CSS page define the CSS rules matching the tag of the widget, in this way all the instance of that widget type will be affected.
  

  /* changes the labels background in the thing-details-widget */
  thing-details-widget table tr td:nth-child(1) { background-color:#F2F2F2 }

For more details about defining CSS for components refer to the Styling with CSS article.

Labels

Servitly already provides all the labels you need to navigate the DPS (e.g. buttons, hints and descriptions, messages), but for some of these you will need to make changes to use the terminology used by your specific brand and domain.
For example, the label Product created is used when a new thing is created in the DPS, but if you are a refrigerator manufacturer, you would put Refrigerator created.

There are labels used to display information related to your company and offered service:

• Service Name: name of the service displayed in the DPS pages (e.g. ACME Connect).
  It is also possible to define a short version to be used in the title of the browser tabs.
  

• Company Name: the name of the company (e.g. ACME) used, for instance, into notification emails.

All the labels can be translated into various Languages.

Messages

Another touchpoint for your users, are the messages sent via email by the DPS upon specific events (e.g. user registration, event triggering).

Servitly comes with a set of predefined mail templates, but you are free to edit them in the Appearance / Messages page.