Stop the war

Support Ukraine
Try it now Pricing
Professional Edition
Community Edition Professional Edition Cloud Edge PE Edge IoT Gateway License Server Trendz Analytics Mobile Application PE Mobile Application MQTT Broker
Getting Started
Devices Library Guides Installation Architecture API FAQ

On this page

White Labeling

ThingsBoard PE Feature

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

Introduction

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.

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;

image

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

image

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

image

  • 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;

image

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

image

  • 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.

image

Final look of our customize 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.
Click on the "Advanced CSS" button;
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;
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.
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.
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;
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.
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.

Video tutorial

Watch the detailed video tutorial with examples of how you can configure the white labeling to suit your needs.



Contact us to suggest missing feature for your use case.

Next steps