Custom Themes

Custom themes allow you to adjust the default fonts and color palette of your FintechOS Portal user interface.

Create a Custom Theme

1. In FintechOS Studio, go to Main Menu > Digital Experience > Digital Frontends > Custom Themes.
2. Click Insert. The theme configuration page opens on the General tab.

   

3. Provide a Name for your custom theme.
4. Select the Base Theme that your custom theme will extend.
5. Click Save and Reload.
6.  Open the Colors tab.
7. In the Match the new state colors section, set the matching colors for different system notification messages. Read the on-screen information on the recommended colors.

   

8. In the Add the new colors section, you can customize 16 colors from the base theme previously selected by providing the desired color hexadecimal values.

   

9. In the Generate the new palette colors section, select three colors of the 16 colors you added earlier. Based on these colors, a palette will be generated to the new custom theme.

   

10. Once you select the matching colors for the different system notifications, a new section is displayed at the bottom of the configuration page and lists the new CSS color classes.

    

    NOTE  
    The colors listed in the New CSS color classes section are non-editable. If you want to modify them, you can do so from the Match the new state colors section.
11. If you wish to customize the default fonts:
    1. Open the Fonts tab.
    2. Expand the Custom Font field and select the desired custom font. If no custom fonts have been defined or you wish to use a different font, click Insert and add a Name for your custom font, then upload font files for the various font weights.

       

       HINT  
       For UI consistency, try to use fonts from the same font family.
12. Save the custom theme by clicking the save icons at the top-right corner of the page.

Apply the Custom Theme to a FintechOS Portal Instance

To apply a custom theme to a FintechOS Portal instance

1. Open the Configuration Manager.
2. Navigate to the kv/<environment name>/<portal instance>/app-features node.
3. Set the customTheme secret to the name of your custom theme.

Apply a Custom CSS Style Sheet to the Portal UI

1. Save the CSS file which contains the custom visual design and layout of the user interface on the server where the FintechOS installation package is located, in the custom folder.
2. In FintechOS Studio, go to Main Menu > Admin > Settings . The Portal UI configuration page will be displayed on the General tab.
3. Tick the Use Custom Styles checkbox and type the name of the folder.