Skip to content

Instantly share code, notes, and snippets.

@Bluscream
Last active October 4, 2024 07:05
Show Gist options
  • Save Bluscream/83083d0cd483b3563b5e2b4d55519003 to your computer and use it in GitHub Desktop.
Save Bluscream/83083d0cd483b3563b5e2b4d55519003 to your computer and use it in GitHub Desktop.
Twitch chat transparent popout for OBS
/*
Twitch chat browsersource CSS for OBS
Original by twitch.tv/starvingpoet modified by github.com/Bluscream
Just set the URL as either one of
- https://www.twitch.tv/%%TWITCHCHANNEL%%/chat?popout=true
- https://www.twitch.tv/popout/%%TWITCHCHANNEL%%/chat
- https://www.twitch.tv/embed/%%TWITCHCHANNEL%%/chat?parent=localhost
And paste this entire file into the CSS box or paste direct import css like
@import url("https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003/raw/obs_twitch_chat.css");
For Youtube use https://chatv2.septapus.com/
*/
/* Define CSS Variables */
:root {
--background-color: rgba(0,0,0,0); /* general background color/transparency */
--chat-message-color: unset; /* foreground color of chat messages */
--chat-message-font-size: unset; /* font size of chat messages */
--chat-message-font-family: unset; /* font-family of chat messages (example: "Comic Sans MS", cursive, sans-serif;) */
--text-color: #FFFFFF; /* general font color */
--font-size: 18px; /* general font size */
--line-height: 20px; /* general chat line height */
--text-shadow: -1px -1px 1px #000000, -1px 1px 1px #000000, 1px -1px 1px #000000, 1px 1px 1px #000000; /* general text shadow */
--margin: 0 auto; /* general margins */
--overflow: hidden; /* general overflow */
}
/* Badge Removal
To remove additional badge types - moderator, bits, etc - just make a copy of the one of the following badge selectors and replace the word inbetween the quotes with the hover text
*/
/*img.chat-badge[alt="Broadcaster"],*/
/*img.chat-badge[alt="Moderator"],*/
/*img.chat-badge[alt*="Subscriber"],*/
img.chat-badge[alt="Twitch Prime"],
img.chat-badge[alt="Turbo"],
img.chat-badge[alt="Verified"]
{
display: none!important;
}
/* Reverse chat
.chat-scrollable-area__message-container {
display: flex;
flex-direction: column-reverse;
}
*/
/* Hide chat statuses like "Welcome to the chat room!" or "yournamehere cleared chat for this room." by @Adobe-Android (https://gist.github.com/Adobe-Android/05deea9001b83a763d2dbfceb5eb0a9e/revisions#diff-ecaa2404815e8e26cf91e016648328814f069f13f25559b17446c1b40ca29625)*/
/*
div.chat-line__status {
display: none!important;
}
*/
/* Remove the header section */
.ember-chat .chat-room {
top: 0!important;
}
.ember-chat .chat-header,
.room-selector__header,
.ember-chat .chat-messages .chat-line.admin,
.stream-chat-header, [data-test-selector="channel-leaderboard-container"] { /* by @milochristiansen (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003?permalink_comment_id=4502487#gistcomment-4502487) */
display: none!important;
}
/* Remove the footer section */
.ember-chat .chat-room, .chat-input {
display: none!important;
bottom: -112px!important;
}
/* Small fix to remove the "Stream Chat" Header and the Gift/Cheer Leaderboard header by @ScarVite (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3803252) */
.stream-chat-header, .channel-leaderboard, [data-test-selector="channel-leaderboard-container"] {
display: none !important;
}
/* Get rid of the "Gift the sub now to be #1!" message by @KokoseiJ (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003?permalink_comment_id=4767266#gistcomment-4767266) */
.channel-leaderboard-header-rotating__users, .tw-interactable > * {
display: none!important;
}
/* Remove pinned message */
.community-highlight-stack__card {
display: none;
}
/* Hide community highlights */
.community-highlight,
.community-highlight-stack__backlog-card {
display: none !important;
}
/* Remove chat rules consent banner by @mjbogusz */
.consent-banner {
display: none !important;
}
/* General Settings */
body {
color: var(--text-color) !important;
margin: var(--margin) !important;
overflow: var(--overflow) !important;
text-shadow: var(--text-shadow) !important;
}
/* Change background elements according to --background-color variable (color/transparency) */
html, body,
.room-selector, .room-selector__header,
.twilight-minimal-root, .tw-root--theme-light,
.popout-chat-page, .chat-room, .tw-c-background-alt,
.chat-container, .ember-chat-container, .stream-chat-container
.first-message-highlight-line {
background: var(--background-color) !important;
background-color: var(--background-color) !important;
}
/* Font size fix by @DamienDabernat (https://gist.github.com/Bluscream/83083d0cd483b3563b5e2b4d55519003#gistcomment-3770724) */
html {
font-size: 100% !important;
}
/* Font Size */
.stream-chat .chat-messages .chat-line, .ember-chat .chat-messages .chat-line {
font-size: var(--font-size) !important;
line-height: var(--line-height) !important;
}
/* Font Color */
.chat-container, .ember-chat-container {
color: var(--text-color) !important;
}
/* chat message color and size by @iggy12345 */
.chat-line__message {
color: var(--chat-message-color) !important;
font-size: var(--chat-message-font-size) !important;
font-family: var(--chat-message-font-family) !important;
}
@tahakara
Copy link

