Skip to main content

Custom Branding

The platform UI can be customized to match your corporate design, enhancing brand consistency and user experience.

Custom branding can be configured via the platform Config. Add the following YAML configuration to your platform Config file:

Basic custom branding configuration
uiSettings:
  # Terms of Service, Privacy Policy etc.
  # Can be an html string.
  legalTemplate: You agree to the <a href="http://acme.com/">Terms of Service</a>

  # An **accessible** url. Can be in your cluster as long as you make sure the UI can find it
  logoURL: https://acme.com/static/our-logo.svg

  # Primary color
  # Can be `hex`, `rgb` or `rgba` string
  primaryColor: "#1890ff"

  # Sidebar color
  # Can be `hex`, `rgb` or `rgba` string
  sidebarColor: "#001529"

  # Accent color
  # Can be `hex`, `rgb` or `rgba` string
  accentColor: "#00BDFF"

Advanced custom branding​

For more extensive customization, you can add custom navigation items and apply additional CSS and JavaScript.

Custom navigation items​

Extend the primary sidebar with your own navigation items:

Adding custom navigation items
navBarButtons:
  - text: "My Link"
    icon: "https://acme.com/static/my-icon.svg"
    link: "https://acme.com/my-link"
    position: TopEnd # Options: TopStart, TopEnd, BottomStart, BottomEnd (default: BottomEnd)

Custom CSS and JavaScript​

For more control over the UI appearance and behavior, you can include custom CSS and JavaScript files:

Including custom CSS and JavaScript
customCss:
  - https://your-server.tld/overrides.css
customJavaScript:
  - https://your-server.tld/script.js
info

Ensure that all custom files (CSS, JavaScript, and images) are accessible to the platform UI. The CSS classes and HTML IDs in the platform UI DOM are stable across versions, allowing for consistent styling and scripting.