Configuring Custom CSS Styling in the Portal
The Custom CSS capability in the Fenergo Portal empowers configurators with the ability to apply tailored styling directly into the portal UI, without requiring code deployment or backend changes. This feature enables highly flexible branding and accessibility enhancements across both Standard Mode and High Contrast Mode.
Custom CSS gives teams the power to:
- Apply organistion-specific visual themes quickly and consistently
- Enhance accessibility with targeted styles for high contrast scenarios
- Make rapid non-disruptive visual updates in response to client feedback
- Override the default appearance of key components in a safe and controlled way
All custom styles are scoped to supported components and validated prior to application, ensuring consistency across the platform without compromising layout or responsiveness.
Accessing the Custom CSS Fields
Two text area fields are available within the Portal Administration UI for entering custom CSS:
| Mode | Field Name | Location in UI |
|---|---|---|
| Standard Mode | Standard Mode CSS | Portal Configuration Area > Appearance Config |
| High Contrast Mode | High Contrast Mode CSS | Portal Configuration Area > Appearance Config |
These fields accept raw CSS input, which is applied immediately after saving. Each field applies styling to its corresponding mode only.
Validation Rules
To preserve portal layout integrity and user experience, the following rules are enforced:
- Only supported CSS class selectors (listed below) may be used.
- The following CSS properties are blocked:
width,min-width,max-widthheight,min-height,max-height
If unsupported class names or blocked properties are used, the following error appears:
"Invalid CSS. The configurator will need to remove this before the CSS can be saved."
Only the following pseudo-classes are allowed in custom CSS:
:hover:active:focus:enabled:disabled:checked
Supported CSS Classes
Custom CSS can target only the predefined, supported class names listed below. Each class must be prefixed with .custom-css_ when referenced in the CSS input.
| Friendly Name | Custom CSS Class Name |
|---|---|
| New Journey Style Wrapper | .custom-css_new-journey-box |
| Background Image Holder | .custom-css_background-image-holder |
| App Bar | .custom-css_app-bar |
| Add Data Group Button | .custom-css_data-group-add-item-button |
| Default Dashboard Page Container | .custom-css_default-dashboard-page-container |
| Table Dashboard Page Container | .custom-css_table-dashboard-page-container |
| Funds Dashboard Container | .custom-css_funds-dashboard-container |
| Fund Details Container | .custom-css_fund-details-container |
| Entity Profile Details (Box) | .custom-css_entity-profile-details-v1 |
| Entity Details Card | .custom-css_entity-profile-container-v1 |
| Entity Profile Menu Container | .custom-css_entity-profile-menu-container |
| Entity Profile Content Container | .custom-css_entity-profile-content-container |
| Entity Profile Details Container | .custom-css_entity-profile-details-container |
| Journey Sticky Header | .custom-css_journey-sticky-header |
| Journey Header Extended Background | .custom-css_journey-header-extended-background |
| GPI Container | .custom-css_gpi-container |
| Task Container | .custom-css_task-container |
| Document Requirements Row (V1) | .custom-css_documentV1-requirement-row |
| Document Requirements Row (V2) | .custom-css_documentV2-requirement-row |
| Linked Documents Container (V2) | .custom-css_documentV2-requirement-row-linked-docs-container |
For a visual reference of where these classes apply in the UI, refer to the Portal user guide image documentation.
Requesting Support for Additional Classes
The list of supported CSS classes and styling hooks is expected to evolve as new requirements emerge.
If you need to target additional areas of the Portal not listed above, please contact your Fenergo project representative.
Requests will be evaluated and prioritized as part of the Custom CSS roadmap, based on:
- Impact
- Feasibility
- Alignment with platform standards
Images of areas within the Portal:
New Journey Style Wrapper
Background Image Holder
App Bar
Add Data Group Button
Default Dashboard Page Container
Table Dashboard Page Container
Funds Dashboard Container
Fund Details Container
Entity Profile Details Box / Entity Profile Details Container
Entity Details Card
Entity Profile Menu Container
Entity Profile Content Container
Journey Sticky Header
Journey Header Extended Background
GPI Container
Task Container
Document Requirements Row V1
Document Requirements Row V2
Linked Documents Container V2
Fonts
The Fonts section enables Portal configurators to upload and manage a custom font family to be used across the Portal UI. This allows each tenant to align the Portal experience with their organisation’s branding and visual identity. Uploaded fonts are applied globally to all headings, body text, form fields, buttons, tables, modals, and notifications within the Portal.
A fallback font stack (beginning with Open Sans) is automatically applied if a custom font cannot be loaded, ensuring the UI remains accessible and readable.
Uploading Fonts
From Portal Configuration > Appearance, scroll to the Fonts section (located after the Custom CSS section).
- Click Add to begin uploading a font file.
- Supported file types: .woff, .woff2, .ttf, .otf.
- For each file, you must specify:
- Font Style: Normal or Italic
- Font Weight: Choose from 100–900, or define a range (e.g., 100–900)
Multiple files can be uploaded to support different styles and weights within the same font family (e.g., bold italic, light normal). This ensures text is rendered consistently throughout the Portal.
Managing Fonts
- Add Button: Add more font files to the same family until the upload limit is reached.
- Delete Icon: Remove unwanted fonts. When a font in use is deleted, the Portal reverts to the fallback font.
Behaviour Notes
- If no fonts are uploaded, the Portal continues to use the default font stack.
- Once uploaded, the custom font is applied globally wherever matching
font-styleandfont-weightcombinations are used in the UI.
Auth0 login page
To ensure the correct font is used, a font file with the Font Style: Normal and Font Weight: 400 must be configured. If this is not configured, the Auth0 login page will automatically use the portal default font.