Nuclos custom CSS: style the Web Client via WEBCLIENT_CSS, adjust tabs, buttons and panels with custom selectors.

Language: Deutsch · English

Custom CSS

Customize the Web Client's look via CSS – through the WEBCLIENT_CSS system parameter or a Nuclet CSS file.

Auf dieser Seite

Use the system parameter WEBCLIENT_CSS to override the Web Client's appearance (e.g. tabs, buttons, panels).

Activation

Set WEBCLIENT_CSS under Administration → Parameters, or
upload a .css file in the Nuclet extension area.

Web client (EN) > Custom CSS > image-2023-10-5_10-29-20.png

WEBCLIENT_CSS as a system parameter.

Example: highlight the active tab

A lighter bar above the active tab's title:

.tab-background {
  border-top: 4px solid rgba(0, 0, 0, 0.35);
}
.tab-background:hover {
  border-top: 4px solid rgba(255, 255, 255, 0.55);
}
.p-highlight .tab-background {
  border-top: 4px solid rgba(255, 255, 255, 0.55);
}

Web client (EN) > Custom CSS > TabRestyleResultV2.png

Result: highlighted tab.

Tabs can be styled with the full power of CSS. Further selectors: .theme-basic .btn-primary, .nuc-button-execute-rule, .card, .ag-row-selected and many more.

Related pages

Colored rows

Color rows.

Öffnen →

Accessible layouts

Contrasts & classes.

Öffnen →