Configure the Web UI

Settings in the CSS

To personalize the DOF web api, is done mostly by setting and overriding classes in the CSS, however there are some settings that are not strickly style, we set those via CSS variables. Place in the CSS a dof-app-config style

See example:

.dof-app-config {
    --request-segment-class: border rounded position-relative bg-light p-2;
    --reply-segment-class: border rounded position-relative bg-light p-2;
}

Css variable	description
--request-segment-class	Sets the classname of the request segement a single 'bubble that represent a message from the user
--reply-segment-class	Sets the classname of the request segement a single 'bubble that represent a message from the system
--default-button-class	overwrite the default button class name
--inline-form-class	classname to apply on inline forms
--inline-form-section-break	Section break before inline form ? what group style, can also be 'int' or 'ext'
--group-buttons-style	Group last buttons style as css class names, Place the class names (space separated) in the content, can also be 'btn-box'
--group-buttons-section-break-style	If has value, also insert a section break is also inserted, value is the style of the sectionBreak. Supported values are: '', 'int' or 'ext'
--dof-missing-image	Place here the image to be used in case of missing/error images, e.g. 'data:image/png;base64,iVBORw0K...
--delay-1st-Message-Part	Minimum delay before showing the first part of reply message [milliSec]
--delay-Nth-Message-Part	Minimum delay before showing the n'th part of reply message [milliSec] (delay from the last part shown)
--scroll-speed	controls the scroll in dialog mode, units are Percent are Percent of viewport height to scroll per second
--forms-control-label-class	additional classes for the form label (for control) for example set to 'my-0' to make the form more compact