@DespicableGreen can you send your code

@DrunkenMufasa
Copy link

This is fantastic thanks for posting!
However when I add:

.chat-line__message {
font-size: px;
}

The font size stays the same.
On mobile it's entirely illegible;
Unless I have chat take up a quarter of the screen.
Is there a way around this?

@DamienDabernat
Copy link

This is fantastic thanks for posting!
However when I add:

.chat-line__message {
font-size: px;
}

The font size stays the same.
On mobile it's entirely illegible;
Unless I have chat take up a quarter of the screen.
Is there a way around this?

I found a fix, simply add :

html {
    font-size: 100% !important;
}

@ScarVite
Copy link

ScarVite commented Jul 5, 2021

Small fix to remove the "Stream Chat" Header and the Gift/Cheer Leaderboard header just add this:

.stream-chat-header, .channel-leaderboard {
  display: none !important;
}

@tentozee
Copy link

Any ideas how to add BetterTTV emotes? Is it even possible to add them there?

@Bluscream
Copy link
Author

Any ideas how to add BetterTTV emotes? Is it even possible to add them there?

no, i don't think CSS can do that. you'd have to inject javascript somehow

@sim2kid
Copy link

sim2kid commented Sep 6, 2021

If you want to reverse the chat's display order, you can turn the container into a flex box like so:

.chat-scrollable-area__message-container {
    display: flex;
    flex-direction: column-reverse;
}

@MtheInsomniac
Copy link

Is there a common reason as to why this doesn't work for me at all? 😅 In OBS, followed the annotations to a T, the full chat appears with no alteration. Thanks!

@phreekbird
Copy link

Dosnt work for me either.

@Adobe-Android
Copy link

Adobe-Android commented Apr 15, 2022

Works great with default Twitch chat!

Modifications

I have some corrections for the badge removal code. Twitch changed the "badge" class on the image tag to "chat-badge" so it no longer worked. I verified the code below fixes Broadcaster, Moderator, Turbo, Verified, Subscriber, and Prime Gaming (formerly Twitch Prime) .

Source: https://www.theverge.com/2020/8/10/21358463/amazon-twitch-prime-gaming-rebrand

Subscriber got a tad trickier. Here are examples I've seen. This was addressed with my changes.

3-Month Subscriber
1-Month Subscriber

Here's a fairly comprehensive list of badges. These are the most common.
https://help.twitch.tv/s/article/twitch-chat-badges-guide?language=en_US

There are more, I have not added here but verified a few alt tags are identical to their name.
https://twitchinsights.net/badges

Additions

Added VIP badge to bade removal.

Code

/*
Badge Removal
To remove additional badge types - moderator, bits, etc - just make a copy of the one of the following badge selectors and replace the word in between the quotes with the hover text
*/
img.chat-badge[alt="Broadcaster"],
img.chat-badge[alt="Moderator"],
img.chat-badge[alt="Prime Gaming"],
img.chat-badge[alt="Turbo"],
img.chat-badge[alt="Verified"],
img.chat-badge[alt="VIP"],
img.chat-badge[alt*="Subscriber"] 
{
    display: none!important;
}

@dondogecl
Copy link

Hi! regarding the "subs will appear here" header, you can remove it with this line

.last-x-events_container{
display: none!important;
}

@Punzero
Copy link

Punzero commented Sep 26, 2022

anyone konw how to make chat slides in from the side or add animation when new chat pops in? I have no idea how to do it.

@MariusTBjercke
Copy link

MariusTBjercke commented Oct 8, 2022

Another optional for white chat messages:

[data-a-target="chat-line-message"] {
    color: #FFFFFF;
}

@KysaKusa
Copy link

sry im kind of a potato but how do you change the length and width of the box without altering the scale?

@MariusTBjercke
Copy link

sry im kind of a potato but how do you change the length and width of the box without altering the scale?

