YES!! This is EXACTLY what I've been searching for for idk how long. I know the exact youtube tutorial you're referring to and I thought all was lost since I guess they took it down and I lost my obs settings. So thank you so much for making this tutorial, it's like the name of a song I could always hum but never know the name of was suddenly revealed to me. Thank you!!
UPDATE (1/17/2023): i've been receiving comments regarding the CSS code and have been looking into a solution to this. i've had a couple of friends also help me out with updating the CSS so that it works on OBS. there currently is no solution to the coding at the moment due to responsibilities outside of my online content, at the moment. i will be looking into it periodically and hopefully post an updated video + solution within the next month. i'm so sorry for the delays! if anyone has updates on this, i would appreciate it so much. thank you for your patience, and happy new year! UPDATE 1/29/2022: thank you to @schmitzkatze! there is a known bug where the streamkit url would still show the name(s) of the discord user the PNG is linked to, TO FIX THIS: capitalize the "T" in "hide_names=true" in the streamkit url UPDATE (12/7/2021): i edited the code so there are no extra spaces that would cause an issue in the code. use the revised code and it should work! originally i put spaces to show where to paste everything but it caused more issues than help, so i changed it. you must be in the channel and unmuted for it to work, takes a second or two to pop up once you are in the channel. eventually i'd like to make a code generator in the future!! so that will be in the works when my other work slows down, thank you! - jo
Is there a new new fix? Because I’ve set this up last year and it worked for me and all my friends but it just doesn’t anymore? I’ve tried everything including using the correct image size and the capitol T :(
@@SuperSkip64 just updated my pinned comment for future viewers, but there currently is no updated code at the moment. i heard rolling back the OBS may work for the time being, since the CSS should be working with the older OBS versions. thank you so much for bringing this to my attention!
@@daijojobu I had a feeling it was an update on OBSs end or something with streamerkit, but I really appreciate you following up! I couldn’t find anyone else that would know anything on this subject matter haha. Look forward to info either way 😄
Thank you for this, but unfortunately as of late the CSS structure for OBS (possibly v28 and higher) has changed and the CSS that you linked to no longer works. The CSS now requires the img[class definition. For example, li.voice-state:not([data-reactid*={USER ID}"]) { display:none; } is now li>img[class^="Voice_avatar"]{ display:none; } li>img[class^="Voice_avatar"][src*="{USER ID}"]{ display:block; } and .avatar { has been changed to img[class^="Voice_avatar"] { There are other changes, but it's clear that there have been recent changes to newer versions of OBS that no longer let this video work as listed.
You seriously need more subs, this was straight forward and easy to follow, thank you so much! I'm just wondering, how do you show your screen thing on obs? I just see the png and I dont have any idea on how to use obs lol
THANK YOU SO MUCH! I've been looking for this tutorial for a few days now but I'm only seeing the basic one then RUclips recommended this to me! SUBSCRIBED TOO!!!
Thank you so so much!!! :)))) You were perfectly concise and very demonstrative!!! :)))) Sadly, the code didn't quite work, but when I amended the changes that Dying Breath in the comments said (thank you to them as well!), it worked perfectly!!!! Thank you thank you! :))))))
One problem with this is that the image is mounted to where the person would be on the normal version of this widget without any custom CSS. that means if more people were to join and it sorts them alphabetically above that person, the image gets pushed down.
I'm a month late but hopefully this still helps. Replace the following: li.voice-state:not([data-reactid*="X"]) { display:none; } WITH THIS ⬇ li>img[class^="Voice_avatar"]{ display:none; } li>img[class^="Voice_avatar"][src*="X"]{ display:block; } And remember to copy your Discord ID and replace the X with the ID. Then, you'll also need to replace the following: .avatar ➡ img[class^="Voice_avatar"] .speaking ➡ img[class*="Speaking"] li.voice-state ➡ li.[class^="Voice_voiceState"]
I'm sorry for leaving a comment asking for help in a 2 month old video, and it's okay if you don't reply. I just cant seem to make it work, my picture appears and everything, but only the idle image, and it doesn't change to the talking image when I talk in the voice chat. (I've checked if i had accidentally posted the same link twice but nope, I did paste the correct image links in their respective spaces) that's why I'm asking for help, if anyone knows how to solve it, since I couldn't figure out first. thank you for the video tho it was very helpful for everything else ^^ ♡
I appreciated the tutorial. I got it to work but the image is super small and no matter what i do i cant seem to resize it right. It seems to disappear on me. Any advice?
for some reason it didnt work for me and my discord profile picture remained instead of changing to my desired picture,,, idk what i did wrong but im pretty sure i followed each step???
i managed to get it work for a while, but now for some reason the image wont show and the discord name was still on even tho the hide names was ticked on. about the image thing, i tried clicking on the image first and THEN right clicking to copy the link that way, but it would crop out a part of the image. got something for that?
if the file is too big, you need to resize it to something more reasonable o: i normally use 1200x1200 PNGs, so try that instead and lower the resolution/DPI so the file isn't exceeding 25MB, there's no reason for picture files to be that big~
i cant get the custom css to work, ive quadruple checked everything is correct and obs is still just displaying the discord chat bubbles on the browser source
It’s cuts off my drawings and only shows a small corner of my drawings in stream labs is there a specific size dimension for the drawing that it has to be or a specific code I need to had for it to not get cut off ? 😭
My server us up and running fine, but everytime I try to install it for OBS it says it can't connect to the discord client - please make sure you have it installed.
I am not sure what I am doing wrong but mine just shows my bubble from discord no matter what... I followed all the steps: went into developer, I am an admin, I got the code from the kit, made the browser source, updated the code with the links, added the ID, changed in the browser source but no luck. anyone know what the issue could be?
i actually tried on stream labs but that put up the same thing which is just the discord profile pic that doesn't want to change it if you have any tips on that plz let me know so i can work on that later
Hi, I’m doing this right now and it didn’t work? The screen just goes Black. I’m not sure if it’s changed since this video is a year old but if you could help me out that would be great. My camera doesn’t work on my laptop so could that be the problem??
I believe the code is outdated. If you're having trouble getting the PNG to show on OBS, replace the following: li.voice-state:not([data-reactid*="X"]) { display:none; } WITH THIS ⬇ li>img[class^="Voice_avatar"]{ display:none; } li>img[class^="Voice_avatar"][src*="X"]{ display:block; } And remember to copy your Discord ID and replace the X with the ID. Then, you'll also need to replace the following: .avatar ➡ img[class^="Voice_avatar"] .speaking ➡ img[class*="Speaking"] li.voice-state ➡ li.[class^="Voice_voiceState"]
you're supposed to take out the spaces, is that what you meant? if not, make sure to take out the single space before and after (ex. " DISCORD ID " should now look like "12345678")
this was an issue that i had with another person and we solved it that way, if it doesn't work; id need more context as to which part isn't working so i can work to give you a solution ^^
hi! when creating your PNG, you need to make sure your picture size are the same dimensions. example would be that both my idle and my talking files are 1000 px by 1000 px. if your files are different dimensions, they won't have a smooth transition
i cant open the css and i had to download it then i still cant figure out what i need to do for there then i had to open obs and i cant find where you opened the chibi file in obs so im really confused.
hi hello! i'm gonna see if i can find a find around this ^^ i appreciate the heads up! as soon as i find something; i'll comment here/have an update video up!
@@daijojobu Found the Problem ... in the URL line you have to use True with big T at the "hide_names=True" command , then it works :> (the URL you get from Streamkit)
YES!! This is EXACTLY what I've been searching for for idk how long. I know the exact youtube tutorial you're referring to and I thought all was lost since I guess they took it down and I lost my obs settings. So thank you so much for making this tutorial, it's like the name of a song I could always hum but never know the name of was suddenly revealed to me. Thank you!!
UPDATE (1/17/2023):
i've been receiving comments regarding the CSS code and have been looking into a solution to this. i've had a couple of friends also help me out with updating the CSS so that it works on OBS. there currently is no solution to the coding at the moment due to responsibilities outside of my online content, at the moment. i will be looking into it periodically and hopefully post an updated video + solution within the next month. i'm so sorry for the delays! if anyone has updates on this, i would appreciate it so much. thank you for your patience, and happy new year!
UPDATE 1/29/2022: thank you to @schmitzkatze! there is a known bug where the streamkit url would still show the name(s) of the discord user the PNG is linked to, TO FIX THIS: capitalize the "T" in "hide_names=true" in the streamkit url
UPDATE (12/7/2021): i edited the code so there are no extra spaces that would cause an issue in the code. use the revised code and it should work! originally i put spaces to show where to paste everything but it caused more issues than help, so i changed it. you must be in the channel and unmuted for it to work, takes a second or two to pop up once you are in the channel.
eventually i'd like to make a code generator in the future!! so that will be in the works when my other work slows down, thank you! - jo
Is there a new new fix? Because I’ve set this up last year and it worked for me and all my friends but it just doesn’t anymore? I’ve tried everything including using the correct image size and the capitol T :(
@@SuperSkip64 just updated my pinned comment for future viewers, but there currently is no updated code at the moment. i heard rolling back the OBS may work for the time being, since the CSS should be working with the older OBS versions. thank you so much for bringing this to my attention!
@@daijojobu I had a feeling it was an update on OBSs end or something with streamerkit, but I really appreciate you following up! I couldn’t find anyone else that would know anything on this subject matter haha. Look forward to info either way 😄
Thank you this video was perfect for exactly what I was looking for! Really nicely edited and I'm grateful you walked it through so well!
It's working for you? It used to work for me but no longer :(
@@SuperSkip64 yeah dud same here
Such a great tutorial! Thank you so much :)
my pleasure!! i wish you the best in your PNGtubing journey!! ^^
@@daijojobu this world doesn’t need you
Jk
this worked perfectly for me and I'm really thankful for this video and the tutorial and the code, i really really appreciate it 💗
Thank you for this, but unfortunately as of late the CSS structure for OBS (possibly v28 and higher) has changed and the CSS that you linked to no longer works. The CSS now requires the img[class definition. For example,
li.voice-state:not([data-reactid*={USER ID}"]) { display:none; }
is now
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="{USER ID}"]{ display:block; }
and
.avatar {
has been changed to
img[class^="Voice_avatar"] {
There are other changes, but it's clear that there have been recent changes to newer versions of OBS that no longer let this video work as listed.
Do you know where I can find the completely new code that I can just copy paste? I’m super new to coding so I wouldn’t know what to change 😅
have u found the new code?
tysm u saved me!
the width and hight are the main problem. my png wont appear its like invisible does anyone have any width and hight advise or anything??
so real (yes ik this is a year ago but still), i'm still guessing on how to do that and have NO clue how to make it visible
I watched only 4 seconds of this video and my brain is already fried 💀💀☠️
You seriously need more subs, this was straight forward and easy to follow, thank you so much!
I'm just wondering, how do you show your screen thing on obs? I just see the png and I dont have any idea on how to use obs lol
Concise and straight to the point. I love it
THANK YOU SO MUCH! I've been looking for this tutorial for a few days now but I'm only seeing the basic one then RUclips recommended this to me! SUBSCRIBED TOO!!!
This is amazing! thanks god you did this tutorial! this was easy to understand and not confuse like the other ones i watched! you deserve more sub!
Thank you so so much!!! :)))) You were perfectly concise and very demonstrative!!! :)))) Sadly, the code didn't quite work, but when I amended the changes that Dying Breath in the comments said (thank you to them as well!), it worked perfectly!!!! Thank you thank you! :))))))
hi i followed ur tutorial but it still shows the discord bubbles instead of my pngs. pls help im confused :(
this is a good tutorial. you deserve more then this. 👍👍👍
i FINALLY did it! thank you again Jojo super easy and super thorough
Very nice tutorial thank you!
Will the Discord stream kit help with the group link? The individual link works fine when I try to add my cousins avatar it doesn't work
its not working for me, i wish i could give more context but I truly dont know what i am doing wrong
One problem with this is that the image is mounted to where the person would be on the normal version of this widget without any custom CSS. that means if more people were to join and it sorts them alphabetically above that person, the image gets pushed down.
Thank you so much for this tutorial! :D
I have the issue that it doesnt show m,y pnc but it shows that im in call as a small circle
for multiple people will you have to do this with each individually?
Thank you for this tutorial!
Holly crap didn't know I can apply my coding into this well css isn't really code but still could make so many css templates
This was helpful but one thing the chat thing was working but the png tuber thing wasnt
What program do you use for your modelt on this video it is sooo cute
hi thanks for the tutorial, think sadly the css doesnt work anymore? browser source only shows my discord pfp
Same I have no idea why :(
I'm a month late but hopefully this still helps. Replace the following:
li.voice-state:not([data-reactid*="X"]) { display:none; }
WITH THIS ⬇
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="X"]{ display:block; }
And remember to copy your Discord ID and replace the X with the ID.
Then, you'll also need to replace the following:
.avatar ➡ img[class^="Voice_avatar"]
.speaking ➡ img[class*="Speaking"]
li.voice-state ➡ li.[class^="Voice_voiceState"]
@@dyingbreathlol thanks it works!
@@HelloThere_m1 good to hear, happy to help a fellow mel enjoyer
how do u do the css thing?
tysm it helps a lot ^-^
keep it up
anytime!!
Is there any way to add animations? Like more than 1 frame? And can you create animations for joining and leaving the vc?
thank you! great tutorial
everything is working perfectly, it's just that the screen is only cropping the top left, any way to fix that?
Make the charector small in the canvas then add to obs make the source like BIG, not too big but yeah BIG
I'm sorry for leaving a comment asking for help in a 2 month old video, and it's okay if you don't reply. I just cant seem to make it work, my picture appears and everything, but only the idle image, and it doesn't change to the talking image when I talk in the voice chat. (I've checked if i had accidentally posted the same link twice but nope, I did paste the correct image links in their respective spaces)
that's why I'm asking for help, if anyone knows how to solve it, since I couldn't figure out first. thank you for the video tho it was very helpful for everything else ^^ ♡
yeah, it happend with me as well idek what to do
same here, i asked as well but they haven't answered :P
Every time I try to do it it says “CAN'T CONNECT TO THE DISCORD CLIENT”☹️
out of curiosity do the PNGs have to be a specific size?
No
I got everything but, the part where the png should pop out doesnt work, i still see the dc Icons, pls help
were u able to find the solution for this?
what did you make your png tuber on?
I appreciated the tutorial. I got it to work but the image is super small and no matter what i do i cant seem to resize it right. It seems to disappear on me. Any advice?
for some reason it didnt work for me and my discord profile picture remained instead of changing to my desired picture,,, idk what i did wrong but im pretty sure i followed each step???
how do i fix when my friend doesnt talk the thingy gets darker
I'mma make a Canadian from south park
Perfect thx for help 😭🥰❤️🔥
Your the best! thank you so much!!!
ok, i looked arround after seeing the code not working, and i found someone that fixed it. Code down below
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; }
ur da goat
i managed to get it work for a while, but now for some reason the image wont show and the discord name was still on even tho the hide names was ticked on. about the image thing, i tried clicking on the image first and THEN right clicking to copy the link that way, but it would crop out a part of the image. got something for that?
It doesn’t work for me when I wanna send my chibi self to discord it says its to powerful 😕
if the file is too big, you need to resize it to something more reasonable o: i normally use 1200x1200 PNGs, so try that instead and lower the resolution/DPI so the file isn't exceeding 25MB, there's no reason for picture files to be that big~
The pngs appear in my obs, but Streamkit seems to not detect any voices other than mine. Any advices?
hey thanks for this video
no problem! ^^
@@daijojobu it does not work tho nice tutorial tho
Really ThankyoÜ so Much☺️❣️
no problem!! happy holidays!! 😊
will this not work on mac? i just went through the whole process and did a bit of troubleshooting but it still doesn't display the image i made
i cant get the custom css to work, ive quadruple checked everything is correct and obs is still just displaying the discord chat bubbles on the browser source
Can I somehow draw it on mobile or just pc? Cause I did that on mobile and it's really blurry ( I used 2000x2000 )
Thank you so much
does this work with streamlabs?
Hey uuuh I tried everything multiple times, but still doesn't work. HELP ! :c
arigato jojoooo
This is a great tutorial but it’s funny because we know what happened to pngtubers
Thanks a ton!
is there a way to add blinking frames? 🤔🤔
Use a gif instead of a png
@@maximumviews5759 thank you, your a real one
It’s cuts off my drawings and only shows a small corner of my drawings in stream labs is there a specific size dimension for the drawing that it has to be or a specific code I need to had for it to not get cut off ? 😭
hey i did everything but when i talk my lil png lights up and when im quiet its really dim.. did i do something wrong?
is there a way to stop the character from jumping everytime i talk?
i had the same problem but fixed it: in the code, find "animation-duration: 1s; and change it to
"animation-duration: 0s;"
@@dantegg09 ty
My server us up and running fine, but everytime I try to install it for OBS it says it can't connect to the discord client - please make sure you have it installed.
make sure you don't have an ad blocker I had to turn mine off for the website
thanks dai :))
I managed to get the code to work... but it doesn't show when I go into a call... how do I fix it?
I am not sure what I am doing wrong but mine just shows my bubble from discord no matter what... I followed all the steps: went into developer, I am an admin, I got the code from the kit, made the browser source, updated the code with the links, added the ID, changed in the browser source but no luck. anyone know what the issue could be?
i have the same problem ;-;
i actually tried on stream labs but that put up the same thing which is just the discord profile pic that doesn't want to change it if you have any tips on that plz let me know so i can work on that later
i have followed this video step by step and it still didnt work :(
for some reason my inage wont change when i talk, it might be a bad mic or something, i need to buy a new one desprately
Merci beaucoup. ♥
thx for the video uwu
I don't know what I did wrong, it just shows me the discord bubble
How do I do this for my friends cus I'm a streamer and wanna make it when my friend talks it shows
Hi, I’m doing this right now and it didn’t work? The screen just goes Black. I’m not sure if it’s changed since this video is a year old but if you could help me out that would be great. My camera doesn’t work on my laptop so could that be the problem??
I believe the code is outdated. If you're having trouble getting the PNG to show on OBS, replace the following:
li.voice-state:not([data-reactid*="X"]) { display:none; }
WITH THIS ⬇
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="X"]{ display:block; }
And remember to copy your Discord ID and replace the X with the ID.
Then, you'll also need to replace the following:
.avatar ➡ img[class^="Voice_avatar"]
.speaking ➡ img[class*="Speaking"]
li.voice-state ➡ li.[class^="Voice_voiceState"]
HEYY I know it's been 3 months but are you able to like.. send what the code would look like with the new changes?
@@dyingbreathlol you are literally the best, THANK YOU!!!
Idk why but the Images are just not changing at all
fore somereason when i paste the CSS it my icon goes invisible for a sec then comes back
Is this for laptop or computer only bc i dont have computer or laptop only a phone
Hmmm. Very nice
yea... its not working. I kept the spaces in pasting the url's and id's, but it ain't working.
you're supposed to take out the spaces, is that what you meant? if not, make sure to take out the single space before and after (ex. " DISCORD ID " should now look like "12345678")
this was an issue that i had with another person and we solved it that way, if it doesn't work; id need more context as to which part isn't working so i can work to give you a solution ^^
@@daijojobu yeah i saw in the desc. I'm sorry, I'm rlly stupid lmao
@@daijojobu OHHHHHH ok thanks
when i talk the charater is big and when im not talking its small
hi! when creating your PNG, you need to make sure your picture size are the same dimensions.
example would be that both my idle and my talking files are 1000 px by 1000 px. if your files are different dimensions, they won't have a smooth transition
can i use streamlab?
Uhm can i ask but I don't see any thing to copy 1:43
same
i have a question, if i cant find the thing for the discord user ip what should i do?
Omg tysm:) >33
I don't get it and I don't think it works on mobile
i cant open the css and i had to download it then i still cant figure out what i need to do for there then i had to open obs and i cant find where you opened the chibi file in obs so im really confused.
5:04 WHAT DO I PUT IN URL FOR THE OBS
the URL comes from the discord streamkit website: streamkit.discord.com/overlay
it's for the voice channel you have an admin role in
@@daijojobu so i take the id-url for the channel am in
and put it in the up OBS URL
@@sythen_1053 yes, for the voice channel you are in and have admin role in
It does work for me but even tho i clicked "hide name" it still shows :(
hi hello! i'm gonna see if i can find a find around this ^^ i appreciate the heads up! as soon as i find something; i'll comment here/have an update video up!
@@daijojobu Found the Problem ... in the URL line you have to use True with big T at the "hide_names=True" command , then it works :> (the URL you get from Streamkit)
@@schmitzkatze5 WAH, thank you so much!! i'm gonna make note of that, i appreciate you for letting me know!!
mine has a white background, i dont know what to do.
its not working for me :(
idk what I did wrong, I see it works for everyone else in the comments
can the code be modifided so that I don't jump?
i had the same problem but fixed it: in the code, find "animation-duration: 1s; and change it to
"animation-duration: 0s;"
does it work on streamlabs obs
why the screen is black?;-;
Is there a mobile version?
im not able to get the discord id for my friends idk why
i just wanna cute plush pfp but idk where to find someone who can make them
it doesnt work for me
Can you do this on mobile?
you lost me on the code part :,)
I dont know if its just me but its not letting me get the User ID's
Hi! Is your discord in Developer Mode? That's the only reason it wouldn't give you the "Copy ID" option when right-clicking a user
@@daijojobu oh okay thank you, i didnt even know that was a thing
@@smallMarsh no problem! ^^