ADM Styling

It is possible to overwrite some of the default styles such as font and font size or to customize the entire colour palette.

Overwrite the Styles

To overwrite the styles you need to follow the next steps:

Go to the adm folder of the Ometa Core Service. Location: %OMETA_INSTALL_ROOT%\Ometa Software Suite\Services\Core Service\wwwroot\assets\adm
Locate the obiz-theme-variables-custom.css file.
Copy the styles from obiz-theme-variables.css which you want to overwrite here. The following example overwrites the default font to Verdana. Don't forget to include the CSS selector as you can see in the following example.

body,
obiz-component,
obiz-view-dialog {
  --obiz-theme-font: Verdana;
}

Do keep in mind that this file will be cached by the web browser. You need to clear the cache or use Ctrl + F5 to force the file being retrieved from the server.

Font

CSS Property	Where used in ADM
--obiz-theme-font	The main font used everywhere
--obiz-theme-font-size-button	Button font size
--obiz-theme-font-size-title	Font size title of the ADM Font size title in the dialogs Font size title in the headers from the modern forms
--obiz-theme-font-size-caption	Pager font size Font size of the view fields description field in write views
--obiz-theme-font-size-body-2	Font size of the headers in the multi record view, mobile view and toast notifications
--obiz-theme-font-size-body-1	Font size of the records of the multi record view
--obiz-theme-font-size-input	Input labels font size
--obiz-theme-font-size-mobile-subheading-1	Font size of the labels in the mobile view
--obiz-theme-font-size-mobile-body-1	Font size of the records in the mobile view

Colours

Palette

There are three colour palettes: primary, accent and warn. You can generate your own colour palette here.

Primary

The primary colour palette is mostly used for the primary (most important) buttons and when entering into a view field control.

Primary Palette

Accent

The accent colour is currently only used when selecting items in the multi record view.

Multi Record Accent

Warn

The warn colour palette is used for the autocomplete and picker controls when there are multiple values found when validating. It is also used for warning notifications.

Headers

The theme-forms-header styles are used in Modern Forms to customize the appearance of headers. You can easily adjust these styles using CSS variables.

By default, the font size of the header points to the --obiz-theme-font-size-title variable, and the foreground color points to the --obiz-theme-primary-color-500 variable.

Here is an example custom configuration:

body,
obiz-component,
obiz-view-dialog {
    --obiz-theme-forms-header-margin: 20px 0;
    --obiz-theme-forms-header-text-align: center;
    --obiz-theme-forms-header-bg-color: #f4f4f4;
    --obiz-theme-forms-header-font: bold 1.5em 'Arial', sans-serif;
    --obiz-theme-forms-header-color: #333;
}

Document Approval

If you would like to apply the styles like in Document Approval, use the following custom configuration:

body,
obiz-component,
obiz-view-dialog {
    --obiz-theme-forms-header-margin: 0 0 8px 0;
    --obiz-theme-forms-header-padding: 4px 0 8px 0;
    --obiz-theme-forms-header-color: var(--obiz-theme-primary-color-500);
    --obiz-theme-forms-header-font: 400 20px var(--obiz-theme-font);
    --obiz-theme-forms-header-border-bottom: 2px solid;
    --obiz-theme-forms-header-border-image: linear-gradient(to right, rgb(68, 147, 103), rgb(211, 245, 221));
    --obiz-theme-forms-header-border-image-slice: 1;
}

Legacy Styles

If you would like to apply the legacy styles as before, use the following custom configuration:

body,
obiz-component,
obiz-view-dialog {
    --obiz-theme-forms-header-padding: 8px 16px;
    --obiz-theme-forms-header-margin: 0 0 8px 0;
    --obiz-theme-forms-header-text-align: center;
    --obiz-theme-forms-header-bg-color: var(--obiz-theme-primary-color-500);
    --obiz-theme-forms-header-font: bold 20px var(--obiz-theme-font);
    --obiz-theme-forms-header-color: var(--obiz-theme-primary-color-contrast-500);
}

Notifications

The info, success, warning error notifications and toasts use the following CSS variables. The contrast is used for the foreground colour.

body,
obiz-component,
obiz-view-dialog {
  --obiz-theme-info-color: #0078d4;
  --obiz-theme-info-color-contrast: #ffffff;
  --obiz-theme-error-color: #f44336;
  --obiz-theme-error-color-contrast: #000000;
  --obiz-theme-success-color: #4caf50;
  --obiz-theme-success-color-contrast: #000000;
  --obiz-theme-warning-color: #ff9800;
  --obiz-theme-warning-color-contrast: #000000;
}

Toast Icons

The toast icons can be changed by overwriting the following CSS variables. These variables are mapped to the background-image CSS property.
To override the image, you need to URL encode the SVG image.

body,
obiz-component,
obiz-view-dialog {
  --obiz-theme-info-icon: url("data:image/svg+xml, [URL encoded SVG]");
  --obiz-theme-error-icon: url("data:image/svg+xml, [URL encoded SVG]");
  --obiz-theme-success-icon: url("data:image/svg+xml, [URL encoded SVG]");
  --obiz-theme-warning-icon: url("data:image/svg+xml, [URL encoded SVG]");
}

Add the fill="color" property to the SVG to apply a custom color. The following example shows how to correctly override the default icon with a white SVG.

<svg><path fill="white" d="M256 8C119.043"/></svg>

body,
obiz-component,
obiz-view-dialog {
  --obiz-theme-info-icon: url("data:image/svg+xml,%3Csvg%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M256%208C119.043%22%2F%3E%3C%2Fsvg%3E");
}

Table of Contents