#Obs studio overlay template free how to#
#Obs studio overlay template free update#
#Obs studio overlay template free code#

Only updates the interface when the song changesġ. Automatically enables scrolling text effect when the text is too long Automatically hides itself when no song is playing

#Obs studio overlay template free how to#

I've left bellow a quick start guide on how to customize the widget! CSS file, you can change how the widget looks. This widget aims to provide you with the same functionality but with a local html page, meaning you don't depend on any 3rd party servers working!Īnd finally, customisability! By editing the.

#Obs studio overlay template free update#

OBS Studio is a powerful tool in making professional streams, so be sure to explore the software for yourself.If you ever tried using Aiden Wallis's widget, you might know that it has a pretty slow refresh rate, and if the servers are overloaded it can sometimes not even update for several minutes. Now that the most important streaming elements are set up, you’re ready to engage with your audience. You’ve learned to set up alerts, gameplay, and webcam in OBS Studio and Stream Elements. The multiple Follow Alerts appear in OBS. In the Stream Elements dashboard, click Alerts, then emulate the Follow Alerts several times in a row. Test the placement of your alerts in the new overlays in Stream Elements. Resize and position the grouped overlays, then lock the group in the Sources tab. Right click and select “Group Selected Items.” Now you can position both overlays as one.

Once correctly positioned, select both Webcam and Camera in Sources by holding the Ctrl key. Lock the camera to help you position the webcam overlays. Next, adjust the Facecam overlay over the webcam. Select your capture card in the Device drop down menu. In OBS, add a new source and select Video Capture Device. Once positioned, return to Stream Elements to change the theme to Dark or a new color. Resize the chat overlay to fit the black rectangles of the overlay template, then Save. The Chat Properties window appears.Įnter the copied URL in the URL field. Name the overlay Chat in the pop-up window and click Save.Ĭopy the hyperlink by clicking the hyperlink icon in the upper right of the toolbar. For now, choose a bright color to help you see the chat overlay when you position it in the template frame in OBS. Scroll down and choose a Background Color.

Your new timer opens in a new tab.ĭoubleclick the new Your streams chat 1 layer in the side panel.Ĭlick Settings. Go to After customizing your timer settings, click Get my Timer.

Click the lock icon to prevent further changes.

Select the source, then right click and select Transform, then Fit to Screen.

The new Starting source is now in the Sources tab.

Select the Starting Soon file from the file browser.

Select Create New and name your image Start.

The Create/Select Source popup window appears.

In OBS Studio, click the icon under the Sources tab to add a new source.

This countdown timer is a free tool I created for you, which can be found at This screen will be showing before your twitch stream begins and features a countdown timer for your audience. Creating a Starting Soon screenįirst, create the Starting Soon screen.

#Obs studio overlay template free code#

You will learn how to set up the following:ĭownload the free template files for this tutorial at using the coupon code FREESTEAMOVERLAY.