Customizing interface to always show names (almost done - need help)


I am trying for days complete a customize in my local jitsi. I want the names will be always visible during meetings (with or without camera).

After a long search and inspired by this topic i was able to display names changing a few things in my css.

I am definitly not a css expert, but i could see when i choose a camera to be on the “full screen”, there are no parameters/class/anything in css able to call the username.

Here are my changes i made in my css, i would love if some webdesigner, developer or someone with CSS expertise could help. Im trying to display the name in the full screen too.
The comented lines are from the original css file.

#alwaysOnTop .displayname,
.videocontainer .displayname,
.videocontainer .editdisplayname {
	display: inline-block;
	position: absolute;
	/* left: 10%;
	width: 80%;
	top: 50%; */
	left: 2%;	
bottom: 10%;
	background-color: #bf21175c;

	-moz-transform: translateY(-40%);
	-ms-transform: translateY(-40%);
	-webkit-transform: translateY(-40%);
	-o-transform: translateY(-40%);
	transform: translateY(-40%);
	color: #fff;
	text-align: center;
	text-overflow: ellipsis;
	/* font-size: 12px;
	font-weight: 100; */
	font-size: 18px;
font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	line-height: 22px;
	z-index: 2

.display-video .displayNameContainer {
	/* visibility: hidden */
	visibility: visible

.display-name-on-video .avatar-container {
	/* visibility: hidden */
	visibility: visible

.display-avatar-only .displayNameContainer {
	/* visibility: hidden */
	visibility: visible	

Here is an exmaple from my local jitsi.
Up - full screen dont show usernames :frowning:
Down - tile view show everyone names as i customize in css



I would really love if someone share a few expetise here :smiley:
Please dont be shy !

I tried editing my all.css it didn’t seem to work

could you please give me the file path?


thanks I’m working on it I have some issues with the sizing though any help?

edit as i posted and it will be fine.

see the #alwaysontop section

okay, I’ve fixed it by changing the posistions to “auto” but It’s no-longer peristent

still the issue

Hello, i am happy i made this topic usefull for somone else, but i opened this topic looking for help, its not a tutorial (at least not yet!)

Please be advised that i am not a developer, im here looking for making my jitsi better, like you.

I am not a css expert, i just made changes in the original css. I supose you made too much changes in yours, or you are doing something wrong.
There is no need to change positions to “auto”, and its just a small part of entire css, there are 4000+ lines and they should all stay there!

After you change css, you have to leave and join your conference again (i sugest you also use ctrol + f5 to force refresh )

1 Like

Again, i request some expert css person here! Or some developer, please give me a guidance where i could look to made this changes.

k thanks!

This is my current all.css file. You can try with this, but i strongly recommend you update your own css to avoid some mistakes.

After you upgrade your jitsi, this changes have to be done again!

all.css.txt (150.7 KB)

while I can’t really help you for now, I have just 2 observations

  • changing all.css is not considered the best option; if you can it may be interesting to search in the body.html hack.
  • for your specific problem, I think that the difficulty is that the name is in the filmstrip, that is in another container. You would have to find in the filmstrip the vignette with the class VideoContainerFocused and somehow extract the value of the displayname in the displayNameContainer to display it in the VideoContainer.

For people wondering how one can know that, it’s with the browser debugger, select the Elements tabs, right click the item (if possible) and click inspect.

I don’t know if this is even possible with css. It’s very above my skills anyway. For the possibility of doing that I’d advise of asking if this kind of feat is possible to css wizards (no idea where I don’t frequent them). Probably it’s not so it would put you out of your misery at least.

Thansk for sharing it.
I saw the body.html post, its in my roadmap. I just applyed and made a copy of my changes to make them permanent customizing my own css.

About the inspect, its how i found the names and propertyes. In google/firefox its possible to change “in use” and see what happens when i change css parameters.

Find that specific element tabs its exactly my issue… As i saw, there is no div in the “full screen”, only in the small ones displayed in tile view. I have no idea where and how i add this, thats why i came here :smiley:

For more manageable test environment

  • create a custom css file, for example /usr/share/jitsi-meet/css/custom-displayname.css
.display-video .displayNameContainer {
  visibility: visible

.display-name-on-video .avatar-container {
  visibility: visible

.display-avatar-only .displayNameContainer {
  visibility: visible
  • Add a stylesheet line to /usr/share/jitsi-meet/index.html
    <link rel="stylesheet" href="css/all.css?v=4466">
    <link rel="stylesheet" href="css/custom-displayname.css?v=1">
    <link rel="manifest" href="static/pwa/manifest.json">

I have just read the body.html post. I think this is better than editing index.hml