Countly Enterprise Edition can be rebranded and whitelabeled, as opposed to the Community Edition due to the latter's custom open source license. In order to let Countly Enterprise Edition dashboard match with your company's brand assets, you have two options:

1. Using the White Label plugin that comes with Enterprise Edition.
2. Creating your own theme

Using the White Label Plugin

Countly Enterprise Edition has a plugin called White Label which helps you change your user interface from within the Countly user interface.

First of all, enable the plugin. In the main Countly Dashboard, go to Management > Plugins and enable the White Label toggle.

Then, go to Management > White Label and make the editions you want from the screen shown below.

Here you can change many visuals like logo, page title, button, menu, and font colors.

Creating Themes

Creating a theme helps customizing the look of the dashboard. Themes allow a higher degree of rebranding than the White Label plugin but requieres a higher level of technical literacy.

To create a theme you need to create a new folder which name will represent your theme name in countly/frontend/express/public/themes. For example to create a theme named red, create a folder named "red" as countly/frontend/express/public/themes/red. Now you can put all your theme related images, CSS, and JS-related files in that folder. For JS and CSS files to be automatically loaded upon selection of your theme, you need to place them in the root of your theme folder. If you use other files in subfolders, you will need to explicitly load them.

After you added your files for the first time, restart Countly by running countly restart.

Enabling your Theme

Once you added all your files and restarted countly process, it is time to enable your theme. Just go to Management > Settings > Frontend > Theme and select your theme "red" from the dropdown. Then click on Apply changes and refresh the window for changes to take effect. If you are making changes to your theme or overwriting existing files, you might need to clear your browser cache to get the latest changes.

Modifying CSS

So for example, let's create theme.css file in the countly/frontend/express/public/themes/red/ folder. Here we simply need to overwrite all CSS properties from the original dashboard to what we want them to be. This of course requires understanding of frontend development and CSS. As an example, let's overwrite all green colors as red.

#content-footer ul li a:hover { color:#A2302C; transition:color 1s; }
#sidebar-app-select:hover i { color:#A2302C; }
#sidebar-bottom-container .reveal-menu:hover { color:#A2302C; transition:color 1s; }
#sidebar-bottom-container .reveal-language-menu:hover { color:#A2302C; transition:color 1s; }
#sidebar-menu .sidebar-menu>.item.active { background-color: #A2302C; border-color: #9C3232; }
#sidebar-menu .sidebar-menu .sidebar-submenu .item.active .logo-icon { color:#A2302C; }
#sidebar-menu .sidebar-menu .sidebar-submenu .item.active .text { color:#A2302C; }
#app_details {margin-left: 10px; text-decoration:underline; font-size: 11px; color: #A2302C; cursor: pointer;}
#code-countly .sdks a{color: #A2302C; float: left; text-decoration: none; font-size: 14px; margin-right: 20px;}
.d-table.horizontal td:first-child { color:#A2302C; width:155px; }
.dataTable thead th.sorting_asc:after { color:#A2302C; display: inline-block; font-family: 'FontAwesome'; content: "\f0de"; margin-left: 7px; vertical-align: text-top; margin-top: 7px; line-height: 5px; }
.dataTable thead th.sorting_desc:after { color:#A2302C; display: inline-block; font-family: 'FontAwesome'; content: "\f0dd"; margin-left: 7px; vertical-align: text-top; margin-top: 2px; line-height: 6px; }
.table-loader:before{ display: block; position: absolute; content: ""; left:-200px; width: 200px; height: 1px; background-color: #A2302C; animation: table-loading 2s linear infinite; animation-delay:1s; }
.ui-widget-content .ui-state-active { background-color:#A2302C; color:#FFF; text-shadow:none; background-image:none; margin: 1px; padding: 4px; border-radius: 2px; }
.cly-select .select-items .group { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #A2302C; font-weight: bold; border-bottom: 1px solid #e6e6e6; font: 11px Ubuntu,Helvetica,sans-serif; line-height: 100%; padding: 13px 9px 7px 9px; text-align: left; cursor: default; text-transform: uppercase; background-color: #fff;}
.cly-select:hover .right.combo:before { color:#A2302C; }
.cly-select.active .right.combo:before { content: "\f126"; color:#A2302C; }
.cly-select:hover .right.combo:before { color:#A2302C; }
.cly-select.float:hover .text { color:#A2302C; }
.cly-select.float:hover .right.combo:before { color:#A2302C; }
.cly-multi-select:hover .right.combo:before { color:#A2302C; }
.cly-multi-select.active .right.combo:before { content: "\f126"; color:#A2302C; }
.cly-multi-select .selection .remove:hover { color:#A2302C; }
.cly-multi-select .select-items .item.selected { color: #A2302C; display: none; }
.table-link { color:#A2302C; text-decoration: underline; cursor: pointer; text-transform: lowercase; }
.table-link.green { color:#A2302C; }

Injecting JavaScript

In similar way that we injected CSS, we can also create a JavaScript file that will inject JavaScript and let you overwrite default behavior and settings. As an example, let's create a theme.js file in the countly/frontend/express/public/themes/red/theme.js folder which overwrites the default graph colors.

if(typeof countlyCommon !== "undefined")
    countlyCommon.GRAPH_COLORS = ["#c162ed", "#ed62c7", "#9A1B2F", "#88BBC8", "#ED8662", "#A0ED62", "#ed6262", "#edb762", "#ede262", "#62edb0", "#62beed", "#6279ed"];

This JavaScript will be inserted on every page, so you need to make sure you are editing the data only where it makes sense to do so

Overwriting Logos

To overwrite logos, you can simply add logo files and use CSS to overwrite existing rules where logos are placed. So if you added logo_dashboard.png and logo_prelogin.png in the countly/frontend/express/public/themes/red/images folder, then you will use them in your theme as below:

/* Dashboard Logo */
#sidebar-logo {
    background-image: url("./images/logo_dashboard.png");
    background-repeat: no-repeat;
    width: 144px;
    height: 44px;
    margin-top: 5px;
    margin-bottom: 5px;
}
 
/* Prelogin Logo */
#login-logo, #forgot-logo {
    background-image: url("./images/logo_prelogin.png");
    background-size: 189px auto;
    background-repeat: no-repeat;
    width: 189px;
    height: 57px;
    background-color: #FFF;
    border-radius: 5px;
}

Overwriting Existing Images

To overwrite existing images, including a favicon, it is enough to place them in the same directory structure that the originals are in, but relative to your theme's root directory. So let's take a favicon as example. By default, it is located in countly/frontend/express/public/images/favicon.png. But in HTML templates it is loaded as:

<link rel="icon" type="image/png" href="images/favicon.png">

And that is the path we are interested in. So, if you place your new favicon.png in countly/frontend/express/public/themes/red/images/favicon.png, it will be automatically taken and used instead of the original image. This way you can override any image used in Countly.