6s forwards īackground: url('') no-repeat $theme_color Transform: rotateX($rotate_x) rotateY($rotate_y) webkit-transform: rotateX($rotate_x) rotateY($rotate_y) Custom Twitch Alerts CSS url('$font_family') Inside your streaming program make sure to set your width to 600px by 600px. Simply add the URL into a CLR browser source for OBS (just Browser source for OBS Studio) or a Browser Source for XSplit. Bringing your Event List into OBS and XSplitĪfter you save, the “How to Use” section towards the top will have a URL that you will be able to add into OBS or XSplit. This means it can be aligned to the right or left, or even animate in from the top or bottom. Text size, background color, animation, and animation speed will not be affected.Ĭhoose if you’d like to flip the alignment along an X or Y axis. If you’re not sure of the style of font you want, browse Google Fonts to see your options. You can use the drop down menu for font to select a font you like. Text Color controls the color of your text. But, for example, if we wanted to use red, we simply change the #222 to #ff0000 – or the color of your choice. If you don’t know much about CSS, I would recommend not changing this. Here, you can set the color to whatever CSS color you’d like. To do this, you’ll want to go into the custom CSS box and scroll to line 86. The Max Events slider will control how many events are shown at one time, I personally leave my slider at 5, but feel free to choose what works best for your stream! Unfortunately the color of the box that has the names of users and type of events can not be changed unless you edit the CSS. In the Event List options you can choose to show followers, subscribers, and donations – check mark the boxes you would like to have displayed here. Theme Color will control the background color of the box with icons in it. You can now customize what your alerts look like. At this point, you’re almost ready to go! Right click inside the text box and hit Paste. From here, click “Event List” – once the page is loaded, click the drop down in the themes section and change it to “Custom CSS”. Now, log into your Twitch Alert’s Dashboard. Adding Custom CSS into Twitch Alerts Events List

Twitch alerts