Customise Snapper endpoint branding

Servers can specify a logo and/or a CSS style sheet to be used with Snapper. This configuration is done by placing “organisation_logo.png” and “organisation.css” files in the “well-known” directory on the server. There are two ways to do this, details are below.

Note that changing the logo or CSS file may affect the accessibility of Snapper and any other pages that use them.

The “organisation_logo.png” file should be designed for rendering with a height of 100px and maximum width of 100px, but also scaling to both 80px and 40px.

An example of the “organisation.css” file is shown here:organisation.css

/* Background and Text colors */
body, .navbar, .well, .split, .pretty-split-pane-component-inner {
    background-color: #F0F4F5;
    color: #212B32;
}
.navbar-default .navbar-brand,
.navbar-brand {
    color: #212B32;
}
 
/* Link colors */
a:link, a:visited {
    color: #005EB8;
}
 
/* Highlight colors */
#main, #main .gutter {
    background-color: #ED8B00;
}
.navbar-default {
    border-bottom-color: #ED8B00;
}
 
/* Color palette for controls */
.btn-default.active {
    border-color: #337EC6;
}
.btn-primary {
    color: #ffffff;
    background-color: #005EB8;
    border-color: #425563;
}
.btn-primary:focus,
.btn-primary.focus {
    color: #ffffff;
    background-color: #337EC6;
    border-color: #687784;
}
.btn-primary:hover {
    color: #ffffff;
    background-color: #337EC6;
    border-color: #687784;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #337EC6;
    border-color: #687784;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #ffffff;
    background-color: #204d74;
    border-color: #122b40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    background-color: #005EB8;
    border-color: #425563;
}
 
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #005EB8;
}
   
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  color: #ffffff;
  background-color: #005EB8;
  border-color: #005EB8;
}

Volume mount

The default location that Ontoserver will use for serving custom logo and CSS files is “/well-known”.

If you would prefer to store files in a different file location in the Ontoserver container, the “ontoserver.well-known.path” configuration parameter can be set to the path on the server where the logo and/or CSS file can be found.

You can mount a directory into this location to provide these files. For example, when using Docker Compose, the following line in the configuration of an Ontoserver container will mount the “my-well-known” directory in to the “/well-known” directory in the Ontoserver container.

volumes:      - my-well-known:/well-known

Docker image extension

An alternative to using a volume mount is to extend the Ontoserver docker image. This can be done by including a COPY command in your Dockerfile extending the Ontoserver base image.

For example:Dockerfile

FROM aehrc/ontoserver:ctsa-6

COPY my-well-known /well-known