Front-end customization
This page explains how the front-end was constructed and what kind of customisation to the look and feel is supported.
Last updated
Was this helpful?
This page explains how the front-end was constructed and what kind of customisation to the look and feel is supported.
Last updated
Was this helpful?
At the start of the development of the , the user interface was constructed using , which is a custom theme based on . For backwards compatibility, Beagle and Bootstrap are still included in the front-end libraries, but will not be upgraded in the future.
At a later stage, the use of the was introduced. All current front-end development in the product is done through the of this design system. Using these components, the effort needed to develop a professional, accessible front-end is greatly reduced.
Some effort was made to allow Beagle and Carbon to work together in the same application. However, Carbon is now the default way to develop for Valtimo, so implementations are advised to develop custom screens and components using Carbon components, with minimal, if any, custom CSS.
By default, various stylesheets need to be included in the styles array in the implementation's angular.json. For an up-to-date overview of these stylesheets, refer to the .
is used throughout the application. By default, its components use Bootstrap 4 classes for styling. Out-of-the-box, Valtimo applies some styling to Form.io.
Since , a Carbon Form.io theme has been included. Going forward, this is the officially supported Form.io look and feel. This theme can be applied by including node_modules/@valtimo/components/assets/css/formio-carbon.scss in the stylesarray of angular.json.
Further customisation of Valtimo's look and feel is possible by overriding styles using global CSS code. Please be advised that this kind of customization is not officially supported, and it's possible any custom CSS will break in future versions, both through updates to Valtimo or to its dependencies (notably the Carbon Design System).
Out-of-the-box, a custom accent color used by Carbon components is supported. for more information on how to configure this custom accent color.
The logo, displayed at the top left of the application, can be customized. More information can be found .