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.

Favicon
Logos (Light & Dark Versions)
CSS Customization (Predefined File vs. Custom CSS)
Default Settings
Multiple White Label Items
Marketplace Configuration
Import/Export Functionality

Favicon

What is a Favicon:
A favicon is a small icon that appears in the browser tab, bookmarks, and history alongside the website title.
Purpose:
Changing the favicon helps align the application with the customer’s brand, boosting brand recognition.
How to See Changes:
After replacing the favicon, refresh the browser page to view the updated icon in the tab header and bookmarks.

Logos (Light & Dark Versions)

Overview:
The application supports two versions of the logo:
- Light Logo: Used with a light theme.
- Dark Logo (Logo dark): Optimized for a dark theme.
Purpose:
Separate logos ensure that the branding remains clear and visually appealing regardless of the selected theme.
Display Location:
Both logos appear in the upper left corner of the application and automatically switch based on the active theme.

CSS Customization (Predefined File vs. Custom CSS)

Options:
Users can choose between:
- Predefined CSS File: A ready-made file containing all custom styles.
- Custom CSS Field: An integrated code editor for directly entering CSS code.
Step-by-Step Process:
1. Identify the Required Selector or Variable:
  - Open the application in your browser.
  - Right-click the target element and select “Inspect Element” (or “View Code”) to open DevTools.
  - Locate the relevant CSS selector or variable.
2. Test Changes in DevTools:
  - Modify the CSS in DevTools to preview changes in real time.
3. Apply the Changes:
  - For permanent updates, either upload the modified CSS file or paste the new code into the Custom CSS field.
4. Verify the Result:
  - Save the changes and refresh the page to ensure the new styles are applied correctly.

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

Objective:
In this example, we will change the color of the table header.
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.)
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.
Apply the Changes:
Once the color is finalized, copy the selector and the new style into your CSS file or the Custom CSS field.
Enhance Specificity if Needed:
In some cases, to ensure your style takes precedence, add the !important declaration to the property.

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.

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.

Marketplace Configuration

Overview:
White Label items can be further configured for publication in the Marketplace, allowing reuse across various projects.
Instruction:

Publishing a module in Finmars Marketplace

The module publication process in Finmars Marketplace consists of two parts:
1. Adding the module to Finmars Marketplace
2. Adding the module to Finmars Space
Adding the module to Finmars Marketplace
1. Open the Finmars Marketplace Admin Panel at: https://marketplace.finmars.com/admin/
2. Go to the Configurations section.
3. Click the "Add Configuration" button.
4. Fill out the form with the following details:
Configuration Code – The one defined at the beginning.
Organization – Your organization.
Author – The author of the module.
Name – The module name.
Description – The module description.
Type – The module type (general, ui, app, workflow, pricing).
Is package – Whether the module is a package (true/false).

Adding the module to Finmars Space
1. Open Space.
2. Navigate to Configuration → Configuration → Manage:
  https://{domain_name}/{realm_code}/{space_code}/v/configuration/manage-configuration
3. Click "Add New Configuration".
4. Fill out the form with the following details:
  
  Configuration Code – The one defined at the beginning.
  Name – The module name.
  Description – The module description.
  Version – In the format X.X.X, where X is an integer.
  Is package – Whether the module is a package (true/false).
5. Open the newly created module and click "Export to storage".
6. Verify the export result using Explorer. The files should be located at: configurations/custom/{configuration_code}/{version}/
7. Click "Push Configuration to Marketplace".
After publishing, the module should appear in Add-ons → Marketplace:
https://{domain_name}/{realm_code}/{space_code}/v/marketplace

⚠️ If your module is not a package, make sure to enable the "Show Modules" option.

Import/Export Functionality

Overview:
The import/export feature facilitates the transfer of White Label configurations between projects, enabling backup creation and sharing.
Instruction:

Export a configuration:
1. Follow the instructions from How to publish a module in Marketplace in the section "Adding the module to Finmars Space", up to Step 6.
2. Open Explorer and navigate to: configurations/custom/{configuration_code}/{version}/
3. Select all files and folders.
4. Click on the three vertical dots. A dropdown menu will appear.
5. In the dropdown menu, select "Download Selected as .zip".
Import a configuration:
1. Navigate to Configuration → Configuration → Import.
2. Upload the configuration file.