OBS 28+ and the Discord Streamkit
Everything seems to have broken all at once! Interestingly, the Streamkit from Discord has had its own updates in tandem with OBS 28 launching, causing a lot of parallel issues. We’ve updated the existing talksprite guide with the new selectors, so we figure it’s also an apt time to talk a bit more about CSS code and the Selectors that changed and caused all of these silly issues.
Inside of CSS, we have Styles that control how things look on a page, and so the Selectors are what receive the styling. Selectors are the building blocks where Styles are the paint, so knowing that they moved the Selectors can help explain why the customizations, our talksprites, stopped working. Using new Selectors isn’t always a situation of swapping out the old ones, since the attributes inside may change as well!
Using this new snippet, you can replace your Discord ID (which is NOT your username! Be careful to make sure streamer mode isn’t enabled, so you can copy your ID) and the other placeholder info, while leaving the “quotes” and other symbols around them:
li[class*="State"] :not(img[src*="DiscordUUID"]) { display:none; }
img[class^="Voice_avatar"]{
content:url("IdleImageURL");
height:auto !important;
width:95% !important;
border-radius:0 !important;
filter: brightness(100%);
}
img[class*="Voice_avatarSpeaking"] {
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; content:url("SpeakingImageURL");}
15% { bottom:10px; content:url("SpeakingImageURL"); }
30% { bottom:0px; content:url("SpeakingImageURL"); }
100% { bottom:0px; content:url("SpeakingImageURL"); }
}
/* if not using image keyframe, remove content:url(); */
il[class*="State"]{ position: static; text-align: center;}
div[class*="user"]{ display: none; }
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }For a fuller tutorial, you can read more in our first post about PNGtubers here, and use the generator to make your code. For a closing tip, Procreate is a great program for making a PNGtuber since it preserves the size of your art layers, which will help you with aligning the character in its idle and talking states– if you don’t have the same image size or positioning, your talksprite will appear to jump around!
We hope you’re inspired, and if you ever need to ask questions then find us in Grif’s Discord and share your stuff.
