Clr browser source plugin tutorial12/25/2022 There are two times, one for the amount of time each social network displays and another that is delay inbetween cycles of all the networks that we have enabled. I’ll simply change the other networks to a 0, to disable them.įinally, the last thing we can customize are the times. So, for my example, I’m going to leave Twitter, Twitch, and Patreon at a 1 to keep them enabled. A 1 means it is enabled where a 0 will mean it will be disabled. So, scroll down a bit more and we’ll see “this is where you enable or disable networks”. Remember only update the word inside the quotation marks, do not change anything elseīy default, all networks are enabled. Once you’ve updated all the networks to your own, it’s time to enable or disable the networks you’d like to use. As long as you only change the word inside the quotation marks, everything should work fine.įor example, I’m going to change “ChangeThis” for the Twitch Name to NerdOrDie, I’ll set my Twitter username to and I’ll update the Patreon section To NerdOrDie. All we need to do is replace the word “change this” inbetween the quotations marks with our own networks names. So if you made a mistake, or things aren’t working properly, just refresh the page and start again. It’s extremely important to leave the formatting of the code exactly how it is. You will only need to change the ones that you will be using. I don’t want to spend too much time on what exactly you’re seeing, but basically it’s the code to make this popup work, however I set it up to where you should be able to customize it with your information, and enable or disable any networks of your choice.įirst, let’s enter in our network names or addresses. It currently supports Twitch, Twitter, Facebook, Instagram, Youtube, Tumblr, Patreon, Paypal, SnapChat, Xbox Live, Playstation Network and Steam… however I may be adding more in the future. If you follow my instructions below, you should have no problem getting this set up. I created this social media popup for my own channel, but decided to figure out a way that I could share it with others. 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
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |