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

Components Colors

All the page components leverage the same set of color palette that you can modify as you need.
By default, there are two color palettes (values and chart) used by built-in components.

For more details about how to deal with colors into custom components you can refer to the ColorManager article.

Values Color Palette

The color palette used by widgets and filters to display certain values (e.g. a string representing a machine state) with a specific color.  
These are the colors already registered by default:

You can register or override your own colors by using the colorManager.registerColor(key, color) function into the Custom Filters component.
The key (case-insensitive) is used to allocate the color in the values color palette.

colorManager.registerColor("MANUAL", "#638550");
colorManager.registerColor("AUTOMATIC", "#4C799C");
colorManager.registerColor("DISABLED", "#F89A33");

This color palette is used by filters and widgets to display values and elements with a specific color:

• Status Badge filter that displays a badge colored according to the value.

• Status Diagram widget that displays horizontal bars colored according to the underlying machine status over time.

• Bar Chart widget that displays bars colored according to the underlying bar categories that are used as color palette keys.

Chart Color Palette

The color palette used by chart-based widgets to display lines, bars and other elements.

These are the colors used to draw main elements into charts (axis, grid, labels):

You can override these colors by adding to the Custom Filters component the following code.

colorManager.registerColor("CHART_DEFAULT", "#4C799C")

These are the colors that are sequentially picked up by the widgets:

The order of colors is defined to ensure the right contrast when displaying multiple lines in the same chart.

This color palette is used by:

• Time Series Chart: each series (lines or columns) is drawn by taking a different color from the palette, starting with the first one in the list.
  If needed, for each series you can specify the color directly in the template.

• Bar Chart: each bar is drawn with a different color when the random color option is configured.

You can override this color palette by adding to the Custom Filters component the following code.

colorManager.registerColorPalette("chart", ["#F44336", "#F3C300", "#008856", "#3F51B5", "#E91E63", "#2196F3", "#F38400", "#9C27B0", "#03A9F4", "#673AB7", "#00BCD4"]);

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.