White Label Documentation

This documentation provides a comprehensive guide to our White Label capabilities. It covers an overview of our projects, in-depth customization options (such as favicon, logos, and CSS modifications), and the theming functionality available through our UI kit. Designed for analysts and their assistants, this guide ensures a clear understanding of both the architecture and practical implementation of our White Label system.

Project Overview

This chapter provides an in-depth look at all our projects. It outlines the technology stack, routing schemes, and the extent to which each project integrates the UI kit. Understanding these fundamentals is crucial for appreciating how White Label is implemented across different platforms.

Project Overview

Portal (Angular.js)

Project Overview

vue-portal (Nuxt 3, Vue 3)

Project Overview

workflow-portal (Nuxt 3, Vue 3)

Project Overview

authorizer-portal (Nuxt 3, Vue 3)

Project Overview

UI Kit (Vue 3)

White Label Customization Capabilities

This chapter outlines the full range of customization options available through our White Label system. It covers everything from minor visual updates (like favicon changes) to extensive modifications via custom CSS. In addition, it explains default settings, the creation of multiple configuration items, and integration with the Marketplace.

White Label Customization Capabilities

Favicon

White Label Customization Capabilities

Logos (Light & Dark Versions)

White Label Customization Capabilities

CSS Customization (Predefined File vs. Custom CSS)

Below is an illustrated example of the CSS Customization Step-by-Step Process:

  1. Objective:
    In this example, we will change the color of the table header.

    image.png


  2. Locate the Element:
    Find the target element in the element tree.
    (Right-click on the target element and select "Inspect Element" (or "View Code") to open DevTools.)

    image.png

  3. Identify the Style and Selector:
    Look for the style that applies the current color to the element, and note the corresponding selector.
    Test different colors directly in DevTools until you select the desired one.

    image.png

  4. Apply the Changes:
    Once the color is finalized, copy the selector and the new style into your CSS file or the Custom CSS field.

    image.png

  5. Enhance Specificity if Needed:
    In some cases, to ensure your style takes precedence, add the !important declaration to the property.

White Label Customization Capabilities

Default Settings

Explanation:
The "Default" field indicates that the specific White Label item is applied by default. If no alternative configuration is selected, these settings will automatically be active, ensuring a baseline level of customization.

White Label Customization Capabilities

Multiple White Label Items

Flexibility:
Our system supports the creation of an unlimited number of White Label items. This allows for tailored configurations for different brands or projects, providing maximum flexibility.

White Label Customization Capabilities

Marketplace Configuration

White Label Customization Capabilities

Import/Export Functionality

Theming in the UI Kit

This chapter delves into the theming capabilities of our UI kit. It explains how design palettes are abstracted using CSS variables, outlines the process for creating and integrating new palettes, and provides guidelines for testing and deployment.

Theming in the UI Kit

Palette Abstraction

Theming in the UI Kit

Process for Implementing a New Palette

Theming in the UI Kit

Limitations and Recommendations