Versions Compared

Version Old Version 1 New Version Current
Changes made by

Bertrand Anckaert

Bertrand Anckaert

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Code Block
languagecss
/* 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  if there is different extension the update background-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);
}

...

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.

...