10. Customize the User Interface

Overview

After you integrate the components, you may consider modifications such as customizing the user interface by setting attributes, including those that refer to customized .css and font files.

There are multiple types of interface customizations you can optionally provide for the components to seamlessly blend their appearance into your parent page. Customizations must be explicitly set individually on each component. Apply these customizations using the files provided in:

assets folder for the Account Linking component
as_assets folder for the Account Summary component

The locations of these folders are described in 5. Download and Install Components.

Customization Options

Terminology – the i18n/en.json translation file contains all the static text displayed on pages, dialogs, and buttons within the interface. Edit this file to customize text and terminology. Configure the component to use your custom terminology file by setting the translate-file-path attribute. Note that the translation file for each component has a different set of terms.
Styles – define an optional CSS file to override the default Morningstar Design System (MDS) styles and adjust fonts, colors, and backgrounds for elements in the display. Configure the component to use your custom CSS file by setting the override-css-file attribute. To use fonts other than the MDS Univers font, you can add a global entry like this to your CSS file:
```
{  
font-family: YourFont, Verdana, sans-serif !important;  
}
```
Fonts – define an optional fonts file to override the default Morningstar Design System (MDS) fonts for elements in the display. Configure the components to use your custom fonts by setting the custom-fonts attribute. These new fonts are then available to be set using the CSS file specified using the override-css-file attribute.
Optional features – For Account Linking only, the config/ui-config.json file contains options that enable you to turn on/off UI features in Account Linking. Configure Account Linking to user your custom configuration file by setting the ui-config-file attribute. Only a subset of the options currently applies to the component. These options are:
- "fiLogosVisible” - controls whether a page of popular financial institution (FI) logos is shown in the FI selection step.
  - true = the logos are shown
  - false = only a search control and FI list are shown
"includeURLinSearch" - controls whether the FI URLs are included in the search criteria when the user is searching for an institution.
For example:
```
"cui-fi-select": {   
  "fiLogosVisible": false,    
  "includeURLinSearch": false 
} 
```

Instructions

Use these instructions to customize terminology, styles, fonts, and optional features.

Edit the files provided in the assets and as_assets folders. The folders are described in 5. Download and Install Components. The possible edits are described above on this page.
Modify your web server to allow our origin "www.byallaccounts.net"
to access those files. We suggest the following:
- Header set Access-Control-Allow-Origin "www.byallaccounts.net"
- Header set Access-Control-Allow-Headers "Cache-Control,Content-Type,Accept,Referer,User-Agent,Sec-Fetch-Dest"
- Header set Access-Control-Allow-Methods "GET,OPTIONS"
  If this access is not allowed, then the components will not be able to access the customization files and each will have to use its own version of those files.
Set the appropriate attribute to identity each custom file. For attribute information see 6. Incorporate Components into Parent Page.