Web conference background color

I know this has been asked but I couldn’t find any available answer. I’ve been able to customize the login screen’s color and text but cannot find the setting anywhere for the actual conference web page background settings. That is the background color of the web page during a video conference.

Does anyone know here I can find this? is it a variable in one of the config files or is it buried int he all.css?

You can find in the css, on .tile-view #largeVideoContainer

Sure it will be in the sass, but I could not find it so I put it there with a !important so that it would take that and not another value.

actually I found it in /usr/share/jitsi-meet/interface_config.js

If you say the “DEFAULT_BACKGROUND” value, I change it but with no result, so I change it in the css file.

If you change it and it resolved, congrats!

yes, you need to refresh your browser and clear cache but it works for me

Hi @Ashcor

How did you manage to change the login screen colour and text? thanks

This will all probably be changed back if you upgrade the app and this isn’t the completely correct way to customize the application but here’s what I did.

Login page background color or image using CSS:

File Location: /usr/share/jitsi-meet/css/all.css

Search for “body.welcome-page”

To change the background gradient color:

  • Open the all.css file and search for “body.welcome-page”
  • find: background-image:linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%);
  • change the gradient colors as needed.

Note:
Original: linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%)

Blue: linear-gradient(-90deg,#163e7a 0,#082654 50%,#021736 100%);

To replace the gradient with a background image:

  1. Upload an 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;

Login page text:

/usr/share/jitsi-meet/libs/app.bundle.min.js

as a root or sudo user

Search for the content you want to replace.

You can just search for “Secure, fully” you will see it with other content as on the screen.

You do the same thing to change description in the same file by searching for something like “Go ahead” you will see other text.

Made your modification, save and preview in browser.

Note Chrome might still be showing the same thing as previous, so you will need to clear cache to see the change in chrome browser.

Login Page Logo

Replace /usr/share/jitsi-meet/images/watermark.png with new image.

1 Like

I’ll add to this…

Add height:100% to support larger screen sizes.

.welcome {
background-image: url(/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
height: 100%;
}

1 Like