Tobias Scheible Cyber Security & IT-Forensik Dozent
Hochhäuser

Das Design von Jitsi Meet anpassen

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

Montag, 09. November 2020
31 Kommentare

16.05.2021 Update: Anpassungen für das neue Layout mitaufgenommen.

Leider bietet Jitsi Meet keine Templates oder eine vordefinierte Methode, um das Layout anzupassen. Das Logo kann zwar einfach getauscht werden, aber alle anderen Anpassungen müssen über CSS-Anweisungen eingespielt werden. Bei meiner Jitsi Meet Instanz habe ich die Startseite angepasst:

Jitsi Meet Layout
Angepasste Startseite von Jitsi Meet
Jitsi Meet Style Angepasste Startseite von Jitsi Meet

Anpassung des Brandings

Die verwendeten Bezeichnungen und Links können in der Konfigurationsdatei interface_config.js geändert werden. Das Logo und das Favicon können einfach überspeichert werden.

Bezeichnung

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

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

Um die Jitsi Meet Installation anzupassen bzw. zu individualisieren, ist das Verzeichnis /usr/share/jitsi-meet/ die wichtigste Stelle. 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

In der neueren Version von Jitsi Meet kommt eine SVG-Grafik zum Einsatz. Daher muss in der Konfigurationsdatei interface_config.js der Dateiname angepasst werden.

// /usr/share/jitsi-meet/interface_config.js
49: DEFAULT_LOGO_URL: 'images/watermark.png',
51: DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.png',

Zusätzlich hat sich die Größe des Logos geändert. Mit dem Befehl sed, eine Möglichkeit auf der Shell bestimmte Inhalte in einer Datei zu suchen und zu ersetzen, kann die Größe wieder auf den alten Wert gesetzt werden. Dazu wird die Datei all.css geändert.

sed -i -e 's/width:71px;height:32px/width:140px;height:70px/g' /usr/share/jitsi-meet/css/all.css
Favicon

Das Favicon kann genau gleich wie das Logo getauscht werden:

# rm /usr/share/jitsi-meet/ favicon.ico 
# wget -c -q -O /usr/share/jitsi-meet/ favicon.ico https://example.com/favicon.ico
Startseite

In der neuen Version von Jitsi Meet hat sich auch die Startseite geändert. Jetzt wird hier nicht mehr der Text angezeigt, sondern ein Titel und ein Untertitel. Dieser wird nicht über die Konfigurationsdatei erstellt, sondern über die Sprachdatei. Dazu wurden die Einträge headerTitle und headerSubtitle hinzugefügt.

Stand Januar 2021 sind dafür in der deutschen Sprachdatei noch keine Einträge vorhanden. Diese können aber selbst einfach hinzugefügt werden. In der Standardsprachdatei (englisch) main.json befinden sich die Einträge unterhalb des Eintrages „goSmall“ in der Zeile 878. In der deutschen Sprachdatei main-de.json habe ich die Einträge ebenfalls direkt darunter eingefügt:

Datei: /usr/share/jitsi-meet/lang/main-de.json
"headerTitle": "Jitsi Meet",
"headerSubtitle": "Sichere und datenschutzfreundliche Online-Meetings – ohne Registrierung.",

Anpassung der Optik

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.

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

So sehen meine Anpassungen aus:

// /usr/share/jitsi-meet/css/all.css	
/* Custom */
.welcome{
    background-image: linear-gradient(-90deg,#171615 0,#292825 50%,#171615 100%);
}

body *{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !important;
}

.welcome .header .header-text-title, #x-bottom p{
	font-weight: 300;
	color: #e7dcca !important;
}

a, #x-bottom a{
    color: #f57921;
}

.welcome .welcome-page-button{
    background: #f57921;
}

.welcome .header .tab-container {
    background: #e7dcca;
}

.meetings-list .item.with-click-handler:hover{
        background: rgba(255,255,255,.25);
}
Update

Da die CSS-Datei all.css bei einem Update überschrieben wird, sollten die Änderungen per Script eingefügt werden. Dazu habe ich ein Jitsi Meet Update Script entwickelt.

