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.

8 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.

1 Like

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

To change the description as well, you need to add the following lines to the aforementioned custom.css

.welcome .header .header-text-description { display:none !important }
.welcome .header .header-text:after{ content:'this is the new description'; color:#fff; font-size:1rem; font-weight:400; line-height:24px; margin-bottom:20px; }
1 Like

I followed these instructions but I was unable to change the initial text block yet. The localized text (in german) is either not touched at all or I get the english text instead plus some invalid white space in the head.

Question: do we need a full html code in the body.html to replace the default text or not, currently I use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>meet.netzwissen.de</title>
  <link rel="stylesheet" type="text/css" title="custom stylesheet" href="css/custom.css?v=1">
</head>
<body>
  <div id="root"></div>
  <script src="custom.js?v=1" type="text/javascript"></script>

  Sichere und private Videokonferenzen, ohne versteckte Datensammelei.
  Jitsi Meet ist Open Source Software mit Server-Hosting in Deutschland.
  Funktioniert direkt aus dem Browser (Firefox, Chrome/Chromium, Safari)
  und in allen Betriebssystemen (Windows, Mac, Linux, Android).

  Kontakt zur Terminplanung: xxx
  Technische Administration: xxx

  Betreiber: xxx
  Technischer Betrieb: xxx
</body>
</html>

I would need some clarification how I can change the default localized text (here in de_de) which is shown on the blue startpage. The current mixture of empty html files in /usr/share/jitsi-meet is hard to understand …

Thanks, Thommie

In custom.css:

.welcome .header .header-text-title{visibility: hidden;}
.welcome .header .header-text-title::after{content: “my system” ;visibility: visible;display: block;}
.welcome .header .header-text-subtitle{visibility:hidden;}
.welcome .header .header-text-subtitle::after{content: “the one and only” ;visibility:visible; display:block;}

It looks like that isn’t working anymore. The title and subtitle disappears but the new content doesn’t show up. @fvw

I have the newest version from 12-01-2021.

I confirm, it is not working any more with the latest release.

I think so too.
Links are not klickable in WelcomePageAdditionalCard and
WelcomePageAdditionalContent does not work at all.

It could be like this

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

.welcome .header .header-container:before { content:'Your title'; color: #fff; font-size: 2.5rem; font-weight: 500; line-height: 1.18; text-align: center}