Apply custom icons and stylesheets

Use custom icons to bring a look and feel that match your company's brand. If you wish to customize the default fonts for the platform, use custom themes to define your custom font, and upload the font files for each font weight, or select one that has already been defined.

Customize style sheets

If you want to fully change the look of the Digital Experience Portal , you can build your own CSS to style the entire portal UI. Then, apply the CSS using style sheet libraries (recommended) or CSS files.

HINT  
Depending how complete is your CSS, use the sys-minimal-css system parameter to feature a clean, minimalistic style for all basic page elements.

Use custom CSS libraries to define and design the portal interface. In case you have externally built CSS files, store them as style sheets in order to avoid adding them manually to a digital asset as custom files. Check the style sheets section in the FintechOS Studio User Guide for more details.

Use the sys-load-custom-style-sheet system parameter to apply the style sheet to the portal:

  • For it to apply to all portal instances, add the name of the style sheet as parameter value and leave the System Parameters On Portal Profiles section empty.

  • In order to apply it to specific portal profiles, use the System Parameters On Portal Profiles section to map the style sheet to the desired portal profile.

    NOTE  
    If you have more than one style sheet, specify all of them in the parameter value field in the order you want them to be applied.

In order to apply an external CSS file to a portal:

  1. Upload the .css file in the custom style folder. You can use either the default custom CSS folder or create a folder at a location of your choice.

  1. If the custom folder used is not the default one, set the following keys in Vault:

Key Path Key Name Value
kv/<environment>/<FintechOS Portal instance>/app-settings CustomStylesFolder The path to the folder where the custom styles are stored.
kv/<environment>/<FintechOS Portal instance>/app-settings

CustomStylesIgnore

 If false, the custom styles folder is used to load the css files.

  1. In the Innovation Studio menu, go to Admin> Settings.

  2. Tick the Use Custom Style Sheets box.

  3. In the Custom Styles field, enter the name of the folder where you store the custom files for the portal.

  4. Log off the portal and then log in again in order for the new customization to load.

Change the Vanilla Portal Theme (v22.1.4 and later)

The Vanilla Portal Theme is a white-label solution distributed via the Custom UI digital solution package that can be easily branded for any client or scope. The template is constructed as .css style sheets that you can use as a starting point for further Portal UI customization.

Customize the Vanilla Portal Theme

  1. In FintechOS Studio, navigate to Main Menu > Advanced > Style Sheets.
  2. Open the VanillaStylePortal style sheet.
    NOTE  
    As a best practice, you may want to create a clone of the style sheet for your personalization.
  3. In the Code section, you can see that the template is built using variables for setting the color, font size, font weight, shadows, line-height, button height, etc.
    Customize the template by changing the desired variables (such as variables containing the primary color). If you need help creating a broad variety of colors, we recommend using material.io.


  4. Click Save and close.

Apply the Vanilla Portal Theme to the FintechOS Portal

Apply the Vanilla Portal Theme to change the color styles and the default components of the Digital Experience Portal, such as inputs, buttons, grids, and so on.

After customizing the style sheet, Use CSS libraries to link it to one or more portal instances (recommended). Alternatively, use Use CSS files to manually deploy the style sheet to the portal instance.

NOTE  
The style class applies to the entire portal. If you have another custom style on a specific journey section, modify that style using a parent class that exists only there in order to avoid conflict between styles.