Move your Twitch Alerts text in Streamlabs

November 3, 2017

Move your Twitch Alerts in Streamlabs

The Problem with Twitch Alerts

Folks out there may have downloaded a set of stream alerts from here, or somewhere else on the web (how could you?!) and added them to StreamLabs, only for the alert text to pop-up dead-centre of the graphic, probably not in the ideal position.

You’ll likely be sat there, scratching your head, wondering how to fix this, or why there isn’t a slider or option to give your text a little bump down. Well, I’ve always wondered the same thing, and, as far as the date of this posting at least (03/10/2017), such an option doesn’t exist. Don’t worry though, it is possible, just a little more complicated than you were anticipating.

How to fix your Twitch Alert text in Streamlabs

First, navigate to your Alert Box settings page, under Widgets

How to move your alert text in StreamLabs - Step 1

Then select the alert you’re changing, I’m going with my host alert

How to move your alert text in StreamLabs - Step 2

Make sure you select to show the alert text OVER the image, NOT underneath it, then scroll down and select the Enable Custom HTML/CSS option

How to move your alert text in StreamLabs - Step 3

Select the CSS tab, and it will reveal a bunch of code to you. Navigate to the code that starts #alert-text and change the value from “padding:” to “padding-top:“, then tweak the number it’s point to. This number will need to be increased by varying amounts, depending on your alert, but as you can probably guess, you’re increasing the padding, pushing your alert text further down. For the host alert graphic from our Alpha Division overlay, I’ve increased the number from 20px to 240px, as shown below. And then saved.

How to move your alert text in StreamLabs - Step 4

As you can see from the following example, the text has been nudged down a considerable amount

How to move your alert text in StreamLabs - Step 5

As I mentioned, you can play with the number mentioned above until it works for you – not every Twitch alert will require the exact same amount of padding, but it’s as simple as that. A little tweaking of your code, and you’re able to move things in position with ease.

Summary

It can be tricky, but moving the text on your Twitch alerts in Streamlabs just needs some very basic coding knowledge, and knowing the right place to go in the Streamlabs control panel.

If you wanna give this a try yourself, and need some inspiration for Twitch alerts to use, checkout our free & premium sections.

See other blog posts from Twitch Overlay

If this was useful, it might be worth checking out the rest of our blog posts. It's often the first place we announce site updates, and helpful streaming guides like how to use a twitch overlay or how to customise your twitch overlay .PSD in Photoshop. As well as other useful guides & tips for streamers setting up their twitch overlays, twitch alerts, or streaming screens for the first time.

Click here to browse our archive

Need help with your stream overlays?

With over 150 stream graphics available, this can all get a little overwhelming. Perhaps you don't know your Twitch overlays from your Twitch alerts, or what exactly Professional Customisation means on our stream design pages. Well, take a look at our guides section. Or feel free to contact us or @TwitchOverlay on Twitter and we'll be happy to help!

Get retweeted to our 50k followers

Feedback and shoutouts are genuinely appreciated here, and besides great designs we wanna use this platform to big people up where possible. All you gotta do is @TwitchOverlay on Twitter, with either a screen of your overlay in action, or a few words on how you're liking it, and we'll retweet it to the world.