CSS code suddenly stopped working-windows 10 - Browser source

Crypt_Craig

New Member
So i am a PNGtuber and i use a basic CSS so my model reacts ( i know there are other ways but this works best for me) and suddenly my CSS stopped functioning

li.voice-state:not([data-reactid*="283429463067328512"]) { display:none; }

.avatar {

content:url(https://cdn.discordapp.com/attachments/889256704762576956/958121834346315796/tsp1.png);

height:auto !important;

width:auto !important;

border-radius:0% !important;

filter: brightness(100%);

/*Change brightness to 100%, if you don’t want the image to dim*/

}



.speaking {

border-color:rgba(0,0,0,0) !important;

position:relative;

animation-name: speak-now;

animation-duration: 1s;

animation-fill-mode:forwards;

filter: brightness(100%);

content:url(https://cdn.discordapp.com/attachments/889256704762576956/958121834623144076/tsp2.png);

}



@keyframes speak-now {

0% { bottom:0px; }

15% { bottom:10px; }

30% { bottom:0px; }

}



li.voice-state{ position: static; }

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



body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
So this is supposed to use the Discord overlay and make my pngs switch based on whether im speaking or not and its just suddenly stopped working. there was no update to OBS that broke it, i did not change any coding. it just broke. Anyone have any clue as to why it might have stopped working so abruptly.
 

AcidShark

New Member
Hi, having this exact same issue, hoping for a resolution. Figured I'd share what I've tried to do to rectify it to just tick off a few boxes.

So far I've tried redoing the CSS, re-adding the browser source, restarting the computer itself, exiting and reopening OBS several times, uninstalling and reinstalling, and reinstalling older versions as well as the v29 beta.

It almost seems like the CSS is just being skipped over/ignored entirely.
 

AcidShark

New Member
Back again! Lots of folks have been discussing this elsewhere, apparently it was an update on Discord's end that broke things. Here's the updated CSS, I've tested it and it should work:

li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="DISCORD_ID"]{ display:block; }

img[class^="Voice_avatar"] {
content:url(IDLE_IMAGE);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(100%);
}

img[class*="Speaking"] {
content:url(ACTIVE_IMAGE);
border-color:rgba(0,0,0,0) !important;
}

li.[class^="Voice_voiceState"]{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

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

Morinoonna

New Member
Hi there! I ran into the exact same issue when I went to record yesterday. Since then I've managed to find another source code to make the reactive images work on OBS again ( https://codepen.io/kukushie/full/mdrJoqa ), however the code I used for changing the discord display bubble names is also no longer working. Does anyone know how this code should be changed to work with the new update?

span.name{
visibility: hidden;
position: relative;
}
span.name:after{
color:#ffffff;
font-size:14px;
background-color: #1e2124;
border-radius: 3px;
padding: 4px 6px;
visibility: visible;
position: absolute;
top: 0;
left: 0;
}
span.name[data-reactid=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
content: "New Display Name for Person 1";
}
span.name[data-reactid=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
content: "New Display Name for Person 2";
}
span.name[data-reactid=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
content: "New Display Name for Person 3";
}
 
Last edited:

Morinoonna

New Member
Back again! Lots of folks have been discussing this elsewhere, apparently it was an update on Discord's end that broke things. Here's the updated CSS, I've tested it and it should work:
Thanks for this code! ^^ Saving this as a back-up as well in case something else breaks in the future.
 

Tharene

New Member
Back again! Lots of folks have been discussing this elsewhere, apparently it was an update on Discord's end that broke things. Here's the updated CSS, I've tested it and it should work:
Man, this code was such a lifesaver! I've been looking everywhere for a solution ♥ Made this account just so I could thank you
 
Back again! Lots of folks have been discussing this elsewhere, apparently it was an update on Discord's end that broke things. Here's the updated CSS, I've tested it and it should work:
Thanks @AcidShark for the quick fix! There was a slight error at line 19, which is easily fixed by removing the period before the open brackets. I also modified this code to be more complete to include the bouncing animation when speaking begins:
CSS:
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="DISCORD_ID"]{ display:block; }

img[class^="Voice_avatar"] {
content:url(IDLE_IMAGE);
    height:auto !important;
    width:auto !important;
    border-radius:0% !important;
    filter: brightness(100%);
/*Change brightness to 50%, if you want the image to dim when not speaking*/
}

img[class*="Speaking"] {
content:url(ACTIVE_IMAGE);
    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:10px; }
    30% { bottom:0px; }
/*This keyframes code makes the image bounce slightly when you begin speaking using the defined speak-now animation*/
}

