Change Text on Initial Page (Home)

Hello,

Where can I change the Text in the initial Page?

1 Like

You can do this using CSS, if you want. See this reply Change Welcome Page Text after quick install

I will add that a much better approach using this technique is to override the CSS in your own file, not modify the all.css file. Here is how you do this.

1 - Edit the “body.html” file (It’s blank on fresh installs)
sudo vi /usr/share/jitsi-meet/body.html

_

2 - Add references to your own CSS and JS.
<script src="custom.js?v=1"></script><link rel="stylesheet" href="css/custom.css?v=1">

_

3 - Create custom.css and save it with the new styles
sudo vi /usr/share/jitsi-meet/css/custom.css
In this case you want to change the home page text:

.welcome .header .header-text-title { display:none !important }

.welcome .header .header-text:before { content:'this is a new title'; color: #fff; font-size: 2.5rem; font-weight: 500; line-height: 1.18; }

_

4 - Create custom.js and use this to put any new functions you may want.
sudo vi /usr/share/jitsi-meet/custom.js

This will work with overriding other styles, html and javascript.

3 Likes

Thank You.

Just a quick follow up: Is this method upgrade safe? Thanks

When using your our own files, like above, the only one at risk of overwriting is body.html. Upgrading will not touch the other files you created.

Use a script to update files your files after updates.

Cool thank you!

@corby

this is very nice. i need to change the welcome page and also update the description and also remove the random room names . I also want to add a link in the home page . How can i go about doing this…

Can you guide

Also for mobile i saw a function which you had created . Can you guide where i can use this

Thanks

@Naveen_Babu_Sa

I talk about the settings on the home page, here:

I am not sure what you are referencing about mobile… but this may help:

udo vi /usr/share/jitsi-meet/custom.js

@corby in this you had written a function for mobile related support . I need to understand the function need and what it does for mobile browsers

I am currently trying to fix the mobile browser view in portrait mode as some of the features don’t work or behave differently on portrait mode. The camera and microphone can’t be enabled and also alignment goes for toss m
The issue is not their in landscape mode and was a crazy behavior

Further in mobile browser some of the messages hangs once you click let’s say to mute/unmute that message stays in window

So I was looking for some solution for this and also wanted to know what the function was all about

I understand. I was simply suggesting this was one way to accomplish this. I do not have a custom.js file to share here.

I succeeded in customizing the landing page for Jitsi installed on my VPS host. I downloaded the source for Jitsi-stable from Github and installed webpack (and a cartload of related modules) with npm.

My goal was changing text on the landing page. UI text in numerous languages is found in *.json files in the lang directory. However file main.json (containing text in English) is the source from which translations are made. (I haven’t yet figured out exactly how the translation process works…)

I edited main.json to suit my installation. One tricky part is blanking out unwanted text. I found the solution to eliminating text altogether is putting " " (that’s one space between quotes) in its place. For example, change

"enterRoomTitle": "Start a new meeting",
-to-
"enterRoomTitle": " ",

To compile everything, run “make” in root directory. When it finishes upload these modified files to /usr/share/jitsi-meet on the server:

lang/main.json
libs/dial_in_info_bundle.min.js
     app.bundle.min.js
     app.bundle.min.map

Restart jitsi-meet services and the revised landing page should show in the browser.

Note that this procedure changes text only. To change styles the css has to be edited as covered in previous messages.

Anyway hope this is helpful.

The js function which was shared was addressing an issue of mobile browser. Can you guide me on the function you had shared