Countly Enterprise Edition can be rebrandable and whitelabeled unlike Community Edition due to its custom open source license. In order to let Countly Enterprise Edition dashboard match with your company colors and brand for Enterprise Edition, you have two options.
1) Using white label plugin that comes with Enterprise Edition 2) Modifying CSS and HTML files manually.
Let's go over each step.
Option 1: Using white label plugin
Countly Enterprise Edition has a plugin called "white label" which helps you change user interface via a convenient user interface.

Here you can change many visuals like logo, page title, button, menu and font colors.
Option 2: Modifying CSS and HTML files
If you are going to change CSS styles, the first thing to do is to disable production mode. In 15.08 version you can do that by going to Management -> Configurations
and Production mode: Disable
.
In older versions, you must change countly/frontend/express/config.js
to production: false
and restart your countly by executing restart countly-supervisor
This will enable that any changes you make to CSS styles would be visible on the dashboard immediately.
Modifying dashboard
All needed to do is to edit countly/frontend/express/public/stylesheets/main.css
. There are commented sections, like /* FOOTER */
, /* SIDEBAR */
, /* DASHBOARD */
, so it should be relatively easy to find what out want to modify.
If you want to modify HTML pages, then you should look at countly/frontend/express/views/dashboard.html
- there are all templates for each Countly view.
All images are stored in countly/frontend/express/public/images
Modifying pre-login pages
If you want to modify pages that are showed before logging in to dashboard, like login page or forgot password page, refer to the following templates and CSS files:
- CSS are stored in
countly/frontend/express/public/stylesheets/pre-login/main.css
- HTML templates stored in
countly/frontend/express/views
- Images are stored in
countly/frontend/express/public/images/pre-login
Modifying plugins
Some functionalities are separately available inside plugins, so if you want to modify them, you must look for specific plugin directory. Usually it is countly/plugins/PLUGIN_NAME/frontend/public/stylesheets/main.css
for CSS and countly/plugins/PLUGIN_NAME/frontend/public/templates/
for templates. Images are also in respective countly/plugins/PLUGIN_NAME/frontend/public/images
directory.
Preparing production files
After you make you modifications and like everything you have done, it's time to prepare minified production files and switch back to production mode for optimized page loading.
In order to switch to prepare production files in version 15.08 and greater, you can execute:
# countly upgrade
And then go to Management > Configurations
and set Production mode
to Enable
. That's everything required for v15.08 and later.
If you have version 15.03, you can change into your countly directory and execute:
grunt dist-all
After that, change countly/frontend/express/config.js
production property to true and execute:
restart countly-supervisor
Other files
These are the files that you may need to modify in order to provide a more branded version:
- Title, page and footer text is located in
/frontend/express/version.info.js
- For email sender field,
api/parts/mgmt/mail.js
file should be modified.