Browser Sources CSS stopped working.

[RatteCool]

I've been using reactive images for my streams for several years, so you can see who's speaking. But this stopped working since mid december. I've already asked the Discord Support if there is any setting that prevents OBS from accessing Discord. They told me i have a problem with a third-party application and i should asked the OBS Support.

In the attach files there are two images:
The first one is my general browser source
and the second picture is the CSS code which doesn't work anymore.
The URL still works perfectly.
Its about the CSS Code: it seems that OBS doesn't have access to these links.
I usually upload these pictures to a private chat on Discord, then copy the link and then paste it into these "(Photo Links from Discord)". And then you always saw the selected pictures in the stream as an avatar. As I said, this randomaly stopped working.
I even updatet my OBS, but it is still not working. What can i do? Is the CSS Code just wrong? Or is there a option that i need to turn off or on?

If you need more information, be free to ask ^^

 

[AntCerka]

This should work for you, just put your Discord ID (in both places!) and your two URLs. If you want the bounce animation and brightness stuff you can copy paste from your existing code. These styles will force whatever image you use to scale down to the browser source size. Feel free to ask any questions.

 

[KnyghtLyght]

I tried your fix but unfortunately I'm still having issues.
I've tried
img.Voice_avatar__htiqH:not([src*="userID"]) { display:none; }

```
body {
--bounce-height: 10px;
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}

img.Voice_avatar__htiqH {
content: url(https://cdn.discordapp.com/attachme...049008773773148210/Chester_Curd_Discord.png);
height: auto !important;
width: auto !important;
border-radius: 0% !important;
border: none;
margin: 0;
padding: 0;
filter: brightness(50%);
}

img.Voice_avatarSpeaking__lE\+4m {
content: url(https://cdn.discordapp.com/attachme...049008773773148210/Chester_Curd_Discord.png);
border-color: rgba(0,0,0,0) !important;
position: relative;
animation-name: speak-now;
animation-duration: 1s;
animation-fill-mode: forwards;
filter: brightness(100%);
}

@keyframes speak-now {
0% { bottom: 0px; }
15% { bottom: var(--bounce-height); }
30% { bottom: 0px; }
}

li.Voice_voiceState__OCoZh{
position: absolute;
top: var(--bounce-height);
left: 0;
}

div.Voice_user__8fGwX{ position: absolute; left:40%; bottom:5%; }

span.Voice_name__TALd9 { display: none; }
```

and

```
/*User*/ img:not([src*='UserID']), img:not([src*='UserID']) + div { display:none; }
/*Avatar*/ img[class*="avatar"] { content:url("https://cdn.discordapp.com/attachme.../1049008773773148210/Chester_Curd_Discord.png"); }
/*Flex Set*/ html, body, img, div, span, ul, li { display:flex; }
/*Center Image*/ html { height:100%; justify-content:center; }
/*Hide Scrollbars*/ body { overflow:hidden; }
/*List CSS*/ ul[class*="voiceStates"] { padding-inline:0; margin-block:0; margin-top: 5px; }
/*List Item CSS*/ li[class*="voiceState"] { flex-direction:column; align-items:center; margin:0; height:unset; }
/*Avatar CSS*/ img[class*="avatar"] { width:100%; height:auto; border:0; border-radius:0; margin:0; float:unset; filter:brightness(50%); transition: all 0.2s ease-in-out; }
/*Speaking CSS*/ img[class*="avatarSpeaking"] { position:relative; animation:speak-now 0.2s; filter:brightness(95%); }
/*Username CSS*/ div[class*="user"] {position:absolute; text-align:center; padding:0; bottom:0;} span[class*="name"] { margin-bottom: 0.5em; }
/*Animation*/ @keyframes speak-now { 50%{ bottom:3px; } }
```

The base streamKit link works fine but for some reason none of the formatting I've tried will display anything.
Did discord change something again or is there something I'm missing?

Thank you!

 

[AntCerka]

I tried your fix but unfortunately I'm still having issues.
I've tried
img.Voice_avatar__htiqH:not([src*="userID"]) { display:none; }

```
body {
--bounce-height: 10px;
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}

img.Voice_avatar__htiqH {
content: url(https://cdn.discordapp.com/attachme...049008773773148210/Chester_Curd_Discord.png);
height: auto !important;
width: auto !important;
border-radius: 0% !important;
border: none;
margin: 0;
padding: 0;
filter: brightness(50%);
}

img.Voice_avatarSpeaking__lE\+4m {
content: url(https://cdn.discordapp.com/attachme...049008773773148210/Chester_Curd_Discord.png);
border-color: rgba(0,0,0,0) !important;
position: relative;
animation-name: speak-now;
animation-duration: 1s;
animation-fill-mode: forwards;
filter: brightness(100%);
}

@keyframes speak-now {
0% { bottom: 0px; }
15% { bottom: var(--bounce-height); }
30% { bottom: 0px; }
}

li.Voice_voiceState__OCoZh{
position: absolute;
top: var(--bounce-height);
left: 0;
}

div.Voice_user__8fGwX{ position: absolute; left:40%; bottom:5%; }

span.Voice_name__TALd9 { display: none; }
```

and

```
/*User*/ img:not([src*='UserID']), img:not([src*='UserID']) + div { display:none; }
/*Avatar*/ img[class*="avatar"] { content:url("https://cdn.discordapp.com/attachme.../1049008773773148210/Chester_Curd_Discord.png"); }
/*Flex Set*/ html, body, img, div, span, ul, li { display:flex; }
/*Center Image*/ html { height:100%; justify-content:center; }
/*Hide Scrollbars*/ body { overflow:hidden; }
/*List CSS*/ ul[class*="voiceStates"] { padding-inline:0; margin-block:0; margin-top: 5px; }
/*List Item CSS*/ li[class*="voiceState"] { flex-direction:column; align-items:center; margin:0; height:unset; }
/*Avatar CSS*/ img[class*="avatar"] { width:100%; height:auto; border:0; border-radius:0; margin:0; float:unset; filter:brightness(50%); transition: all 0.2s ease-in-out; }
/*Speaking CSS*/ img[class*="avatarSpeaking"] { position:relative; animation:speak-now 0.2s; filter:brightness(95%); }
/*Username CSS*/ div[class*="user"] {position:absolute; text-align:center; padding:0; bottom:0;} span[class*="name"] { margin-bottom: 0.5em; }
/*Animation*/ @keyframes speak-now { 50%{ bottom:3px; } }
```

The base streamKit link works fine but for some reason none of the formatting I've tried will display anything.
Did discord change something again or is there something I'm missing?

Thank you!

okay so I think the first one looks fine but add "display: block;" to both groups that have your urls. otherwise use the code I posted earlier, I know it works with the current OBS because I just checked. Since this looks like it is just for one person, you can also just use "position: fixed; bottom: 0;" (and "left: 0;" if you need it to hang left too) instead of the relatives and absolutes you have in there.

Lemme know if that doesn't work for ya

 

[KnyghtLyght]

Thanks I found the problem.
Looks like the discord ID's changed? Or maybe I somehow had the wrong one.

 

[AntCerka]

Thanks I found the problem.
Looks like the discord ID's changed? Or maybe I somehow had the wrong one.

Glad to hear. Hmm I dunno about discord IDs… all of mine definitely are still the same, the issue afaik just came from discord rearranging and changing up some of the element names on the website, and so the old CSS selectors weren’t styling them anymore.