Startseite

In der neuen Version 2.0.5390 von Jitsi Meet wurde die Startseite überarbeitet. Da ich die Raumliste nicht verwende, habe ich das Element dafür mit CSS ausgeblendet. Damit die Startseite ansprechender wird, habe ich zusätzlich das Foto getauscht und auf die volle Größe vergrößert.

Datei: /usr/share/jitsi-meet/css/all.css
/* Alle Cards werden ausgeblendet, auch die Raumliste */
.welcome-cards-container{
	display: none;
}
Datei: /usr/share/jitsi-meet/css/all.css
/* Das Hintergrundbild wird ausgetauscht und in voller Größe dargestellt */
.welcome .header{
    background-image: url(../images/welcome-background.jpg);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
	height: auto;
}
Datei: /usr/share/jitsi-meet/css/all.css
/* Die Box mit dem Titel und der Eingabe wird etwas nach unten geschoben */
.welcome .header .header-container{
    margin: 15% 32px 0 32px;
}

Neues Jitsi Meet Layout

Mit dem großen März/April Update von Jitsi Meet hat sich das Layout geändert. Die Startseite ist jetzt übersichtlicher und es wird ein Foto verwendet. Da ich die Liste mit den Raumnamen für den Verlauf deaktiviert habe, benötige ich den Platz darunter nicht. Daher blende ich dieses Element aus:

.welcome-cards-container{
	display: none;
}

Als nächstes verwende ich ein anderes Foto für den Header und vergrößere es auf die komplette Größe des Screens:

.welcome .header{
    background-image: url(../images/welcome-background.jpg);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
}
Titel & Text

Der Titel und der Text auf der Startseite können nicht mehr in der Konfigurationsdatei festgelegt werden. Stattdessen können diese Werte in der Sprachdatei /usr/share/jitsi-meet/lang/main-de.json verändert werden. Die Felder heißen headerTitle und headerSubtitle.

Jitsi Meet Artikelserie

Dieser Blogbeitrag ist Teil der Artikelserie „Videokonferenzen mit Jitsi Meet“, die sich mit dem Open-Source-Webkonferenzsystem Jitsi für Video-, Web- und Telefonkonferenzen beschäftigt. Die Artikelserie zu Jitsi Meet umfasst die folgenden Themen:


Jitsi Meet Artikel für Anwender


Jitsi Meet Artikel für Administratoren

Changelog

16.05.2021Anpassungen für das neue Layout mitaufgenommen.

06.01.2021Anpassung des Logos und der Bezeichnung überarbeitet.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Fabian am 16. Januar 2021 um 15:42 Uhr

Hallo Tobias,

cielen Dank für deine Mühen, anhand deiner Anleitungen konnte ich bisher sehr gut meinen jitsi Server betreiben.

Nun hab ich aber nach dem neuesten Update (heute durchgeführt) probleme mit der Startseite un dem Custom CSS:

Die folgenden Anweisungen werden gezogen, aber nicht vollständig umgesetzt:
.welcome .header .header-text-title { display:none !important }
.welcome .header .header-text-subtitle { display:none !important }

Der Titel und Subtitel wird nicht mehr angezeigt. Soweit so gut.

.welcome .header .header-text:before { content:’Meetingserver der Freiwilligen Feuerwehr Sehnde – Ortswehr Rethmar‘; color: #e7dcca; font-size: 2.5rem; font-weight: 500; line-height: 1.18; }

Der neue Titel wird leider nicht angezeigt, genausowenig der neue Subtitel…
Auch das Überschreiben des Hintergrunds geht nicht mehr korrekt… (Siehe meine Website)

.welcome{
background-image: linear-gradient(-90deg,#171615 0,#292825 50%,#171615 100%) !important;

Hast du eine Idee dazu?

Helge am 23. Januar 2021 um 14:07 Uhr

Hallo Tobias,

wirklich tolle Artikelserie über Jitsi Meet!

Es gibt übrigens eine weitere elegante Methode eigenen CSS-Code zu implementieren: Man schreibt diesen einfach in die Datei /usr/share/jitsi-meet/plugin.head.html:

<style>
.welcome-cards-container{  
    display: none;  
...
</style>

Der Inhalt wird dann automatisch geladen. Das Kopieren in die <code>all.css</code> entfällt.

Grüße
Helge

Daniel am 24. Januar 2021 um 21:04 Uhr

Hallo Tobias,

kann es sein, dass die aktuelle Version einige Probleme bei den Anpassungen hat?

Innerhalb der WelcomePageAdditionalsCard werden bei mir keine Links umgesetzt und WelcomePageAdditionalContent wird gar nicht mehr angezeigt.

Viele Grüße

Daniel

Tobias am 26. Januar 2021 um 17:53 Uhr

Hallo Daniel,
mit der neuen Version kann die Option DISPLAY_WELCOME_PAGE_CONTENT: true in der Datei /usr/share/jitsi-meet/interface_config.js aktiviert werden. Dann kann in der Datei /usr/share/jitsi-meet/static/welcomePageAdditionalContent.html die Links untergebracht werden. So habe ich es bei meet3.scheible.it gelöst.
Grüße Tobias

Jochen Breiter am 26. Januar 2021 um 22:24 Uhr

Hallo zusammen, ich würde gerne diese weniger schönen Berge als Hintergrundbild auf der Startseite loswerden. Gibt es bereits Erfahrungen, wie man das bewerkstelligen kann?

Tobias am 26. Januar 2021 um 22:39 Uhr

Hallo Jochen,
steht im Artikel 😉 Entweder das Foto images/welcome-background.png überspeichern oder (wie im Artikel) per CSS ein anderes Foto verwenden:

.welcome .header{  
    background-image: url(../images/welcome-background.jpg);  
}

Oder mit background-image: none; es einfach deaktivieren.
Grüße Tobias

Jochen Breiter am 27. Januar 2021 um 21:08 Uhr

Oha, das war mein Fehler 😉 Ich hatte das Update der Seite nicht bemerkt – shame on me 😉

Markus Zayc am 29. Januar 2021 um 09:10 Uhr

Hallo kann es sein das die Statistik nicht mehr angezeigt wird wenn man mit

.welcome-cards-container{
display: none;

arbeitet, sobald ich das aktiviere sind bei mir auf der Welcom Page die Statistik weg in der Version 2.0.539

Gruß
Markus

Markus Zayc am 29. Januar 2021 um 11:54 Uhr

Hi ich habe es selber gefunden, man muss

.welcome-tabs{
display: none;
}

setzten damit nur die Room List und nicht der Content ausgeblendet wird.

Gruß

Markus

Gerrit am 29. Januar 2021 um 12:39 Uhr

Hallo Tobias,
das gleiche Problem wie Daniel (s.o. 24.1.) habe ich reproduzierbar auch.

Genauer gesagt: Die Anweisung

.welcome-cards-container{
display: none;
}

verhindert bei mir auch die Darstellung der welcomePageAdditionalContent.html

Wenn ich die CSS-Anweisung auskommentiere, erscheint auch der Footer (ebenfalls von Dir übernommen – funktioniert aber reproduzierbar auch nicht mit anderen footern) wieder. Gibt es da einen relativen Bezug zu dem „welcome-cards-container“?

Grüße Gerrit

Gerrit am 29. Januar 2021 um 17:25 Uhr

Hallo Tobias,
mit:

.meetings-list {
display: none;
}

in der all.css kann man anscheinend auch nur die Meeting Liste einzeln abschalten. Dann funktioniert zumindest bei mir der Inhalt der welcomePageAdditionalContent.html wieder.

Grüße Gerrit

Alvaro Moreno am 3. Februar 2021 um 10:50 Uhr

Moin Tobias,
ich würde den CSS-Code mit !important ergänzen. Ansonsten werden die Änderungen nicht angezeigt.

position: absolute!important;
bottom: 0;
top: 0;
left: 0;
right: 0;
height: auto!important;

Wie immer toller Content! Vielen Dank dafür.
Viele Grüße, Alvaro

Alvaro Moreno am 3. Februar 2021 um 11:36 Uhr

Hier ein kleines Beispiel für die Einbindung einer Navigation auf der Startseite. Vielleicht ist es für jemanden nützlich.

nano /usr/share/jitsi-meet/static/welcomePageAdditionalContent.html

Powered by Deine Firma |
Anleitung |
Browser Test |
Datenschutz |
Impressum
Tobias am 3. Februar 2021 um 19:22 Uhr

Hallo Alvaro,
Dankeschön für die Ergänzung. Ähnlich habe ich es im Artikel zum Thema Datenschutz beschrieben.
Grüße Tobias

Artur am 28. Februar 2021 um 20:15 Uhr

Ich habe das Background-Image im neuen Jitsi Update eingebaut und habe das Phänomen, dass, sobad ich herauszoome, sprich 90%, 80%… sehe ich das Background Image mehrfach eingebaut. Woran kann das liegen? Muss ich auf ein bestimmtes Format achten? Hast du ggf. einen Tipp?

Danke schon Mal im Voraus!

LG Artur

Hier die Seite:

https://meet.ehlebracht-ag.com/

Tobias am 5. März 2021 um 07:48 Uhr

Hallo Artur,
dafür muss noch ein background-size: cover hinzugefügt werden.

.welcome .header{
    background-size: cover;
}

Grüße Tobias

Werner am 31. März 2021 um 06:37 Uhr

Hallo,
bin nach Anleitung vorgegangen, leider wird der Inhalt von „headerTitle“ und „headerSubtitle“ nicht angezeigt 🙁
Woran kann das liegen?

Martin am 10. Juni 2021 um 10:13 Uhr

Hallo,
vielen Dank für die tollen Anleitungen. Eine Frage hätte ich zum Design: Gibt es die Möglichkeit, die Hintergrundfarbe auch in der Konferenzansicht zu ändern? Und evtl. oben links oder rechts ein Logo während der laufenden Konferenz einzublenden?
Ich kenne mich selbst in CSS nicht so gut aus und die all.css ist doch sehr umfangreich, falls das darin geändert werden kann.
Vielen Dank und Grüße

Kai am 2. Juli 2021 um 11:54 Uhr

Hallo Tobias,

vielen Dank für die vielen tollen Beiträge 🙂
Ich habe gerade bei einem neuen Jitsi-Server das Problem, dass die Logo-Größe immer auf 140x70px zurückgesetzt wird, auch wenn die all.css entsprechend angepasst wird. Das einzubauende Logo ist sehr schmal, daher muss die Breite mindestens 300px betragen.
Im Firefox-Inspector wird angezeigt, dass die width und height des Watermarks inline gesteuert wird, nicht über die all.css. Der leftwarermark-Container ist korrekt in der all.css auf 300px width gesetzt worden.
An welcher Stelle kann das Logo generell auf andere Pixelwerte gesetzt werden?
Danke für entsprechende Tipps!

Gruß
Kai

Lothar Schilling am 21. Juli 2021 um 14:33 Uhr

Hallo Herr Scheible,

danke für Ihre präzisen Ausführungen, an die ich mich bei der Installation von Jitsi gehalten habe:
Ubuntu 20.04
Jitsi-Meet 2.0.5963

Allerdings stehe ich in einer Hinsicht vor einem Rätsel. Irgendwelche Layout-Änderungen, die ich in all.css eintrage, werden nicht übernommen. Das Problem scheinen auch andere zu haben. Irgendeine Idee? Seltsam ist auch, dass all.css als Fließtext ohne Zeilenumbrüche o.ä. dargestellt wird und deshalb sehr mühsam zu lesen ist. Irgendwelche Ideen?

Könnte es sein, dass all.css für Änderungen gar nicht mehr zuständig ist?

Danke und Gruß
Lothar Schilling

Krasimira am 6. August 2021 um 14:52 Uhr

Hallo Herr Scheible,
erstmal vielen Dank für die tollen Anleitungen.

Ich habe nur ein Problem mit der Darstellung der Datenschutz und Impressum. Sobald ich den Card Container auf disable:none umstelle, verschwindet die Leiste.

Und auch das Fixieren der Leiste am unteren Rand funktioniert nicht richtig. Irgendwas mache ich falsch, aber was?

Vielen Dank und Grüße

Raimund Weiss am 2. September 2021 um 13:18 Uhr

Guten Tag,

danke für die guten Anleitungen. Danach habe ich einen Jitsi Meet-Server plus Grafana installiert (neueste Versionen). Funktioniert ausgezeichnet.

Was mir beim Anpassen des Layout auffällt und das sehe ich auch bei Ihrer Jitsi-Meet-Instanz: Ein paar Zehntel Sekunden beim Aufrufen der Website erscheint „Jitsi Meet Secure and high quality Meetings“. Erst dann wird die individuelle Schrift sichtbar.
Abhängig von der Auslastung des Servers kann das auch mal eine Sekunde dauern, bis die eigene Beschriftung erscheint.

Lässt sich das irgendwie ändern? Scheinbar steht in irgendeiner Datei noch die originale Beschriftung. Oder holt er sich das von der Jitsi-Meet-Seite?

Danke.

Raimund

Tobias am 5. September 2021 um 19:06 Uhr

Hallo Raimund,
versuch mal den Eintrag in der main.json anzupassen. Als erstes werden die Standwerte geladen und danach erst die Sprachdatei. Sonst, scheint es nirgends vor zukommen.
Grüße Tobias

Raimund Weiss am 7. September 2021 um 08:41 Uhr

Hi Tobias,

hab alle drei Dateien mal angepasst und auch neu gestartet. Ebenso den Cache des Browsers gelöscht. Hat aber nichts gebracht.
Nicht wirklich schlimm, es hat mich nur gewundert, woher es kommt.
Danke.

Gruß, Raimund

Timo am 27. September 2021 um 21:26 Uhr

Hallo Zusammen,

Ich Kämpfe gerade mit dem Hintergrund in einer Docker Umgebung und wollte fragen ob du eine Idee hast wie ich deine Anleitung auf meine Docker Umgebe ableiten lässt.
Meine Transferleistung reicht dazu nicht 😅.

Viele Grüße
Timo

Tobias am 1. Oktober 2021 um 17:34 Uhr

Hallo Timo,
in einer Docker Umgebung habe ich das bisher auch nicht nicht gemacht.
Grüße Tobias

Artur am 9. März 2022 um 12:47 Uhr

Hallo Tobias,
danke für die ganzen wertvollen Tipps!
Bezüglich der virtuellen Hintergrundbilder kann man ja seine eigenen Bilder hier hinterlegen:
/usr/share/jitsi-meet/images/virtual-background\

Das funktioniert alles soweit gut, allerdings steht bei der Auswahl des Bildes, wenn man mit der Maus über das Bild hält, noch der alte Name wie „Strand“, „Berg“, „Wald“ etc.
Wo kann man das anpassen?
Google konnte mir da nicht weiterhelfen.

Gruß Artur

Tobias am 19. März 2022 um 10:18 Uhr

Hallo Artur,
in der Datei VirtualBackgroundDialog.js können auch die Bezeichnungen konfiguriert werden.
Grüße Tobias

Rainer Mohnhaupt am 16. Mai 2022 um 18:23 Uhr

Guten Tag Tobias,
vielen Dank für die tollen Jitsi Anleitugen.
Wie wird der App Banner (Google, Ios etc) auf der Startseite abgeschaltet.
Auf deiner Webseite: https://scheible.it ist das nicht vorhandent.
Vielen Dank für einen Tip
Grüße Rainer

Tobias am 16. Mai 2022 um 20:57 Uhr

Hallo Rainer,
schau dir mal den Artikel Datenschutzfreundliche Konfiguration von Jitsi Meet an.
Grüße, Tobias

Ingo am 17. Januar 2024 um 16:22 Uhr

Moin Tobias,
Dank für die tollen Anleitungen.
Gibt es eigentlich eine Möglichkeit, die E-Mail Einladung anzupassen?
Ich habe einfach nichts gefunden, wo ich eine Vorlage ändern oder erstellen kann.
Gruß Ingo

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.