Versions Compared

Version Old Version 11 New Version 12
Changes made by

Dominik Rainer

Dominik Rainer

Saved on

Key

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

In Portrait 6.x, the theming capability was extended; you can now set the colors to your needs for Portrait. Inside the application.yml file, you can find the config section theme under application.

Property

Default

Logo URL

Absolute or relative path to your logo, which is used in the menu and on the login page. This can be either a JPG, PNG or SVG (recommended).

logoUrl

/icons/logo-full.svg

Hero URL

Absolute or relative path to your hero image, which is used on the dashboard. This can be either a JPG, PNG or SVG (recommended).

heroUrl

/icons/logo-hero.svg

Raster Logo URL

Absolute or relative path to your rasterized logo, which is used on PDF exports. This can be either a JPG or PNG.

rasterLogoUrl

/icons/logo-raster.png

Highlight color

Buttons, call to actions, links

highlightColor

#357aeb

Global background color

Primary background color

backgroundColor

#f8f8f8

Global font color

Font color for all texts inside the app

textColor

#282b34

Menu background color

Background color of the sidebar and top menu

alternateBackgroundColor

#ffffff

Label color

Color for sub headlines and captions

labelColor

#989ba2

Divider color

Color for borders and frames

dividerColor

#eaeaea

Default configuration in the application.yml file:

Code Block
application:
  name: Portrait App
  owner: Treskon GmbH
  ...
  theme:
    logoUrl: /icons/logo-full.svg
    heroUrl: /icons/logo-hero.svg
    rasterLogoUrl: /icons/logo-raster.png
    highlightColor: '#f890e7'
    backgroundColor: '#f0f0f0'
    alternateBackgroundColor: '#ffffff'
    textColor: '#3d3d3d'
    labelColor: '#0bd3d3'
    dividerColor: '#eaeaea'

Using your own logo

If you want to use your own logo, the best option is to upload it on the server. Proceed as following:

Upload via configuration editor

Open the configuration editor from the administration area. Navigate in the explorer to the folder /project/frontend/static/favicons. Right-click on the new folder and choose Upload....

After you uploaded the image, you should see the file inside the explorer:

Note

Do not rename/move the folder favicons and icons itself. Only edit the content.

Restart

Frontend

Instance

After you uploaded the logo image, you need to restart the frontend. You either restart the whole instance or just the frontend via docker-compose restart frontend on the servervia https://admin.demo.cluster.portraitapp.co.

Reference your image in the Theme

After the frontend was restarted, the image can be used inside your theme config:

Code Block
application:
  theme:
    logoUrl: /favicons/vice-logo.png

Theme Examples

Default

The default color theme, with the primary color being blue.

Settings:

Code Block
application:
  theme:
    logoUrl: /icons/logo-full.svg
    heroUrl: /icons/logo-hero.svg
    rasterLogoUrl: /icons/logo-raster.png
    highlightColor: '#357aeb'
    backgroundColor: '#f8f8f8'
    textColor: '#282b34'
    alternateBackgroundColor: '#ffffff'
    labelColor: '#989ba2'
    dividerColor: '#eaeaea'

Blue

Settings:

Code Block
application:
  theme:
    logoUrl: /icons/logo-full.svg
    heroUrl: /icons/logo-hero.svg
    rasterLogoUrl: /icons/logo-raster.png
    highlightColor: '#2a3780'
    backgroundColor: '#ffffff'
    alternateBackgroundColor: '#efefef'
    textColor: '#0b0b0b'
    labelColor: '#2a3780'
    dividerColor: '#c0c0c0'

Dark

Theme with a dark design.

Settings:

Code Block
application:
  theme:
    logoUrl: /icons/logo-full.svg
    heroUrl: /icons/logo-hero.svg
    rasterLogoUrl: /icons/logo-raster.png
    highlightColor: '#a6dcfc'
    backgroundColor: '#1f1f1f'
    alternateBackgroundColor: '#262626'
    textColor: '#e0e0e0'
    labelColor: '#b0b0b0'
    dividerColor: '#3d3d3d'

Vice

Theme with a 80ies flair.

Settings:

Code Block
application:
  theme:
    logoUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Miami_Vice.svg/2880px-Miami_Vice.svg.png
    heroUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Miami_Vice.svg/2880px-Miami_Vice.svg.png
    rasterLogoUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Miami_Vice.svg/2880px-Miami_Vice.svg.png
    highlightColor: '#f890e7'
    backgroundColor: '#f0f0f0'
    alternateBackgroundColor: '#ffffff'
    textColor: '#000000'
    labelColor: '#0bd3d3'
    dividerColor: '#eaeaea'