Customizable theme for Streamlabs Twitch chat widget.
- Copy all the files needed to their respective field in your Streamlabs widget dashboard. (https://streamlabs.com/dashboard#/chatbox)
- Custom field can be enable by clicking on 'Add Custom Fields' on the bottom right of the page. You have to edit and update the page with the new code.
Most of the features can be customize using the 'custom fields' section on your widget dashboard. Further customization can be done by editing the css file directly.
Fonts can be change by using Google Fonts. Edit the css file by changing the @import url and font-family.
@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@500&display=swap');
font-family: 'KoHo', sans-serif;
Badges can be hidden by using Streamlabs built-in settings.
Streamlabs color picker does not support opacity. You have to manually edit the css file and use RGBA or 8 digits HEX codes.
background: rgba(0, 255, 0, 0.5);
background: #00ff0080;
Twitch user can set their own color on the site. To use this color in this overlay, you have to include it manually on the html code as needed. The variable is {color}. For example:
<div class="name" style="color: {color}">
<div class="username-box" style="background: {color}">
<div class="message-box" style="border-color: {color}">
{color} does not work on the css as far as I know. It must be put inline on to the html file and will overwrite the css if used.
Smooth scrolling might not be suitable if chat is moving too fast. To disable smoothscrolling, simply remove the javascript code or restore the original javascript code.
This repo also included some premade theme in the premade folder. This themes is less customizable than the main overlay unless you edit the css manually.
You can contact me on Twitter if needed.