Youtube Live Chat CSS Presets

Youtube Live Chat CSS Presets

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.

1610676362913.png


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.
Author
UltraStorm
Views
21,258
First release
Last update
Rating
0.00 star(s) 0 ratings
Top