Nuclos Custom CSS: Web Client per WEBCLIENT_CSS gestalten, Tab-Laschen, Buttons und Panels mit eigenen Selektoren anpassen.

Sprache: Deutsch · English

Custom CSS

Das Aussehen des Web Client per CSS anpassen – über den Systemparameter WEBCLIENT_CSS oder eine Nuclet-CSS-Datei.

Auf dieser Seite

Mit dem Systemparameter WEBCLIENT_CSS überschreibst du das Aussehen des Web Client (z. B. Tab-Laschen, Buttons, Panels).

Aktivierung

Über Administration → Parameter den Parameter WEBCLIENT_CSS setzen, oder
eine .css-Datei im Nuclet-Extension-Bereich hochladen.

Web Client > Custom CSS > image-2023-10-5_10-29-20.png

WEBCLIENT_CSS als Systemparameter.

Beispiel: aktive Tab-Lasche hervorheben

Ein hellerer Balken über dem Titel der aktiven Tab-Lasche:

.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 > Custom CSS > TabRestyleResultV2.png

Ergebnis: hervorgehobene Tab-Lasche.

Die Tab-Laschen lassen sich mit der ganzen Mächtigkeit von CSS gestalten. Weitere Selektoren: .theme-basic .btn-primary, .nuc-button-execute-rule, .card, .ag-row-selected u. v. m.

Custom CSS

Aktivierung

Beispiel: aktive Tab-Lasche hervorheben

Verwandte Seiten

Farbige Zeilen

Barrierefreie Layouts