With these settings, you can show the status of your Hype Train in your livestream. Just add a browser source in OBS with the following settings:
URL:
https://www.twitch.tv/popout/<channelname>/chat?darkpopout
With: min.
500
Height: min.
150
Custom CSS:
@import url("https://echtkpvl.de/twitch-hypetrain.css");
By using my URL, you will get the latest update automatically. If you are concerned about your security or something else, use this code and visit this tutorial, if something is weird or broken:
html, body, .tw-root--theme-light, .tw-root--theme-dark, .popout-chat-page, .chat-room, .ember-chat-container, .community-highlight-stack__card--wide {
background: rgba(0,0,0,0)!important;
background-color: rgba(0,0,0,0)!important;
}
.chat-list--default, .stream-chat-header, .chat-input, .channel-leaderboard { display: none!important; }
.consent-banner, .chat-signup-gate-overlay, .community-highlight-stack__backlog-card, .marquee-animation { display: none!important; }
div.Layout-sc-1xcs6mc-0.hZLfAO, .pinned-chat__highlight-card, div:has(.bits-leaderboard-expanded__header) { display: none!important; }
.chat-room__content {
padding-top: 25px;
}
.community-highlight {
background: rgba(0,0,0,0)!important;
background-color: rgba(0,0,0,0)!important;
border: unset!important;
box-shadow: unset!important;
}
div[class^='Layout-sc'] {
border-bottom: unset!important;
}
div[class^='Layout-sc'] > button {
display: none;
}
Q: Is there always a visible element in my overlay?
A: No. If there is no Hype Train / Poll / Prediction, the overlay is transparent.
If you start a poll / prediction or have something pinned, they will be shown in the overlay.
hi there, nice feature! i have an unfortunate issue though, i dont think its your fault, but my hypetrain doesnt reset to 5 minutes on lvl up, makes it disappear earlier than it should and it sadly also happens with this overlay. i i was wondering if youd know how i could get around this problem?