Countly Enterprise allows companies to customize their platform extensively to match their branding by offering white labeling and theme creation options. Unlike Countly Lite, which has a specific open-source license limiting rebranding, Countly Enterprise includes tools that enable businesses to modify the interface to align with their brand identity. Here’s a guide on how to utilize these rebranding capabilities.
Benefits of Rebranding Countly Enterprise
Rebranding with Countly Enterprise provides multiple benefits that enhance the brand experience and ease of use for companies:
- Brand Consistency -Customizing Countly allows businesses to integrate their logos, colors, and other brand-specific elements, ensuring a cohesive look across their platforms.
- Time-Saving - By rebranding an existing platform, businesses save the time and resources required to develop a similar application from scratch.
- Customization Flexibility -White labeling and theming allow businesses to add or remove features, integrate external systems, and design unique user interfaces to provide a distinct customer experience.
White Labeling
White labeling in Countly Enterprise is a built-in feature that makes it easy to customize the user interface without requiring extensive coding skills. To enable and use the White Labeling feature, first navigate to the Sidebar and go to Management > Feature Management. From there, activate the White Labeling toggle. Once this is enabled, proceed to Management > Settings, where you can begin customizing the interface.
You can change various visual elements, such as logos, page titles, buttons, menus, and font colors, to align the interface with your brand.
Advanced Rebranding with Theme Creation
Creating a theme helps customize the look of the Countly interface. Themes allow a higher degree of rebranding than the White Labeling feature but require higher technical literacy.
To create a theme, you must create a new folder whose 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 JavaScript-related files in that folder. For JavaScript and CSS files to be automatically loaded upon selecting your theme, you need to place them in the root of your theme folder. If you use other files in subfolders, you need to load them explicitly.
After you have added your files for the first time, restart Countly by running countly restart.
Enabling your Theme
Once you have added all your files and restarted the countly process, it is time to enable your theme. Just go to Management > Settings > Frontend > Theme and select your theme "red" (as used in the example above) from the dropdown. Then click on Apply changes and refresh the window for changes to take effect. If you are changing your theme or overwriting existing files, you should clear your browser cache to get the latest changes.
Modifying CSS
For example, let's create the theme.css file in the countly/frontend/express/public/themes/red/ folder. Here we simply need to overwrite all CSS properties from the original interface to what we want them to be. This, of course, requires an understanding of front-end development and CSS. As an example, let's overwrite all green colors with 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 the same way, we injected CSS, we can also create a JavaScript file that will inject JavaScript and let you overwrite default behavior and settings. For 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_interface.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:
/* interface Logo */
#sidebar-logo {
background-image: url("./images/logo_interface.png");
background-repeat: no-repeat;
width: 144px;
height: 44px;
margin-top: 5px;
margin-bottom: 5px;
}
/* Pre login 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 an 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.
Countly’s White Labeling and theme creation allow companies to rebrand their Countly Enterprise experience by matching the interface with their own brand elements. This feature helps create a cohesive and seamless experience for end users that reflects the company’s identity.