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/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:

  • _theme.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 _theme.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.
  • _themeWhitelabel.css - This file is used to override any variables from the _theme.css file. Just copy the styles from _theme.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 _themeWhitelabel.css file. Next, copy all the variables you’re looking to change from the _theme.css file into _themeWhitelabel.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, sizes, or transformations, it would be best to place those variables in _themeWhitelabel.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/assets/css.
  2. Open _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/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 _theme.css and populate it in _themeWhitelabel.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 classes and variables based on their appearance. Instead, assign names that refer to the variables’ modes of use or their greater purpose. For example, header-main is a better name than header-large because it describes the header's mode of use. This will reduce the chances of having to rename the element should it change appearance in the future.


check   Three blank files located in src-built-in/assets/css make white labeling straight forward. 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 presentation components through React controls. To learn more, check out the Modifying Presentation Components tutorial.