Creating Themes
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.