Jitsi Meet Design anpassen

Das Design der Jitsi Meet Oberfläche kann mit wenigen Schritten an das eigene Branding angepasst werden. Neben dem Tausch des Logos können sehr einfach per CSS die Schriftarten und die Farben modifiziert werden.

1 Anpassung des Brandings

Die verwendeten Bezeichnungen und Links können in der Konfigurationsdatei interface_config.js an deine Bedürfnisse angepasst werden. Das Logo und das Favicon können einfach überspeichert werden.

Der Name der Jitsi Meet Instanz, der auf der Startseite und im Titel angezeigt wird, kann in der Konfigurationsdatei interface_config.js geändert werden.

 # // /usr/share/jitsi-meet/interface_config.js  
 # 5: APP_NAME: 'Jitsi Meet',  

Um die Jitsi Meet Installation anzupassen bzw. zu individualisieren, ist das Verzeichnis /usr/share/jitsi-meet/ die wichtigste Anlaufstelle. Das Logo links oben kann einfach durch eine eigene Datei überschrieben werden. Es liegt im Unterordner /images und heißt watermark.png. Die Grafik ist eine PNG-Grafik mit transparentem Hintergrund und hat eine Größe von 272 x 612 Pixel.

Die Datei mit dem eigenen Logo sollte die gleiche Abmessung aufweisen, ebenfalls einen transparenten Hintergrund haben und mit watermark.png bezeichnet werden. Das Original Logo kann mit den folgenden Befehlen ersetzt werden:

# rm /usr/share/jitsi-meet/images/watermark.png  
# wget -c -q -O /usr/share/jitsi-meet/images/watermark.png https://example.com/watermark.png 

2 Anpassung des Layout

Die restlichen Anpassungen der Optik von Jitsi Meet werden über CSS-Anweisungen realisiert. Ich selbst habe hierzu mit eigenen CSS-Anweisungen die bisherigen Werte überschrieben. Eine Alternative wäre die Modifikation des vorhandenen CSS-Codes. Mein Vorgehen reduziert die Gefahr, dass eine Funktion falsch dargestellt wird. all.css

Die Anweisungen habe ich in der CSS-Datei all.css von Jitsi Meet nach dem vorhandenen Inhalt gespeichert. Hier besteht aus meiner Sicht der einfachste Weg darin, die eigenen Anweisungen in eine separate Datei zu schreiben und anschließend in die all.css zu laden.

/usr/share/jitsi-meet/css/all.css