Skip to content

Latest commit

 

History

History
50 lines (41 loc) · 1.91 KB

proc-customize-rhdh-branding-logo.adoc

File metadata and controls

50 lines (41 loc) · 1.91 KB

Customizing the branding logo of your {product-short} instance

You can customize the branding logo of your {product-short} instance by configuring the branding section in the {my-app-config-file} file, as shown in the following example:

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO} (1)
    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO} (2)

where:

  1. fullLogo is the logo on the expanded (pinned) sidebar and expects a base64 encoded image.

  2. iconLogo is the logo on the collapsed (unpinned) sidebar and expects a base64 encoded image.

    You can format the BASE64_EMBEDDED_FULL_LOGO environment variable as follows:

    BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"

    The following example demonstrates how to customize the BASE64_EMBEDDED_FULL_LOGO using the data:_<media_type>_;base64,<base64_data> format:

    SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"

    Replace image/svg+xml with the correct media type for your image (for example image/png and image/jpeg), and adjust the file extension accordingly. As a result, you can embed the logo directly without referencing an external file.

You can also customize the width of the branding logo by setting a value for the fullLogoWidth field in the branding section, as shown in the following example:

app:
  branding:
    fullLogoWidth: 110px (1)
# ...

  1. The default value for the logo width is 110px. The following units are supported: integer, px, em, rem, percentage.