White Labeling

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

Finsemble comes with files located in src-built-in/components/assets/css that make theming straightforward. Note: In general, files provided should be copied from src-built-in to src before modifying them. This maintains backwards compatibility.

The primary file that hosts Finsemble's CSS styling is:

  • _variables.css - This file contains all of our colors, accents, fonts, and pixel amounts rendered into variable form for easy reference throughout Finsemble. The file is organized by the components in which these variables are used. However, there are no classes defined in this file. Note: In general, you will copy code from _variables.css to another CSS file to modify it. Modifying the file itself can introduce complexity to the process of upgrading your Finsemble application.

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

  • _fontIconWhiteLabel.css - This file is used to override any of the Font Finance font-icons from font-finance.css.
  • _variablesWhiteLabel.css - This file is used to override any variables from the _variables.css file. Just copy the styles from _variables.css into this file and change them for your purposes.
  • _styleWhiteLabel.css - This is the final CSS file that gets loaded. Use this file is used to override any built-in Finsemble CSS, including classes.

How to change colors

First, place your color palette variables in the _variablesWhiteLabel.css file. Next, copy all the variables you’re looking to change from the _variables.css file into _variablesWhiteLabel.css. Last, replace the color values where desired.

How to change type

Type styles, by default, are not defined in Finsemble—therefore they need not be replaced. Type styles may be defined in _styleWhiteLabel.css. If you prefer to define variables for the type styles, such as colors or transformations, it would be best to place those variables in _variablesWhiteLabel.css and have them referenced in _styleWhiteLabel.css.

How to change icons

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

  1. Place your own CSS file in the the directory src-built-in/components/assets/css.
  2. Open _fontIcons.css and _fontIconWhiteLabel.css and include an @import reference to your newly imported .css file.
  3. Next, open the _font-finance.css file and note the icons that you want to replace; there is an icon-reference.html file in src-built-in/components/assets/css/fonts that provides a preview of icons in the Font Finance set.
  4. Copy the classes for the icons into the _fontIconWhiteLabel.css file.
  5. Now, 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";
}

Making it all fit

Once the 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 the _styleWhiteLabel.css and make the changes there. This will allow you to keep all of your changes centralized and be easily maintainable.

Best practices

If you wish to make a standardized, global change throughout Finsemble, it would be best to copy the code you wish to modify from _variables.css and populate it in _variablesWhiteLabel.css.

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=$yourVariable;

Avoid naming variables based on their appearance. Instead, assign names that refer to the variables’ modes of use or their greater purpose. For example, header-large vs header-main. This will reduce the chances of having to rename variables should an element change appearance in the future.

Further reading

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