li[class^="Voice_voiceState"]{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
 
Hi there! I ran into the exact same issue when I went to record yesterday. Since then I've managed to find another source code to make the reactive images work on OBS again ( https://codepen.io/kukushie/full/mdrJoqa ), however the code I used for changing the discord display bubble names is also no longer working. Does anyone know how this code should be changed to work with the new update?

span.name{
visibility: hidden;
position: relative;
}
span.name:after{
color:#ffffff;
font-size:14px;
background-color: #1e2124;
border-radius: 3px;
padding: 4px 6px;
visibility: visible;
position: absolute;
top: 0;
left: 0;
}
span.name[data-reactid=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
content: "New Display Name for Person 1";
}
span.name[data-reactid=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
content: "New Display Name for Person 2";
}
span.name[data-reactid=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
content: "New Display Name for Person 3";
}
@Morinoonna the one thing that stands out to me in your code is it's using the "data-reactid" which is typically where you put the DISCORD ID. Try replacing that with either "data-reactid*" (an asterisk at the end) OR (if I go by AcidShark's code) "src*".
Potential solution 1:
CSS:
span.name{

  visibility: hidden;
  position: relative;

}

span.name:after{
  color:#ffffff;
  font-size:14px;
  background-color: #1e2124;
  border-radius: 3px;
  padding: 4px 6px;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;

}

span.name[data-reactid*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 1";

}

span.name[data-reactid*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 2";

}

span.name[data-reactid*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 3";

}

Potential Solution 2:
CSS:
span.name{
  visibility: hidden;
  position: relative;

}

span.name:after{
  color:#ffffff;
  font-size:14px;
  background-color: #1e2124;
  border-radius: 3px;
  padding: 4px 6px;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;

}

span.name[src*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 1";

}

span.name[src*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 2";

}

span.name[src*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 3";

}
Alternatively, if you're using discord stream kit overlay (https://streamkit.discord.com/overlay), you can just make a voice widget for your discord channel and turn off the "hide names" switch. Then just generate a browser source using that link for each of your friends, paste the code Acid Shark posted in custom CSS, with no alt images, updating the DISCORD ID to each of their IDs. I hope one of these works for you!
 

Morinoonna

New Member
@Morinoonna the one thing that stands out to me in your code is it's using the "data-reactid" which is typically where you put the DISCORD ID. Try replacing that with either "data-reactid*" (an asterisk at the end) OR (if I go by AcidShark's code) "src*".
Potential solution 1:
CSS:
span.name{

  visibility: hidden;
  position: relative;

}

span.name:after{
  color:#ffffff;
  font-size:14px;
  background-color: #1e2124;
  border-radius: 3px;
  padding: 4px 6px;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;

}

span.name[data-reactid*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 1";

}

span.name[data-reactid*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 2";

}

span.name[data-reactid*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 3";

}

Potential Solution 2:
CSS:
span.name{
  visibility: hidden;
  position: relative;

}

span.name:after{
  color:#ffffff;
  font-size:14px;
  background-color: #1e2124;
  border-radius: 3px;
  padding: 4px 6px;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;

}

span.name[src*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 1";

}

span.name[src*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 2";

}

span.name[src*=".0.0.0.$PASTEREACTIDHERE/=1$PASTEREACTIDHERE.$/=11.0"]:after{
  content: "New Display Name for Person 3";

}
Alternatively, if you're using discord stream kit overlay (https://streamkit.discord.com/overlay), you can just make a voice widget for your discord channel and turn off the "hide names" switch. Then just generate a browser source using that link for each of your friends, paste the code Acid Shark posted in custom CSS, with no alt images, updating the DISCORD ID to each of their IDs. I hope one of these works for you!
Hi there! I just tried both of the alternate solutions, but unfortunately neither one of them worked. =/ I'm using discord stream kit overlay voice widget as the browser source, but the CSS code I pasted before was what I was using to change what our display names were showing as when recording in OBS, that way each person had their own custom nickname showing based on whatever it was we were recording that day. Now though it's only showing the standard discord names and seems to be ignoring the code altogether. =(
 

Kyllian

New Member
Thanks @AcidShark for the quick fix! There was a slight error at line 19, which is easily fixed by removing the period before the open brackets. I also modified this code to be more complete to include the bouncing animation when speaking begins:
CSS:
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="DISCORD_ID"]{ display:block; }

img[class^="Voice_avatar"] {
content:url(IDLE_IMAGE);
    height:auto !important;
    width:auto !important;
    border-radius:0% !important;
    filter: brightness(100%);
/*Change brightness to 50%, if you want the image to dim when not speaking*/
}

img[class*="Speaking"] {
content:url(ACTIVE_IMAGE);
    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:10px; }
    30% { bottom:0px; }
/*This keyframes code makes the image bounce slightly when you begin speaking using the defined speak-now animation*/
}

li[class^="Voice_voiceState"]{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
I am using this CSS which does exactly what we need.
But when I input two voices sources, if one speaks alone, it's ok but if two people speak on the same time, one of the image is pushed down.
Cf image.
I think that one interacts with the other but I don't understand how.

Any idea?
 

Attachments

  • Capture d’écran 2022-12-27 211258.png
    Capture d’écran 2022-12-27 211258.png
    123.4 KB · Views: 36

Winter550

New Member
Hello I just found this today and when trying to set this up for a buddy during stream it wasn't working, all the ones I set up are now broken and the code doesn't work no matter what I do. Is there an alternate way to show different people in a Discord chat then this code? It feels like with Discord constantly updating this code is gonna get broken all the time
 
Top