Skip to main content
Version: 3.4

Custom Branding

The Loft UI can be branded according to your corporate design.

Custom branding can be configured via the Loft Config:

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

  # Optionally provide a background color for your logo in case your sidebar color doesn't work well with your logo.
  logoBackgroundColor: "#001529"

  # 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​

You can extend the primary sidebar with your own navigation items

navBarButtons:
  - text: "My Link"
    icon: "https://acme.com/static/my-icon.svg"
    link: "https://acme.com/my-link"
    position: TopEnd # can be one of TopStart, TopEnd, BottomStart, BottomEnd. Defaults to BottomEnd

If you need even more control, you can use additional javascript and css. The css classes and html ids in the loft UI DOM are stable across versions. You are responsible for making sure your files are accessible to the loft UI in the same way you'd expose your logo.

customCss:
  - https://your-server.tld/overrides.css
customJavaScript:
  - https://your-server.tld/script.js