Change all text on the greenlight home page

[Luiz Carlos Almeida Telles]

How do I edit the Greenlight home page, what is the file path to edit it. I am not an expert in programming and I do not have the resources to pay one. I am a teacher and my salary is not enough.

Attached is a screenshot

[Anand]

docker ps
*find the container ID and add it to the next code instead of xxxx
sudo docker exec -it xxxx /bin/bash

apk update
apk add nano

Edit Home page
nano /usr/src/app/app/assets/locales/en.json

Edit Title
nano /usr/src/app/app/views/layouts/application.html.erb

Edit Footer
nano /usr/src/app/app/javascript/components/shared_components/Footer.jsx

Edit Link
nano /usr/src/app/app/javascript/components/home/HomePage.jsx

exit

docker restart xxxx
sudo bbb-conf --restart

[Luiz Carlos Almeida Telles]

I followed all the steps in detail but still nothing changes.

--
You received this message because you are subscribed to the Google Groups "BigBlueButton-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bigbluebutton-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/2e0a01f8-2dec-4daa-bad0-a310cd89cb7dn%40googlegroups.com.

[Anand]

You need to go inside each file (en.json, application.html.erb, Footer.jsx, HomePage.jsx) and change its content according to your website only after you change all these files you will be able to change the greenlight homepage completely. Once you have done it you need to restart your server or at least restart bigbluebutton using bbb-conf --restart. 

[Luiz Carlos Almeida Telles]

what is the path to these files?

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/3233da35-e8f3-4a77-aa7d-d82f54cade12n%40googlegroups.com.

[Anand]

They are inside the greenlight docker container. You need to get inside the container first then only you will be able to go to that path. You can use the command I posted before to get inside the greenlight container once you are inside the container you can edit it using nano. 

[Nikola]

The biggest advantage of bigbluebutton over other distance learning platforms is the presence of an API, which allows you to integrate bigbluebutton with almost any CMS. Therefore, it is possible to change Greenlight, but not within wide limits.

чт, 18 квіт. 2024 р. о 04:03 Anand <anandch...@gmail.com> пише:

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/9db3e351-426d-46fb-a366-db7a3d94037en%40googlegroups.com.

[Luiz Carlos Almeida Telles]

You are absolutely right, but I am not a programmer and I don't know how to do that, do you know any tutorial or someone who can help me? I followed all the steps of @anand but I couldn't change the texts.

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/CA%2BQDD3xB4fhBE4WKEcGnehb9jq5z10CHqHy4-yCr%3DzMos9EVow%40mail.gmail.com.

[Anand]

Hi Luiz,

I will try to put it in more simple words all the commands are in bold and bigger letters

First, log into your terminal using SSH I suppose you know how to do that

once you are inside sign in as the root user 

sudo -i

now use the below command

docker ps

this will give you details of all the docker containers that are running inside your system that should look something like this

xxxxxxxxxxxxx   bigbluebutton/greenlight:v3   "bin/start"              6 days ago   Up 5 days   127.0.0.1:5050->4000/tcp   greenlight-v3
2454ffb3642a   redis:6.2-alpine3.17          "docker-entrypoint.s…"   6 days ago   Up 5 days   4565/tcp                   redis
ee2dcDer51fe   postgres:14.6-alpine3.17      "docker-entrypoint.s…"   6 days ago   Up 5 days   3345/tcp                   postgres

*find the container ID that you see before bigbluebutton/greenlight:v3 and add it to the code below here in the example it's going to be xxxxxxxxxxxxx for you it's going to be alphanumerical. Make sure you change the code below and hit enter.

sudo docker exec -it xxxxxxxxxxxxx/bin/bash

once you hit enter you will now be inside the docker container which has all the settings and configuration of greenlight which is the frontend for Bigbluebutton.

Now type the below commands in bold one by one.

apk update
apk add nano

Now you are all ready to edit the files using nano

Now to edit each session of the frontend page that you see in the bigbluebutton homepage just go inside each respective file below

Edit Home page (Inside the below file you will be able to change all the text you see on the home page of the bbb just change everything you want to change make sure you just change the text only)

nano /usr/src/app/app/assets/locales/en.json

