A few months ago I decided to buy a new stream graphics package (from VBI, of course). Branding is crucial to creating an identity people will remember. During my re-brand, I ran into an issue with the font of my alerts (insert name Just followed!). This problem was the text of the alert being off-center with the image in the alert, causing the text to overlap a line in the design, and looked unprofessional and sloppy.

The information in this article will provide DIY solutions to problems you may run into when setting up new alerts and formatting the text. Please note this information is applicable to alerts set up through Streamlabs.

There are a lot of options for customizing your Alerts (outside of the actual design). ​

​

In the Streamlabs Alert Box (under Widgets on the side-bar menu) you can select an individual alert to customize. In this article, Follower is used. Here's a breakdown of what you can do:
​
​Follow Alerts: Turn the alert on or off.

Layout: Have the text appear under, on top of, or next to the design.

Alert Animation: This will change how the alert appears on your stream. For example, my alert Slides Up from behind my webcam, then Slides Out Down behind it. Click on the drop-down menu to browse different animations. NOTE- this will not impact the animation of your design should you decide to have animation done, but instead only impacts how the alert pops up during a notification.

Message Template: Here you can add a special message to go along with the {name} (of the person who triggered the alert, i.e. the follower).

Text Animation: Offers different animations for the text in the Message Template. Want the name to wiggle, pulse, or stay static? Change that here.
​
​Image: Upload your design (or use one of the many free templates Streamlabs offers) you want in the alert.​

​

Sound: Give your alert a preset sound, or upload your own sound for when the alert is activated.

Sound Volume: Adjust the volume of the sound.

Alert Duration: Lengthen or shorten how long the Alert is on your screen for. NOTE- If using an animated design, make sure to adjust this depending on how long the alert animation is.

Alert Text Delay: Change the timing of when the text appears on the alert. You may have a design that you want the text to appear later or earlier than the design.
​
​Enable Custom HTML/CSS: For the coders. Make different changes with HTML/CSS coding of the alert.

​

The following info is a little more involved but may be necessary for your alerts to be crisp and professional-looking...

​

​

As I said in the beginning of the article, I had trouble with the placement of the alert text matching up with the center of the alert design. To change how high up (or low) the text will appear, simply go to line 24 alert-text { then press ENTER to skip a line, and type in bottom: (or top) X (for number of pixels)px; to adjust the text. You will need to play with this, and run a test alert to make sure your pixels are correct. The line of CSS will now look like this- ​​NOTE- 25px was all I needed for my alert. Your alert may be different.

​

​

​

You can also change the font, size, color, and weight in the Font Settings drop-down menu.

Lastly, you can customize Alert Variations in the bottom drop-down menu. ​

​

These changes are made if someone donates or cheers over a certain amount, or if they've re-subbed for more than a designated amount.

Customize these options to get your alerts spicy and professional with a dash of your uniqueness.

Thanks for reading!