Branding¶

Customer specified branding can be set within the LogMan.io WebUI application.

Static branding¶

Example:

let ConfigDefaults = {
    title: "App Title",
    brand_image: {
        full: "media/logo/header-full.svg",
        minimized: "media/logo/header-minimized.svg",
    }
};

Dynamic branding¶

The branding can be configured using a dynamic configuration.

The dynamic configuration is injected with the use of ngx_http_sub_module, since it replace the pre-defined content of index.html (in our case).

More about ngx_http_sub_module

There are 3 options for dynamic branding - header logo, title and custom CSS styles.

To replace default header logo, the nginx sub_filter configuration has to follow <meta name="header-logo-full"> and <meta name="header-logo-minimized"> replacement rules with the particular name. The replacement must have a content prop, otherwise the content of the replacement will not be propagated. content has to include a string with path to the logo.

Size of the branding images can be found here

Full¶

Example of importing full size logo (when sidebar of the application is not collapsed)

sub_filter '<meta name="header-logo-full">' '<meta name="header-logo-full" content="/<location>/<path>/<to>/<custom_branding>/<logo-full>.svg">';

Minimized¶

Example of importing minimized size logo (when sidebar of the application is collapsed)

sub_filter '<meta name="header-logo-minimized">' '<meta name="header-logo-minimized" content="/<location>/<path>/<to>/<custom_branding>/<logo-minimized>.svg">';

Title¶

Example of replacing application title, configuration has to follow <meta name="title"> replacement rules with the particular name. The replacement must have a content prop, otherwise the content of the replacement will not be propagated. content has to include a string with the application title.

sub_filter '<meta name="title">' '<meta name="title" content="Custom app title">';

Custom CSS styles¶

Example of importing custom CSS styles, configuration has to follow <meta name="custom-css-file"> replacement rules with the particular name. The replacement must have a content prop, otherwise the content of the replacement will not be propagated. content has to include a string with path to the CSS file.

sub_filter '<meta name="custom-css-file">' '<meta name="custom-css-file" content="/<location>/<path>/<to>/<custom_branding>/<custom-file>.css">';

Custom CSS file example¶

.card .card-header-login .card-header-title h2 {
    color: violet !important;
}

.text-primary {
    color: yellowgreen !important;
}

Define the nginx path to dynamic branding content¶

To allow the location of the dynamic (custom) branding content, it has to be defined in the nginx setup.

# Path to location (directory) with the custom content
location /<location>/<path>/<to>/<custom_branding> {
    alias /<path>/<to>/<custom_branding>;
}

Full example¶

Full example of nginx configuration with custom branding

...

location /<location> {
    root /<path>/<to>/<build>;
    index index.html;
    sub_filter '<meta name="header-logo-full">' '<meta name="header-logo-full" content="/<location>/<path>/<to>/<custom_branding>/<logo-full>.svg">';
    sub_filter '<meta name="header-logo-minimized">' '<meta name="header-logo-minimized" content="/<location>/<path>/<to>/<custom_branding>/<logo-minimized>.svg">';
    sub_filter '<meta name="title">' '<meta name="title" content="Custom app title">';
    sub_filter '<meta name="custom-css-file">' '<meta name="custom-css-file" content="/<location>/<path>/<to>/<custom_branding>/<custom-file>.css">';
    sub_filter_once on;
}

# Path to location (directory) with the custom content
location /<location>/<path>/<to>/<custom_branding> {
    alias /<path>/<to>/<custom_branding>;
}

...

Styling guide¶

Every image HAS TO be provided in SVG (vectorized). Use of pixel formats (PNG, JPG, ...) is strongly discouraged. While creating the branding images, use full width/height of the canvas (ratio 3:1 on full and 1:1 on minimized version). No padding is required for optimal viewing experience.

Branding images¶

format: SVG

Full: * rendered ratio: 3:1 * rendered size: 150x50 px

Minimized: * rendered ratio: 1:1 * rendered size: 50x50 px

Branding is located in top-left corner on large screens. Fullsize branding image is used when sidebar is uncollapsed and is substituted by mimnimized version upon collapsing. On smaller screens (<768px), branding in sidebar disappeares and only fullsized branding image appears in the top-center position of the page.

Logo should be suitable for use in both light & dark mode.

SidebarLogo is always located at the bottom of sidebar. Minimized version appeares upon the sidebar's collapsion.

Full: * rendered size: 90x30 px

Minimized: * rendered size: 30x30 px

Note: A full image is also used on the splash screen, 30% of the width of the screen.