How to change the background color of the Welcome Page of Jitsi Meet

Hi Jitsi meet team !
I would like to know how (where) to change the color for the background of the welcome page.
Tried to find it, but did not succeed.
Nb: I have the cloned git of Jitsi and can do a rebuild of the application.
If you could give me the way :slight_smile:

Thanks for your support!

You can do that from interface_config.js file without rebuilding, just changing the value on your deployment:


Other colours are in the css under the css folder and needs building, the procedure of building the source is described in the readme of the project.

You might also be referring to gradient that is being displayed. https://github.com/jitsi/jitsi-meet/blob/8ea693616d010c508f1e397f93610a4acfc0ccee/css/_welcome_page.scss#L7, https://github.com/jitsi/jitsi-meet/blob/8ea693616d010c508f1e397f93610a4acfc0ccee/css/_variables.scss#L149.

All is ok now! Can close the topic :slight_smile:

this value change the background during a video call , author want change the blue of the welcome page, can it be done in a docker env ?

1 Like

I know it’s a old thread but if someone wants to change the background of the home page (in this example I’m using a background image) this is how I’ve got it:

  1. Uploade a image to /usr/share/jitsi-meet (background.jpg in this example)
  2. Edit /usr/share/jitsi-meet/css/all.css
  3. Find these lines (in bold the line that we’re going to change):

body.welcome-page{
background:inherit;
overflow:auto
}
.welcome{
background-image:linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%);
display:flex;

and change that line to:

background-image: url(’/background.jpg’);
background-position:center;
background-repeat:none;
background-size:cover;

That’s all. Probably that file will be overwritten in the updates but the change is very easy and can be done manually every update. Don’t know it there is a better way to do this but…it works.

1 Like

Please remember that edited or added lines inside css/html/js files will be reset after you upgrade jitsi-meet with apt upgrade jitsi-meet, as @Tasagore_Seibei says. That kind of change should be done inside the source on which you would need to rebuild.

I personally think this is worth mentioning inside the quick install manual, since it is those who install jitsi following that manual, that need this kind of information.

ref: Change Welcome Page Text after quick install

Otherwise please do not forget to create a copy of the files you modified and add the modification back to the upgraded /usr/share folders. I would not recommend to edit all.css directly. Instead I would create a new file like edit.css or something to link to that file from index.html, only if you would not clone the git repository to edit and rebuild the binaries as above.

Or just copy the files so that they have a different name, make the changes you want, and then tell nginx to serve the files from the new location.

e.g.

 location = /path/to/original/file/filename.css {
        alias /path/to/your/new/file/filename.css;
    }

2 Likes

I am using External API and DEFAULT_BACKGROUND doesnt seem to work with film-strip enabled. Also, I didn’t understand the comment above the DEFAULT_BACKGROUND. Are there any other ways to change the color?

What is the work around for this? how can i set transparent background in filmstrip only mode?

I tried changing that variable in my source files but the background is still blue. Is there any more steps?

I was able to move the css file to a different location and adapt nginx-location to point to my own css file. Some explanations can be found in How-to to setup integrated Jitsi and Jibri for dummies, my comprehensive tutorial for the beginner ( Jump to section ‘Tweaking A) Some layout changes (will not be overwritten by upgrade)’)

Of course there is a risk when a future upgrade comes with breaking changes, but I got this solved for now. (rebuilding the application is waaaay out of my depth)

Hope this helps…

This didn’t work for me

But this did (when putting the file in images folder)
background-image: url(…/images/background.jpg);

1 Like

my CSS/all.css file doesn’t have anything in it?

I am trying to change the dark grey background color on the video screen and I cannot find any way to do it. And yes, I’ve tried changing the jitsi-meet/interface_config.js configuration and it makes no difference.

Any assistance appreciated.