[Solved] Changing Frontend UI

I am confused, as I see conflicting points in this issue, is it possible to change the conference UI by moving buttons around and changing the svgs behind them?

@MarcoStine

Yes. For self-hosted implementations, you can do some modifications of the web front end by overriding CSS with your own custom jsvascript & styles.

If you build your own mobile apps then you can do all the customization you desire.

Hope this helps!

Thanks for the response! I know moving the hang up button and stuff like that is mostly done in react, is it possible for me to change the colors of the conference buttons and the UI solely from js and css?

Yes. Using CSS only, you can do this.

Something like:

.new-toolbox .toolbox-content 
.button-group-center .toolbox-button 
.toolbox-icon.toggled:hover
{
    background-color: red;
    border: 1px solid red;
}

Hey, thanks for your help. I’ve managed to change most of the UI to what I want it to. However, I was wondering if there was a way to move the hang up button to the top, for example. After a lot of searching and reading posts, I can’t find the code to do that.

I think that may be a bit more of a challenge.

First the bottom toolbar auto hides. So you would first need to disable that.

Then use Chrome and right click on the end call button to inspect it. Then copy the CSS path and paste it your CSS fille and add an override style for position to be absolute or fixed. Then set top to 100px (play with it until it’s where you want it)

Considering the conference duration, and room name is up top, I am not sure how good it will look but it may be worth playing with.