branding.md

Branding

Introduction

Stripes UI bundles are built on a per-tenant basis. Each bundle can be configured with tenant-specific assets for branding purposes. At this time, the following basic items are configurable:

• Logo and alt text
• Favicon
• Main navigation bar CSS
• Login page CSS

Configuration

The branding section of the Stripes configuration file, typically stripes.config.js, is used to set tenant-specific branding options.

module.exports = {
  okapi: {},
  config: {},
  modules: {},

  branding: {
    logo: {
      src: './tenant-assets/my-logo.png',
      alt: 'my alt text',
    },
    favicon: {
      src: './tenant-assets/my-favicon.ico',
    },
    style: {
      mainNav: {
        backgroundColor: "#036"
      },
      login: {
        backgroundColor: "#fcb"
      },
    },
  },
};

The branding section is optional. Generic FOLIO-branded values are automatically applied when no tenant settings have been specified.

Branding assets must be available on the local build system. All src paths, such as './path/to/my-logo.png', must be relative to the working directory of the build.

At build time, the branding assets will be picked up by the file loader and included in Webpack output directory.

Use within Stripes UI components

To access branding values within the UI, import branding from the stripes-config module. For example:

import { branding } from 'stripes-config';

Then apply the desired values to your image or component:

<img src={branding.logo.src} alt={branding.logo.alt} />