In OBS you would set the width and height in the source property, as dragging the corners for example would only change the scale (if that's what you mean).

@TailBullet
Copy link

My man, thank you so much

@milochristiansen
Copy link

Updated code to kill the header:

.stream-chat-header, [data-test-selector="channel-leaderboard-container"] {
  display: none !important;
}

@sarf2k4
Copy link

sarf2k4 commented Mar 15, 2023

how can i add a good visibility to the chat text? for example my chat text is white, and my scene is also white rendering the chat text can't be seen.

@Adobe-Android
Copy link

Just change this line here to whatever color you want. In this case, the hex color below is black.

.chat-line__message {
    color: #000000;
}

@sarf2k4
Copy link

sarf2k4 commented Mar 16, 2023

Just change this line here to whatever color you want. In this case, the hex color below is black.

.chat-line__message {
    color: #000000;
}

Then there would be another problem that, when the video is black, the text also can't be seen. This way I have to keep changing the text color just to have a good visibility depending on the video's color as well

edit:
Nevermind, the stock css code works well with the visibility with the help of the text shadow. No modification needed

@Adobe-Android
Copy link

You could always get rid of the background transparency if you're concerned with text being unreadable on a variable background. You can either comment out this section of the code or change the background color to something you prefer.

html, body,
.room-selector, .room-selector__header,
.twilight-minimal-root, .tw-root--theme-light,
.popout-chat-page, .chat-room, .tw-c-background-alt,
.chat-container, .ember-chat-container {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
}

@RemVan
Copy link

RemVan commented Nov 4, 2023

Hello, the question is, how do I make a unique one for each user? I mean, so that the moderator has one background, the VIP has another background, and then

@KokoseiJ
Copy link

This should get rid of the "Gift the sub now to be #1!" message if anyone is still bothering to use this:

.channel-leaderboard-header-rotating__users, .tw-interactable > * {
  display: none!important;
}

@ramazansancar
Copy link

I use this with extension.

User JavaScript and CSS (Chrome Extension)

Url List:

https://www.twitch.tv/*/chat?popout=true
https://www.twitch.tv/embed/*/chat*

@timptos
Copy link

timptos commented Jan 15, 2024

how to remove the PINNED MESSAGE ON TOP?

@zMonsterGirl
Copy link

And how do I add badges? I'm completely new to this, but it's something I really wanted to do. It's for my twitch chat. Help

@Fxzzi
Copy link

Fxzzi commented Apr 1, 2024

how to remove the PINNED MESSAGE ON TOP?

.community-highlight-stack__card {
    display: none;
}

@Bluscream
Copy link
Author

Bluscream commented Apr 2, 2024

@Fxzzi thanks. added to the code.

Also i restructured comments a bit and gave more credits + added more code from forks. Wasn't really happy with it.
In addition, some stuff is now customizable through css variables at the top of the file so no need to search for it anymore (i hope unset; works in the OBS browser)

@Fxzzi
Copy link

Fxzzi commented Apr 4, 2024

In the end, here's how I've gotten mine looking:

image

:root {
  --color-background-body: rgba(0,0,0,0.4);
}

/* fade animation for new messages */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.chat-room {
    background: none !important
}


/*
Hide various parts of the site.
- chat input box
- "Welcome to the chat room!" text
- stream chat header
- scrollbars
- pinned messages
*/
.chat-input,
.chat-line__status,
.stream-chat-header,
.simplebar-track,
.community-highlight-stack__card,
img.chat-badge
{
    display: none !important;
}

/* Animation on new messages, other visual changes including text outline */
.chat-line__message {
    animation: fadeInUp .5s ease-out !important;
    font-size: 18pt !important;
    line-height: 100% !important;
    color: #c0caf5 !important;
    font-family: Noto Sans !important;
    text-shadow: -1px -1px 0 #1a1b26, 1px -1px 0 #1a1b26, -1px 1px 0 #1a1b26, 1px 1px 0 #1a1b26 !important;
    /* padding: .5rem 0rem 0.5rem 0rem  !important; */
}

EDIT: added code to hide scrollbar. Annoyed me when someone would send a new message and the scrollbar would show for a second before hiding again. Feel free to add to your gist, the class is .simplebar-track

@zMonsterGirl
Copy link

Hello, I need help, I managed to place a badge, but I left it more ornate near the text box, but I already tried and couldn't position it.
Does anyone know how to do this?

->(Like I said, I don't really understand this, and I did my best.)<-

-image with example
image

-And this is the code I have (important note: I used this css code directly in @obs)

.badges {
display: {{badgesVisibility}};
position: relative;
height: {{badgeSize}}px 20;
width: {{badgeSize}}px 10;
min-width: {{badgeSize}}px10;
vertical-align: text-bottom;
margin-left: 5px;
}

.chat-badge{
display: flex;
float: left;
box-sizing: border-box;
height: 100%;
min-width: var(--badge-box);
line-height: {{userSize}}px;
margin-top: auto;
vertical-align: text-bottom;
padding-bottom: 2px;
align-items: flex-start;
flex-direction: row-reverse;
background: transparent;
}

Like I said, I don't really understand this, and I did my best.

@Bluscream @ramazansancar @footforhire @Adobe-Android @milochristiansen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment