Add custom css templates to Jitsi

I am not a programmer and scratched my head many times how to implement this piece of css code:

On this page nothing is told where and how to implement this and even no screen shot from what is look like

You can add a custom css file to your setup.

Add the path of your custom css file into /usr/share/jitsi-meet/index.html

    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="stylesheet" href="css/all.css?v=6776">
    <link rel="stylesheet" href="css/custom.css?v=6776">

and apply your change into /usr/share/jitsi-meet/css/custom.css

.welcome .header {
  background-image: url("https://web-cdn.jitsi.net/meetjitsi_6776.3542/images/welcome-background.png");
}
1 Like

@emrah Thanks.
Have a nice day

1 Like

You can use a small trick, additionally to what @emrah advised - as index.html is rewritten on package upgrades, you can use the file head.html. It is loaded by index.html, in the head section and by default it’s empty.

Create a custom location in Nginx:

    location = /head.html {
        alias /etc/jitsi/meet/SERVERNAME-head.html;
    }

Reload Nginx and then in SERVERNAME-head.html file either add the aforementioned css external link to custom.css or directly describe your css as an internal one, with “<style></style>”. After upgrade it should be kept, because your custom file won’t be touched.

2 Likes