Edit Title (Inside the below file you will be able to change the Title of your BBB website, Make sure you don't change anything else)

nano /usr/src/app/app/views/layouts/application.html.erb

Edit Footer (Inside the below file you will be able to change the footer, Make sure you don't change anything else)

nano /usr/src/app/app/javascript/components/shared_components/Footer.jsx

Edit Link (Inside the below file you will be able to change the link that's been mentioned inside the frontpage, Make sure you don't change anything else)

nano /usr/src/app/app/javascript/components/home/HomePage.jsx

Now after editing all the above hit exit and you will be outside the docker container.

exit

Once you are outside now restart the docker container that you edited "bigbluebutton/greenlight:v3" and replace the below code where it says xxxxxxxxxxxxx with the greenlight container ID

docker restart xxxxxxxxxxxxx

Now restart BBB using the below command and if you have done everything properly you will have successfully changed the frontend of BBB  

sudo bbb-conf --restart

Please note that this change will be undone if you update BBB or greenlight. So you will have to redo this every time you update BBB so make sure you document every step you are doing because by the time you update the next time you would have forgotten everything you did before.

And I'm sorry to say that there aren't any proper tutorials or videos and there isn't any point asking for a detailed way of doing it because people here can only guide you, as setting up bigbluebutton isn't an easy process which will take hours to set it up properly. And if you know how to set it up and edit it, I can tell you one thing you can customize almost anything inside bigbluebutton. So my advice is to try to read all the documentation that is there on their website and GitHub and search for any similar conversations here in Google Groups or GitHub to find the solutions for your problems and if there isn't any solution try to ask here and get the ideas and try to solve it yourself. You can also learn more about how Ubuntu systems and Docker containers work. 

If you still can't do it you need to get professional help. And if you are making changes inside the files make sure you do it properly or else you will break the front end of your bigbluebutton website or even your server. 

[Luiz Carlos Almeida Telles]

Thank you @anand, I finally managed to make some changes. attached screenshot, only the tab with the title I could not change, the rest I did. If you have any additional command to improve my page and my meeting app I would appreciate it very much.

[Anand]

Hi Luiz,

I just noticed that it didn't change for me too. Will look into it and let you know if I'm able to change it.

[Anand]

You need to do 2 more edits for the complete customization and once you have done the customization you can even add them to volumes in docker compose.yml so that your edits won't get updated with each greenlight update. 

The 2 more edits that need to be done are:

Edit Title ( To edit the title you need to change Bigbluebutton in both of these files)

nano /usr/src/app/app/views/layouts/application.html.erb
nano /usr/src/app/app/javascript/App.jsx

Edit Description (To edit the description edit the below file where it says description

nano /usr/src/app/config/locales/en.yml

Also, Search for Bigbluebutton and replace it with your company name, replace all that is after the semicolon

 

[Anand]

To keep the edits from getting changed to the default every time you update greenlight you follow the below steps 

replace xxxxxxxxxxxx with your docker container ID

cd greenlight-v3

mkdir custom

docker cp xxxxxxxxxxxx:/usr/src/app/app/assets/locales/en.json /root/greenlight-v3/custom/en.json

docker cp xxxxxxxxxxxx:/usr/src/app/app/views/layouts/application.html.erb /root/greenlight-v3/custom/application.html.erb

docker cp xxxxxxxxxxxx:/usr/src/app/app/javascript/App.jsx /root/greenlight-v3/custom/App.jsx

docker cp xxxxxxxxxxxx:/usr/src/app/app/javascript/components/shared_components/Footer.jsx /root/greenlight-v3/custom/Footer.jsx

docker cp xxxxxxxxxxxx:/usr/src/app/app/javascript/components/home/HomePage.jsx /root/greenlight-v3/custom/HomePage.jsx

docker cp xxxxxxxxxxxx:/usr/src/app/config/locales/en.yml /root/greenlight-v3/custom/en.yml

Now go back to the greenlight folder and edit docker-compose.yml file 

nano docker-compose.yml

Add the following lines under greenlight volumes after the storage volume

- /root/greenlight-v3/custom/en.json:/usr/src/app/app/assets/locales/en.json

- /root/greenlight-v3/custom/application.html.erb:/usr/src/app/app/views/layouts/application.html.erb

- /root/greenlight-v3/custom/App.jsx:/usr/src/app/app/javascript/App.jsx

- /root/greenlight-v3/custom/Footer.jsx:/usr/src/app/app/javascript/components/shared_components/Footer.jsx

- /root/greenlight-v3/custom/HomePage.jsx:/usr/src/app/app/javascript/components/home/HomePage.jsx

- /root/greenlight-v3/custom/en.yml:/usr/src/app/config/locales/en.yml

docker compose down

docker compose up -d

Now to update Greenlight just follow the below steps (Note: Before updating make sure you refer to the Greenlight GitHub for the above files, if there is any change to it in the latest Greenlight make the same changes to that particular file inside the custom folder.)

cd greenlight-v3
docker compose down
docker compose pull
docker compose up -d

[Luiz Carlos Almeida Telles]

Thank you very much @anand. what would be of us if it were not for people like you willing to share knowledge. I owe you this one.

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/5d09b2d6-e33f-4770-98f4-6e93cf34de59n%40googlegroups.com.

[Anand]

You are welcome Luiz :)

[Nikola]

The easiest option is BBB to use the API. Next, simply update BBB without updating Greenlight. Well, the option is proposed
Luiz.

пт, 3 трав. 2024 р. о 02:35 Anand <anandch...@gmail.com> пише:

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/f99b93a4-7e3d-4ff1-a36b-2ac21ad67686n%40googlegroups.com.

[Luiz Carlos Almeida Telles]

Thank you very much @Nikola. The problem is that I don't know anything about programming and I don't know the steps to follow. Thanks to @Anand I managed to configure the texts of Greenlight. but I know that it is possible to configure many things more as I said I do not know anything about programming, I hope someday to find a guide to configure all greenlight even add additional functions.

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/CA%2BQDD3z5XhqC_-qpvqipSh%3DThyWyMqAvj178dM%2BLYsX8Pu6wdA%40mail.gmail.com.