White Labeling

Finsemble is designed to make it easy for you to create the ideal smart desktop for your organization and your end users. Obviously, this includes capturing your company's look and feel through white labeling. This tutorial explains how you can apply your brand colors, icons, and type styles to your smart desktop.

CSS files

The Finsemble seed project comes with files located in finsemble-seed/assets/css that make theming straightforward.

There are two files that host Finsemble's CSS styling is:

  • _theme.css - This file contains all of our colors, accents, font sizes, font weights, and pixel amounts rendered into variable form for easy reference. The file is organized by the components in which these variables are used. However, there are no classes defined in this file.
  • _fontIcon.css - Finsemble comes with a suite of icon fonts called Font Finance that you can use to customize your smart desktop. You can call them using their CSS class names. The reference file for the Font Finance font-icons can be found here: finsemble-seed/assets/css/fonts/icon-reference.html.

The following three files are all blank, but can used to override CSS classes or variables:

  • _themeWhitelabel.css - This file is used to override any variables from the _theme.css file. Just copy the variables from _theme.css into this file and change them for your purposes.
  • _fontIconWhitelabel.css - This file is used to override any of the Font Finance font-icons from _fontIcon.css.
  • _styleWhitelabel.css - This is the final CSS file that gets loaded. Use this file is used to override any built-in Finsemble CSS. More comprehensive class treatments, such as padding or margin adjustments, alignment adjustments, or other display adjustments, should be made in _styleWhiteLabel.css.

Note: In general, you will copy code from _theme.css or _fontIcon.css to to a white label CSS file so it can be safely modified. Modifying the file itself can introduce complexity to the process of upgrading your Finsemble application.


Change the color scheme

First, copy the contents of _theme.css and paste them into _themeWhitelabel.css. Next, change the color values in the core- and accent- variables where desired. This is the quickest way to apply different colors to all of Finsemble. Note: Finsemble is styled for dark backgrounds by default, and implementing a color palette containing light backgrounds will require changes to the font colors for legibility.


Change typography

The basic characteristics of fonts, such as size, weight, and color, are defined in the _theme.css file. Copy the contents of _theme.css and paste them into _themeWhitelabel.css. Modify the values of the fonts you wish to change.

Define type style classes

Type style classes, such as <h1> or <p>, are not defined in Finsemble by default—therefore they need not be replaced. Type styles may be defined in _styleWhitelabel.css as it is the catchall file. Type styles can be constructed using the variables defined in _themeWhiteLabel.css.

New fonts

Introducing a new font to Finsemble requires that the font definitions be imported by URL or local reference into _themeWhiteLabel.css. The --font-primary variable should be updated to incorporate the new font family. Local font definition files can be found in ../assets/css/fonts.


Change icons

If you are importing your own icon-font, follow these steps:

  1. Place your own CSS file in the the directory ../assets/css.
  2. Open _fontIconWhitelabel.css and include an @import reference to your newly imported .css file.
  3. Open the font-finance.css file and note the icons that you want to replace (reference ../assets/css/fonts/icon-reference.html for a preview of icons in the Font Finance set).
  4. Copy the classes for the icons into the _fontIconWhitelabel.css file.
  5. Modify the ".ff-" classes to include your font-family, and change the content to match those of your icons. This method will minimize the need to replace icon classes in specific locations.

Example:

Icon class in font-finance.css:

.ff-arrow-down {
   content: "/61";
}

Icon class in your imported file my-icon-font.css:

.arrow-down {
   content: "/e900";
}

Icon class in _fontIconWhitelabel.css:

.ff-arrow-down {
  font-family: "my-icon-font";
  content: "/e900";
}

Best practices

Once the colors, type styles, and icons are modified, additional adjustments may need to be made so that visual consistency can be achieved. Rather than going into every element’s CSS file and modifying the classes, copy and paste the classes you want to change into _styleWhitelabel.css and make the changes there. This will allow you to keep all of your changes centralized and easily maintainable.

Changing the default variable names in Finsemble could introduce upgrading complexities. If you wish to rename any of the default variable names, you can alias them like so:

--yourVariable: example;
--chartIQVariableName: var(--yourVariable);


check   Three blank files located in ../assets/css make white labeling straightforward. They can be used to override CSS classes or variables.
 

Further reading

Developers also have the freedom to make atomic-level changes to Finsemble's default UI components through React controls. To learn more, check out the Modifying UI Components tutorial.