Color button - css dynamique

#1

Dear all,

I’m trying to customize the front design.

  1. I created a custom.css file by adding a file in / usr / share / jitsi-meet / css
  2. I created a call in the /usr/share/jitsi-meet/plugin-head.html file by adding this line: < link rel = “stylesheet” href = “css / custom.css”>
  3. I have no problem customizing the static components. However, I am unable to customize the dynamic components that are created when the page loads.

For instance, I put in my custom.css these lines :

button {
border-radius: 4px;
color: #fff;
background-color: #6cb623!important;
}

to override these in the all.css :

button {
border-radius: 4px;
color: #fff;
background-color: #44a5ff;
}

Result: all buttons are green (as you can see in the screenshot :worried.

There someting I did wrong but what ?!

Thanks in advance for your help.

Regards.
Christophe.

button-color
button-color772×506 25.1 KB

#2

Your css is too broad. Those drop-down menus also use the .button class. Consider a more complex class selector that only impacts the div those buttons are in. Use Chrome’s web inspector to help:

  1. Hover the cursor over the image and right click mouse.
  2. Select Inspect.
  3. See the highlighted image code.
  4. Right click on the highlighted code.
  5. Select Copy > Copy selector.

(Pulled from here)

#3

Hi Corby,
Thanks for your answer.
This is exactly what I do.
the class is dynamic, it is created when the page loads

.css-lhdkzp:hover {
background: rgb(179, 212, 255);
[…]
}

.css-lhdkzp {
background: rgb(76, 154, 255);
[…]
}

I cannot know in advance what the name of the class will be.
Regards,
Christophe.

#4

Yea. These class names are generated on build (by webpack) … you cannot count on them as they will change between builds/releasea. You need to see if there are other identifiers (like a combination of element depth, IDs, etc) to match the buttons you want to style.

Here is a reference for you to consider: Complex Selectors - Learn to Code Advanced HTML & CSS

#5

Thanks a lot for the link.

I found an interesting class “#button.modal-dialog-ok-button.css-lhdkzp” from which (without “.css-lhdkzp”) I presume it would be possible to control all the children…

I absolutely cannot. I tried everything I could … without success.
I am a beginner in css.

Regards,
Christophe.

#6

I just found the solution :slight_smile:

 .atlaskit-portal [role="dialog"] [id="modal-dialog-ok-button"] {
	background-color: #6cb623!important;
 }
#7

Great job! :+1:

#8