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
production: falseand restart your countly by executing
This will enable that any changes you make to CSS styles would be visible on the dashboard immediately.
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
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
- HTML templates stored in
- Images are stored in
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
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:
After that, change
countly/frontend/express/config.js production property to true and execute:
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
- For email sender field,
api/parts/mgmt/mail.jsfile should be modified.