How to edit the Watermark CSS

I have changed the CSS in /usr/share/jitsi-meet/css/all.css, but it has no effect on the display of the page. Was this defined in the react.js, do I need to edit that? Which file?

Specifically I see the following:

.watermark {
background: #000;
transition: opacity .2s .1s,visibility .2s .1s;
visibility: visible;
}

But this is how that same class is defined in /usr/share/jitsi-meet/css/all.css

.watermark {
display: block;
position: absolute;
top: 15px !important;
width: 186px !important;
height: 324px !important;
background-size: 100% !important;
background-repeat: no-repeat;
z-index: 2
}

So I have no idea where this other class definition is coming from because the dev tools says it is coming from all.css.

1 Like
/usr/share/jitsi-meet$ sudo grep water *
interface_config.js:    DEFAULT_LOGO_URL: 'images/watermark.png',
interface_config.js:    DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.png',
interface_config.js:    SHOW_WATERMARK_FOR_GUESTS: true, // if watermark is disabled by default, it can be shown only for guests

I have the same problem. It looks like the inline css overrides the configuration in all.css.

class="watermark leftwatermark" style="background-image: url("images/watermark.png"); max-width: 140px; max-height: 70px; visibility: visible;"

When using react.js, it is temping to add all the CSS inline, but that makes customization challenging later.

Yes, MarcMichalsky, I agree, I too know how to change the watermark in interface_config.js, what I can’t do is change the dimensions of the watermark in CSS. Of course I would also want to make those dimensions responsive/adaptive at the same time. I need to know where to do that.

I never tried this but couldn’t you just replace the watermark.png with your own image (or a completely blank one)?

That isn’t what is at issue here. The watermark.png image is easy enough to change, what isn’t understood is how to change the CSS governing the display of that watermark.

I know, I was simply trying to offer a simple workaround. Use a blank watermark and it is basically not displayed as it’s not visible (unless I’m missing something).

Understood, I wanted to display a different watermark with different dimensions…

the different dimensions might not work with my workaround, that’s true…

I think I was the one who misunderstood your question, sorry about that.
This said, I don’t know where and how to reproduce your problem. If I point at the logo in Chromium and instpect, in the watermark section I see the same values as in my all.css. For what it’s worth, the other values you are posting seems to be similar to

/**
* Dialogs fade
*/
.aui-blanket {
    background: #000;
    transition: opacity 0.2s, visibility 0.2s;
    transition-delay: 0.1s;
    visibility: visible;
}

could the area be hidden somehow using Javascript at some point ?

If I right click on the watermark and click “Inspect” I see:

element {
    background-image: url("images/watermark.png");
    max-width: 140px;
    max-height: 70px;
}
.welcome .welcome-watermark .watermark.leftwatermark {
    width: 186px;
    height: 74px;
}
.leftwatermark {
    left: 32px;
    top: 32px;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
}
.watermark {
    left: 32px;
    top: 32px;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
}

If I look in /usr/share/jitsi.meet/css/all.css, I see the following as I edited it:

.watermark {
  display: block;
  position: absolute;
  top: 15px !important;
  width: 186px !important;
  height: 324px !important;
  background-size: 100% !important;
  background-repeat: no-repeat;
  z-index: 2
}

.leftwatermark {
  left: 0px;
  top: 32px;
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain
}
...
.welcome .welcome-watermark {
  height: 324px !important;
  left: 0 !important;
  position: absolute;
  width: 140px !important
}

.welcome .welcome-watermark .watermark.leftwatermark {
  width: 186px;
  height: 74px
}

...

.tile-view #remoteConnectionMessage,
.tile-view .watermark {
  z-index: 6
}
...
@media only screen and (max-width:700px) {
.watermark {
  width: 20%;
  height: 20%
}
...
}

However you look at it, all.css isn’t being honored.

this means there is likely a react.js file that I need to edit.

Turns out it was my Firefox browser that was holding onto old pages. when I switched to Firefox Developer Edition, suddenly everything displayed as I expected. Must be a switch in my Firefox browser that I can select to have Firefox always grab new pages from the source.