Since TwitchAlerts completely removed their forum between January 2016 and now I'm recreating the topic here. It's actually more related to OBS and belongs here anyway.
TwitchAlerts CSS example for OBS/OBS Studio (a simple copy/paste example)
Chat Box Style Override
There are many messages within your chat box. The chat box is what surrounds all messages. Anything within the chat box can be styled in any way possible with CSS. Any CSS customization you do within OBS is what is commonly referred to as an override style. TwitchAlerts provides the default style via their web panel, we are overriding that style with a new one. OBS basically intercepts the CSS (with permission from TwitchAlerts), forces a change, and then is embedded into the stream as a graphical output. This is a very basic and simple style override.
Code:
body {
background-color: rgba(255, 69, 0, 0);
margin: 0px auto;
overflow: hidden;
}
div span.name {
color: #9DE8FC;
font-size: 18px;
}
div span.colon {
}
div span.message {
color: #FAFAFA;
font-size: 25px;
}Green Screening for Legacy Applications
There are some streamers that choose to use old applications that still require a green screen background behind the text. Yes, it is possible to use those applications with minimal effort. I would like to make it VERY CLEAR that green screen applications are now obsolete because of OBS with CSS! This is why I'm referring to them as legacy applications. Anything you can do with green screen applications you can now do 10 times more with OBS and CSS. Please consider updating your methods it will make your life much easier with 1 less program to run in the background taking up needed CPU that could be put towards streaming higher bit rates. With that said, OBS Studio & TwitchAlerts are backwards compatible with practically every legacy green screen character application that I've come across. The following code example will setup a green background behind the chat box. Customize it for your needs.
Code:
body {
background-color: rgba(0, 255, 0, 1.0);
margin: 0px auto;
overflow: hidden;
}
div span.name {
color: #9DE8FC;
font-size: 18px;
}
div span.colon {
}
div span.message {
color: #FAFAFA;
font-size: 25px;
}Message Duration Override
Specify duration in seconds before chat message disappears. This customization will allow your chat messages to stay on screen for more than 5 minutes (maximum allowed by TwitchAlerts in their website panel). This is likely to change or break in the future depending on TwitchAlerts and/or CSS specifications. For the time being this works. Good for AFK/BRB screens on Twitch channels with low viewership. For high traffic channels this type of customization is completely unnecessary and highly not recommended for messages!
How it works:
This customization looks for the animation class and changes the attributes of the animation including duration. Since it's a global class this customization is applied to anything that uses the animation class. So you wouldn't be able to use this in conjunction with other animations to make really complex animations for every little thing in your stream.. they would all be overridden if using the same attributes like fadeinright, ease, fadeout. You can only override the class once, in this case for message duration.
Code:
#log>div {
animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease 300s forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease 300s forwards;
}Message Background Gradient Override
The background color for each message is actually a gradient that uses the RGBA class. It is not a background image, it's code! The last number is the Alpha (transparency) from 0.0 to 1.0 You can easily change the message background color gradient AND/OR transparency by adding the style in OBS CLR Browser like so:
Code:
#log > div {
background: linear-gradient(rgba(255, 0, 0, 0.6), rgba(50, 50, 50, 0.7));
}If you are unfamiliar with CSS/HTML and want to start customizing your TwitchAlerts chatbox embedded in your stream, here is a link to good place to get started.
http://www.w3schools.com/css/css_font.asp
It will teach you about CSS attributes and proper syntax (formatting). You'll be customizing your CSS in no time. Enjoy.
If anyone has more they would like to add feel free to add your custom classes. Examples and snippets are helpful.
Last edited:
