White labeling

ThingsBoard PE Feature

Only Professional Edition supports White labeling feature.
Use ThingsBoard Cloud or install your own platform instance.

• White labeling settings
  • Customize ThingsBoard web interface
    • Advanced CSS
  • Customize the login page
• Next steps

ThingsBoard web interface allows you to configure your company or product logo and color scheme in a few clicks with zero coding efforts and no service restart required.

Sysadmin, Tenant and Customer Administrators can configure color scheme, icon, favicon and custom translation of system components and end-user dashboard elements. But only System and Tenant Administrators are able to set up customer email templates to interact with the users.

By default, the Tenant inherits the Sysadmin UI configuration, and the Customer inherits the Tenant UI configuration. But Tenant and Customer Administrators are able to set up their own White Labeling configuration.

White labeling settings

To configure your company or product logo and color scheme, go to the “White labeling” page.

Customize ThingsBoard web interface

In the “General” tab you can set or change the following options:

• Application title - you can specify custom the page’s title, which is displayed in the browser tab;

• Favicon (website icon) - you can change the default website icon to your own;

• Logo - you can change the standard logo in the upper left corner to your company logo;

• Logo height - you can resize the logo;
• Primary palette - you can customize the background color and font color by choosing one of the suggested UI design options or customizing an existing one;

• Accent palette - you can customize the color for some elements, for example for a toggle;

• Advanced CSS - you can stylize any elements of the ThingsBoard user interface as you wish. We will talk more about this functionality below;
• Show/hide platform name and version - by checking this option, the name of the platform and its current version will be displayed in the lower left corner.

The final look of the customized user interface:

Advanced CSS

Using CSS, you can stylize any elements of the ThingsBoard user interface as you wish. Such elements can be background, icons, fonts, etc.

To use CSS in your UI design, do the following:

• Click on the "Advanced CSS" button;
• Paste the CSS code with the style for the user interface into the "Advanced CSS" pop-up window and click "Save". Then save all changes;
• As you can see icons color changed to purple.

CSS code example for customize icons color and scroll color:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*icon color*/

.mat-icon.notranslate.material-icons.mat-ligature-font.mat-icon-no-color.ng-star-inserted{
    fill: #a60062;
    color: #a60062;
}
.mat-icon.notranslate.mat-icon-no-color.ng-star-inserted{
    fill: #a60062;
}

/*scroll color*/

mat-toolbar::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
ng-component::-webkit-scrollbar-thumb {
    background-color: #c526a5 !important;
    background-image: linear-gradient(#e72c83, #a742c6);
    border-radius: 200px/300px !important;
    border: 0.1rem linear-gradient(#e72c83, #a742c6);
}

.mat-mdc-button.mat-mdc-button-base.tb-active{
    color: #ffffff;
}

Let’s also add a gradient to the left menu:

• Paste the CSS-code into the "Advanced CSS" window. Do not delete the previously added CSS code to keep the previous color scheme. Save all changes;
• Added a gradient to the left menu color scheme.

An example of CSS code to customize the appearance of the sidebar menu:

1
2
3
4
5
/*menu gradient*/

.tb-side-menu {
    background: linear-gradient(44deg, #9d9d9d, #ffffff, #9f9f9f);
}

Using the functionality described in this documentation, you can customize the appearance of the ThingsBoard UI according to your preferences.

Customize the login page

On the “Login” tab, you can configure the login page for your clients.

• Enter the registered domain name, or refer to this documentation to learn how to register a new domain;
• It is recommended to prevent usage of hostnames from headers of the request;
• Enter a custom application title;
• Replace the default website icon and logo with your own;
• Define the primary and accent color palettes;
• Set the page background color.

Once done, save the changes.

Now, use your custom domain name to access the ThingsBoard web interface login page and verify the result of your configuration.

Next steps

• Getting started guides - These guides provide quick overview of main ThingsBoard features. Designed to be completed in 15-30 minutes.

• Installation guides - Learn how to set up ThingsBoard on various available operating systems.

• Connect your device - Learn how to connect devices based on your connectivity technology or solution.

• Data visualization - These guides contain instructions on how to configure complex ThingsBoard dashboards.

• Data processing & actions - Learn how to use ThingsBoard Rule Engine.

• IoT Data analytics - Learn how to use rule engine to perform basic analytics tasks.

• Hardware samples - Learn how to connect various hardware platforms to ThingsBoard.