UI Appearance Customization

There is a limited possibility to customize the appearance of the archive's user interface. One can change

• Background Image
• Logo Image OR
• one can define a custom CSS file (the last one is in an experimental phase).

Changing the Background Image and Logo

The UI would expect the new Background-Image or/and Logo-Image to be in <ui-host>/resources/img/ with the names:

• bg.jpg for the new background (<ui-host>/resources/img/bg.jpg)
• logo.png for the new logo (<ui-host>/resources/img/logo.png).

If there aren't any images in this location, UI will consider the default background and logo images for background of archive UI and logo displayed at bottom right respectively. If you are using the dockerized version of the Archive and UI, you have the possibility to paste those images in a sub-folder ( ui/configuration/resources/img ) of the mounted folder of the archive UI (default defined as var/local/dcm4chee-arc) respectively in /var/local/dcm4chee-arc/ui/configuration/resources/img.

Resolutions

• The expected resolution for the Logo-Image is 148x42px (You could overwrite this using a custom CSS, see Adding a custom CSS file below).
• The recommended resolution for the Background-Image is 1200 x 800px (The size should be kept as small as possible). There is a blur filter (5px) applied to the background image, hence a bigger resolution is not required.

Adding a custom CSS file

As we have described for the background and logo images, you could also define your own CSS file in a similar way. The custom CSS file with the name style.css is expected to be in css folder instead of the img folder as follows: /var/local/dcm4chee-arc/ui/configuration/resources/css/style.css respectively in <ui-host>/resources/css/style.css.

The custom defined CSS will be loaded as the last style, as it will have a higher priority with regard to the Specificity algorithm, thus implying the user defined custom CSS styles defined above will be able to overwrite most of the CSS styles of the archive UI.