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.

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

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.
    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

  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.

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.