4.3. Designs der Web-Schnittstellen anpassen#

Nubus für UCS stellt vordefinierte helle und dunkle Designs für alle Web-Schnittstellen bereit. Sie können Designs global für alle Benutzer wechseln oder das Erscheinungsbild durch Erstellung eigener Designs anpassen. Beide Optionen erfordern nur eine Konfigurationsänderung ohne Service-Neustart.

4.3.1. Zwischen hellem und dunklem Design wechseln#

Alle Web-Schnittstellen in Nubus für UCS haben ein dunkles und ein helles Design. Die CSS-Dateien für die Designs befinden sich unter /usr/share/univention-web/themes/. Standardmäßig bietet Nubus für UCS ein light- und ein dark-Design an.

Sie können zwischen den Designs global für alle Benutzer wechseln, indem Sie die UCR-Variable ucs/web/theme ändern. Der Wert der Variable entspricht dem CSS-Dateinamen ohne Erweiterung. Beispielsweise verwendet der Wert light das light.css-Design für alle UCS Web-Schnittstellen.

Laden Sie die Web-Schnittstelle im Browser neu, um den Design-Wechsel anzuwenden.

4.3.2. Ein benutzerdefiniertes Design erstellen#

Nubus für UCS ermöglicht es, benutzerdefinierte Designs für die Web-Schnittstellen bereitzustellen.

Wichtig

Bearbeiten Sie nicht die Dateien /usr/share/univention-web/themes/dark.css und /usr/share/univention-web/themes/light.css, da Aktualisierungen von Nubus für UCS Ihre Änderungen überschreiben können.

Führen Sie folgende Schritte aus, um ein benutzerdefiniertes Design zu erstellen:

  1. Kopieren Sie eine der CSS-Dateien in eine separate Datei.

    Beispielsweise: /usr/share/univention-web/themes/mytheme.css

    Die Dateien /usr/share/univention-web/themes/dark.css und /usr/share/univention-web/themes/light.css enthalten die gleiche Liste von CSS-Variablen. Andere CSS-Dateien verwenden diese Variablen.

    Diese CSS-Variablen sind der unterstützte Konfigurationssatz für UCS Web-Schnittstellen. Die Namen und Anwendungsfälle dieser Variablen bleiben über Systemaktualisierungen hinweg stabil, aber Univention kann neue Namen und Anwendungsfälle hinzufügen.

  2. Ändern Sie den Wert der UCR-Variable ucs/web/theme in den Namen Ihres benutzerdefinierten Designs.

    Beispielsweise setzen Sie den Wert auf mytheme.

  3. Laden Sie die Web-Schnittstelle in Ihrem Browser neu. Die Änderung der UCR-Variable wird wirksam, ohne einen Service-Neustart zu erfordern.

Einige UCS Web-Schnittstellen importieren eine eigene custom.css-Datei, mit der Sie ihre Gestaltung anpassen können. Die Dateien sind nach der Installation von Nubus für UCS leer, und Aktualisierungen ändern diese Dateien nicht, sodass Ihre Anpassungen erhalten bleiben.

  • Für die Management UI: /usr/share/univention-management-console-login/css/custom.css

  • Für das Portal: /usr/share/univention-portal/css/custom.css

Wichtig

Ein CSS-Selektor kann bei der Installation eines Nubus für UCS-Updates fehlerhaft werden.