Question / Help Browser Source CSS Not Working

Whttrs

New Member
So I'm working with a 100% fresh install of OBS Studio (installed as admin, run as admin) but for the life of me only about 1/2 of the CSS that I put in the Custom CSS section works.

Specifically I am working with the Streamlabs Event List. Since I use the event list in two different scenes, I have always done common CSS in the Streamlabs Custom CSS section, and then done scene-specific CSS in OBS so they look different in both places. However, now I cannot seem to do that.

If I place my CSS on the Streamlabs website, it works. If I remove it from the Streamlabs website and instead put it in OBS, it does not work.

Specifically what I'm doing is:

.widget-EventList li:first-child {
color: #808080 !important;
}

This is to change the color of the text in the first li element. However, as I said, this only works when the CSS is put on Streamlabs' site, and does not work in OBS despite it working perfectly fine 4 days ago on my previous PC. I backed up all of my CSS from OBS before switching to my new PC and reinstalling, but for some reason it now doesn't work at all.

However, other things, like changing the body background color, etc. seem to work from the OBS Custom CSS field.

Logfile: https://obsproject.com/logs/1Kql0AE7BHvFDTFP
 
Last edited:

Whttrs

New Member
Adding a couple images of what is happening:

Code in Question:

Code:
.widget-EventList li > div:first-child {
    background: transparent  !important;
}

.widget-EventList li:first-child > div:first-child {
    background: #000000 !important;
}

.widget-EventList li:nth-child(2) > div:first-child {
    background: #808080  !important;
}

.widget-EventList li:nth-child(3) > div:first-child {
    background: #eeeeee  !important;
}

.widget-EventList li:nth-child(4) > div:first-child {
    background: #ffffff  !important;
}

When this code is placed directly into Streamlabs Custom CSS field on their website, I get the output that you see in picture 01.

When the code is take out of Streamlabs and placed instead into the Browser Source Custom CSS field, I get the output that you see in picture 02. The CSS simply doesn't work. However it -did- work in previous versions of OBS.
 

Attachments

  • 01.png
    01.png
    10 KB · Views: 167
  • 02.png
    02.png
    10.2 KB · Views: 164
Top