Customisation de la home et du layout général

Hello,

I would like to properly customize the whole Jitsi design; by that I mean I wanted the changes made not to be lost on the first update.

The idea that I had is

  1. copy and paste> cp -r / usr / share / jitsi-meet / * / var / www / custom / usr / share / jitsi-meet /
  2. modify the files present in / var / www / custom / usr / share / jitsi-meet /
  3. create a redirect in nginx.conf to fetch the added files.

Question 1: is this the right (best) way to go?
Question 2: how to do the redirect?

I read the following syntax on the framagit site:

location = /interface_config.js {
alias /var/www/jitsi-custom/interface_config.js;
}

I tried to adapt by analogy … it doesn’t work!
Any idea how to proceed?

Thank you for your feedback,

Greetings.

Christophe.

Please post in English so we can help you.

Done !
Regards,
Christophe.

Your best bet is to redirect to the ‘etc’ directory.

It’s usually good practice to put user services and data under /srv/ and user programs under /opt/. Using /usr/local/ hierarchy is also ok, but /srv/ is much cleaner.

Apart from that, technically there shouldn’t be a reason other folders to work, as long as the web server user (www-data most probably) has read access to it.

When doing such heavy customization, always have in mind that while the Jitsi upgrades won’t break them, the contrary is very much possible - they to break the newer versions of Jitsi. Even when you modify this way the static config files, it’s always a good idea to check if the syntax and the variable names haven’t changed in the newer release. When we talk about modifying the javascript files etc., that is even more important.

You have to find a middle ground between small config changes with custom locations and forking the whole project and compiling it when you have very heavy modifications to make. With a code fork you will have to compare the code diffs, merge the changes on new releases, recompile.

One small side note - you mention “la home et layout general” - for small design changes you can use the files like:
body.html
head.html

They are empty by default, you can alias them to a custom file and make all modifications there - for example add custom <style></style> definition to override the main CSS file or add custom javascript.

If the custom CSS and adding some JS is all you need, this will work perfectly and won’t be touched by upgrades.

Other good candidates for such aliasing are title.html, interface_config.js and you already have by default the config.js.

Hello,

Thanks @yasen !

If I well understand, the big changes could have an impact on future releases. It is therefore strongly advised not to embark on such customization.

I understand ! And honestly, 1) I’m not sure I’m at level 2) the actual code and layout are super clean

So, regarding soft customizations, to be sure to well understand:

if I want to customize the css, the best method:

  1. I create a custom.css file
  2. I place it in the / srv / css /
  3. I add the line link rel = “stylesheet” href = "/srv/css/custom.css "

Question : where is the best place to add this line? After the call line to the all.css file but directly in the index.html or head.html is better?

Best Regards,
Christophe.

The best place is to just use body.html, whatever is there, it will be included and loaded.
And as it’s just a separate file, you can use the /etc/jitsi/meet/ location where you already have the custom config.js.
For /srv/ - I meant if you will be deploying your own copy of jitsi; for separate files /etc/jitsi/meet/ will keep things cleaner.

so just:

location = /body.html {
    alias /etc/jitsi/meet/YOUR_DOMAIN-body.html;
}

Restart Nginx (it needs to re-read the config).

Then edit this file and add any custom CSS there. Reload / force refresh the web page - et voila! :slight_smile:

1 Like

Dear Yassen,

One more question (last one hope so :slightly_smiling_face:),

In my nginx.config file the server directive was not present in http directive.
So I added one server directive empty to add the location directive as follow :

[…]
http {
[…]
server {
location = /body.html {
alias /etc/jitsi/meet/_override-body.html;
}
}
}

Unfortunately, it does not work.
The html page call the original body.html.

Is there something I did wrong ?
Thanks a lot in advance for your feedback.

Best Regards.
Christophe.

As you want to add it after all.css better do it in plugin.head.html

1 Like

Thanks a lot !