Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How can we customize CSS without making changes in JS file? #50

Open
Ronak-Makhiyaviya opened this issue Jul 27, 2022 · 2 comments
Open

How can we customize CSS without making changes in JS file? #50

Ronak-Makhiyaviya opened this issue Jul 27, 2022 · 2 comments

Comments

@Ronak-Makhiyaviya
Copy link

Hi there,

I am using Twilio video JS SDK version 2.21.1. I have integrated Twilio video room monitor feature in my project. I want to change modal CSS when it will open. So how can I customize the CSS without making any changes in JS file?
@olipyskoty
Copy link
Contributor

Hi @Ronak-Makhiyaviya, thanks for the question!

This application uses thestyled-components library for styling. Most of the CSS and styling reside in this styles.tsx file, and this theme.ts file. Any changes in these files should update the appearance of the Room Monitor.

I am not sure if I understand what you mean when you say you want to change the modal CSS when it will open. Are you referring to what the UI looks like when the Room Monitor opens? Do you mind replying with a little bit more information about what you are hoping to change? This will help us point you in the right direction 😄. Thank you!

@timmydoza
Copy link
Contributor

Hey @Ronak-Makhiyaviya!

Currently there's no public API that can be used to customize the appearance of the room monitor from its parent application. If you could give us an idea of a feature that you'd like to see, we can consider adding it to the monitor. We'd love to hear your thoughts!

In the meantime, CSS can still be used to modify the appearance of the monitor, but it is a bit hacky at the moment. When the Room Monitor is opened, it adds a new div to the <body> element, and this new div has an ID of "TwilioVideoRoomMonitorContainer". We can select this element with CSS using this ID, where we can then select different child elements to customize their appearance.

For example, if we wanted to change the color of the menu bar, we could include CSS like this in our video app:

div#TwilioVideoRoomMonitorContainer > div > div:nth-child(1) {
    background: red;
}

This will look like:
image

Unfortunately, this is hacky and brittle, and we don't really recommend this approach, but it works! Hopefully this helps, and please let us know if you have any other questions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@timmydoza @olipyskoty @Ronak-Makhiyaviya