Introduction
This guide includes some CSS help with YouTube's live chat that you can edit in OBS.
This is my first post so expect mistakes.
YouTube changes up their HTML/CSS a lot so this may stop working soon.
This is all I found, so if I find more then I will update them here (if I can even do that).
How to use
Simply copy a code from "Types" into your chat's custom CSS.
Types
Remove background
This will remove the background/make it transparent. We need 2 statements because it has to also remove the chat message background.
Remove top bar, scroll bar, and chat box
This is make that only the chat will show up, and nothing else.
Remove profile pictures
This will remove all profile pictures from messages.
Dark mode
If you want dark mode (this may or may not work), change your chat link from "www.youtube.com" to "gaming.youtube.com". It might actually depend on your YouTube theme, but I have not tested that.
This guide includes some CSS help with YouTube's live chat that you can edit in OBS.
This is my first post so expect mistakes.
YouTube changes up their HTML/CSS a lot so this may stop working soon.
This is all I found, so if I find more then I will update them here (if I can even do that).
How to use
Simply copy a code from "Types" into your chat's custom CSS.
Types
Remove background
This will remove the background/make it transparent. We need 2 statements because it has to also remove the chat message background.
CSS:
.style-scope yt-live-chat-renderer {
background-color: rgb(0, 0, 0, 0);
}
#items.yt-live-chat-item-list-renderer > *.yt-live-chat-item-list-renderer {
background-color: rgb(0, 0, 0, 0);
}Remove top bar, scroll bar, and chat box
This is make that only the chat will show up, and nothing else.
CSS:
.style-scope yt-live-chat-header-renderer {
display: none;
}
yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer {
overflow: hidden;
}
.style-scope yt-live-chat-message-input-renderer {
display: none;
}Remove profile pictures
This will remove all profile pictures from messages.
CSS:
yt-img-shadow#author-photo.no-transition.style-scope.yt-live-chat-text-message-renderer {
display: none;
}Dark mode
If you want dark mode (this may or may not work), change your chat link from "www.youtube.com" to "gaming.youtube.com". It might actually depend on your YouTube theme, but I have not tested that.
