You can upload your own css file and logo to tailor the look and feel of our web application to your specific needs.

While working on the look and feel, you may want to disable the cache of your browser so that at any point in time, the latest custom.css and logo.png are loaded.

Custom Style Sheet

You can upload your own .css file which basically enables you to completely change the look and feel of our web application. Usually, we limit the changes we do to changing the color scheme, but there is really no limit to the extent of changes you can make.

You can find an example style sheet below. The easiest way to get started is to update the dark color and light color to colors which correspond to your own style.

You can use the following endpoint to upload your style sheet

POST /style/custom.css

Note that this is required to be a .css file, the name itself does not matter, it will be renamed to custom.css in the backend.

/* instructions: */
/* 1. update root colors */
/*    --dark-color -> dark color in the interface;*/
/*    --light-color -> light color in the interface */
/* 2. update ../img/logo.png file */
/*     Post your image to /style/logo.png and refer to it in this file through url("./../img/logo.png"); */

:root {
    --dark-color: #004EA0;
    --light-color: #ffffff;
}

.navbar-default {
    background-color: var(--dark-color);
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    background-color: var(--dark-color);
}

.nav > li > a {
    color: var(--light-color);
}

.nav > li > a:hover {
    color: var(--light-color);
}

ul.nav-second-level {
    background: var(--dark-color);
}

.nav > li.active > a {
    color: var(--dark-color);
}

.nav > li.active {
    border-left: 4px solid var(--dark-color);
    background: var(--light-color);
}

.navbar-default .nav > li > a:hover {
    background: inherit;
    color: var(--light-color);
}

.navbar-default .nav > li.active > a:hover {
    background: inherit;
    color: var(--dark-color);
}

.navbar-default {
    background-color: var(--dark-color);
}

.nav-header {
    background-color: var(--light-color);
    height: 160px;
    background-image: url("./../style/logo.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.nav-header > div > a > h1 {
    color: transparent;
}

#side-menu > .nav > li.active {
    background: var(--light-color);
}

#side-menu > ul.nav-second-level {
    background: var(--light-color);
}

Logo

You can use the following endpoint to upload your logo

POST /style/logo.png

Note that this is required to be a .png image, the name itself does not matter, it will be renamed to logo.png in the backend.

This logo will only go into effect when referred to by the css. So your custom .css will need to contain at least the following

.nav-header {
    background-image: url("./../style/logo.png");
}

Note that we do not resize the image, so you may want to resize the image before you upload.

If the aspect ratio of your image is different, you may also want to update the height in the css

.nav-header {
    height: 160px
    background-image: url("./../style/logo.png");
}

CF - Intelligent Automation

Custom look and feel

Custom Style Sheet

Logo