Susanne Hembree
New Member
So, this is a bit of an extension to this thread, but about an issue that might not strictly be about the CSS code being used, but also could be? I'm not sure. Hence why I'm making it it's own thread, hopefully that's allowed. ^^;
Anyway, so for my streams I have these little guest character doodles that show who's all in call with me, but ever since - roughly December, I've been having issues with the characters moving around when they shouldn't, displacing where the characters are and making things complicated. For a demonstration as to what I mean, I put together a short video explaining the issue;
For that last bit; if there are more than 5 members in call, the character is so far down in the browser source that I can no longer adjust them so that the body can be seen on screen, but generally I want to try to get rid of the displacement all together if I can.
To go over my settings real quick, the url is using https://streamkit.discord.com/overlay
The CSS code being used is more or less what's in the aforementioned thread with slight tweaks to add a bit of a bounce effect when they're talking;
I am also using OBS version 29.0.2 if that matters at all. I don't know, but I would like help on this as this has been a bit of an annoyance the past few months. Thank you in advance! ^^
Anyway, so for my streams I have these little guest character doodles that show who's all in call with me, but ever since - roughly December, I've been having issues with the characters moving around when they shouldn't, displacing where the characters are and making things complicated. For a demonstration as to what I mean, I put together a short video explaining the issue;
For that last bit; if there are more than 5 members in call, the character is so far down in the browser source that I can no longer adjust them so that the body can be seen on screen, but generally I want to try to get rid of the displacement all together if I can.
To go over my settings real quick, the url is using https://streamkit.discord.com/overlay
| https://streamkit. discord.com/overlay/voice/[Chat]/[Room]?icon=true&online=true&logo=white&text_color=%23ffffff&text_size=14&text_outline_color=%23000000&text_outline_size=0&text_shadow_color=%23000000&text_shadow_size=0&bg_color=%231e2124&bg_opacity=0.95&bg_shadow_color=%23000000&bg_shadow_size=0&invite_code=&limit_speaking=false&small_avatars=false&hide_names=true&fade_chat=0 |
The CSS code being used is more or less what's in the aforementioned thread with slight tweaks to add a bit of a bounce effect when they're talking;
| li>img[class^="Voice_avatar"]{ display:none; } li>img[class^="Voice_avatar"][src*="[USER 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([TALKING IMAGE); position:relative; animation-name: speak-now; animation-duration: 1s; animation-fill-mode:forwards; border-color:rgba(0,0,0,0) !important; } @keyframes speak-now { 0% { bottom:0px; } 15% { bottom:10px; } 30% { bottom:0px; } } 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 also using OBS version 29.0.2 if that matters at all. I don't know, but I would like help on this as this has been a bit of an annoyance the past few months. Thank you in advance! ^^