All.CSS Customizations reverted after update

akk796 · February 3, 2022, 5:21pm

I have a Jitsi Meet instance installed via Vultr’s one click instances for my music classrooms.

I had customized the all.css based on these instructions:

"Since I installed using the quick-install guide, I can’t modify the WelcomePage.web.js file.

I actually can modify the text using CSS but I was looking for an easier way to do it.

Just in case someone wants to know, these are the steps using CSS:

nano /usr/share/jitsi-meet/css/all.css

Search for .header-text-title

Before .welcome .header .header-text-title add:

.welcome .header .header-text-title{visibility: hidden;}

Now edit the original .header-text-title

After .header-text-title add ::after

Inside the parentheses add content: ‘PUT-YOUR-TEXT-HERE’;visibility: visible;display: block;

It should look like this:

.welcome .header .header-text-title::after{content: 'PUT-YOUR-TEXT-HERE';visibility: visible;display: block;color:#fff;font-size:2........}

The you can follow the same steps to change the header-text-description"

It worked and I even made some other changes in the all.css to accommodate some customizations I wanted. After a Jitsi update though it reverted back to this:

I to create the custom background and logo I just have a folder saved somewhere that doesn’t get disturbed by updates and when there is an update I cp the images I want back to /usr/share/jitsi-meet/images and that works fine. Is there a file I can do the same thing for the text customizations on the welcome page? Then once I make the modification copy it to the external folder so it doesn’t get affected and when an update resets the customization all I need to do is copy it back?

Any help is greatly appreciated!

Freddie · February 3, 2022, 5:33pm

Those text changes are done in app.bundle.min.js which often changes with updates (particularly those that have to do with the interface). It’s not advisable to just copy over an old app.bundle.min.js. You can alternatively create a script that can run through the file and make the changes you want after updating.

damencho · February 3, 2022, 5:34pm

All modifications you can configure to be outside of jitsi-meet.

The images you can override their locations in nginx like:

github.com

jitsi/jitsi-meet/blob/63a4b106acc18f076bcc765d5f30f9ec8664406d/doc/debian/jitsi-meet/jitsi-meet.example#L58

      
        
            
            
index index.html index.htm;
            error_page 404 /static/404.html;
            
            
gzip on;
            gzip_types text/plain text/css application/javascript application/json image/x-icon application/octet-stream application/wasm;
            gzip_vary on;
            gzip_proxied no-cache no-store private expired auth;
            gzip_min_length 512;
            
            
location = /config.js {
                alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
            }
            
            
location = /external_api.js {
                alias /usr/share/jitsi-meet/libs/external_api.min.js;
            }
            
            
# ensure all static content can always be found first
            location ~ ^/(libs|css|static|images|fonts|lang|sounds|connection_optimization|.well-known)/(.*)$
            {

And serve them from a custom folder.

For the CSS you can do the same, but for fonts.html and have your own such file in a different folder. That is loaded after the CSS:

github.com

jitsi/jitsi-meet/blob/63a4b106acc18f076bcc765d5f30f9ec8664406d/index.html#L12

      
        
            <head>
              <!--#include virtual="head.html" -->
              <meta charset="utf-8">
              <meta http-equiv="content-type" content="text/html;charset=utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
              <meta name="theme-color" content="#2A3A4B">
              <!--#include virtual="base.html" -->
            
            
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
              <link rel="stylesheet" href="css/all.css">
              <!--#include virtual="fonts.html"-->
              <link rel="manifest" id="manifest-placeholder">
            
            
  <script>
                  // Dynamically generate the manifest location URL. It must be served from the document origin, and we may have
                  // the base pointing to the CDN. This way we can generate a full URL which will bypass the base.
                  document.querySelector('#manifest-placeholder').setAttribute('href', window.location.origin + '/manifest.json');
            
            
      document.addEventListener('DOMContentLoaded', () => {
                      if (!JitsiMeetJS.app) {
                          return;

And you can do your CSS overrides there, without touching all.css.

akk796 · February 3, 2022, 5:48pm

Thanks for the details! I’m not sure if there is something I’m missing. So I just figured out putting the few lines of custom code into body.html makes the adjustments I want. So I copied that to the custom folder on my server.

For the custom interface_config.js should I add that section of code highlighted to my /etc/jitsi/meet/domain.com-config.js and it’ll point to the location of my custom interface_config.js file? Then in that custom interface_config.js point the images to the custom location on my server?

Then in the index.html I can point it to a custom fonts.html location with my additions as well?

I don’t have a lot of knowledge on these things, hence why I did a vultr one click server install instead of a scratch server build. So I appreciate the help.

damencho · February 3, 2022, 6:16pm

Yep, that is possible.

index already includes fonts.html. By default it will include the one from /usr/share/jitsi-meet which is empty.

But if you add in nginx

    location = /fonts.html {
        alias /etc/jitsi/meet/fonts.html;
    }

Then index.html will use the one from /etc/jitsi/meet/fonts.html.

You can use the same technique and for body.html so the updates will not delete your changes.

akk796 · February 3, 2022, 6:57pm

Great! I updated the nginx conf file to include the custom location of my interface_config.js file and custom location of body.html. To test if the html updates corresponding with the custom file in my /etc/jitsi-custom folder I made body.html empty again. The changes reverted and aren’t taking the information from /etc/jitsi-custom/body.html

Did I miss something?

damencho · February 3, 2022, 7:02pm

I don’t understand? You don’t have any settings for body.html in your nginx config?

damencho · February 3, 2022, 7:02pm

A you have defined fonts as body ???

akk796 · February 3, 2022, 7:05pm

Sorry I fixed it from saying fonts to saying body.html I tested that after it didn’t work the first time. Yeah by default neither of those lines of code were in the nginx conf. Could this be because it is a vultr one click instance and not a docker container build?

This is the entire nginx file (except the two last lines)

damencho · February 3, 2022, 9:13pm

Nope, this is the wrong nginx config file, you need to put it in the jitsi-meet one, next to the config.js definition - the link I had posted above.

akk796 · February 4, 2022, 2:18am

I’m looking at the link and I can’t figure out where the file is on my server. The only nginx configuration I can find is in /etc/nginx here are the contents or my /usr/share/jitsi-meet and /etc/jitsi/meet and there is no nginx in either. Am I missing something. Sorry if these questions are stupid, I’m a bit lost here.

Freddie · February 4, 2022, 2:20am

The nginx file you need is:

/etc/nginx/sites-enabled/your.domain.com.conf

akk796 · February 4, 2022, 2:31am

See now I feel really dumb. Thank you so much I’ll try out the suggestions on that file!

akk796 · February 4, 2022, 3:47pm

I adjusted to code in the /etc/nginx/sites-enabled/my.domain.com.conf and reverted the customized body.html in /usr/share/jitsi-meet to be blank pointing to conf file to /etc/jitsi-custom/body.html. It didn’t end up loading it. Just kept the Jitsi header title and subtitle.

Other than the work associated with copying my custom body.html, welcome-background.png, and watermark.png files to the appropriate location after every update is there anything with that method that would break something? Considering I somehow can’t get the updates to nginx to work properly.

damencho · February 4, 2022, 4:46pm

Nope.

akk796 · February 4, 2022, 4:50pm

Thanks for all the help! I’ll continue testing and trouble shooting with the nginx config. Not sure why it wasn’t working for me but I know this kind of stuff is a lot of trial and error.

Cheers!