Are you trying to use an alert in Streamlabs but the text isn’t lined up correctly?

In this quick tutorial I’ll show you how you can move your alert text up, down, left, right, or even rotate the text on an angle.

Keep reading below to find out how to properly reposition your alert text!

MOVING YOUR ALERT TEXT

Here’s a before and after picture showing the results of what you’re about to learn:

For this example we’ll be using the Follows alert, and we’ll be using one of our animated alerts that you can download from our site (the one in the before and after image above).

The alert is called Roboturner – you can download it here if you want.

STEP 1

In the Alert Box widget make sure you’re in the appropriate alert settings.

Scroll down to the bottom and look for the setting Enable Custom HTML/CSS, then click Enabled.

Once it’s enabled, a new box will appear below with a bunch of code.

Click the CSS heading, in between the HTML and JS headings.

STEP 2

Now in that CSS code box, scroll down to line 24, where it says #alert-text {. This is where we’re going to be editing to move our text up, down, sideways etc.

For this example I want to move my text down, so the code I want to add in there is padding-top: 120px;.

This will tell the alert to push my text down x amount of pixels.

The amount of pixels you enter here will vary, so it just comes down to trial and error. Start with a number, then make your way higher or lower depending on where the text ended up after you set the initial pixel number

STEP 3

To test your changes, click Save Settings at the bottom of the page, then click the TEST FOLLOWS button found at the bottom right of the CSS box.

To preview your alert I’ll assume you already have it setup in your OBS or other streaming app, or you clicked the Launch button to open up a preview window.

Once you’ve seen where the text is positioned after you made the first edits, you can now adjust the pixels higher or lower to position the text where you want it to be.

OTHER PADDING OPTIONS

Here are the individual padding codes to move your alert text up, down, left, or right:

To move your text up use this:
padding-bottom: 50px;

To move your down up use this:
padding-top: 50px;

To move your text right use this:
padding-left: 50px;

To move your text left use this:
padding-right: 50px;

Adjust the number 50 to whatever amount of pixels is needed to position your text where you want it.

MORE THAN ONE PADDING CODE

You can also have multiple padding settings. For example if you want to move your text down and to the left, you could do this:

padding-top: 120px;
padding-right: 75px;

ROTATING YOUR TEXT

If you have an alert that’s on an angle, then you can also rotate your stream alerts text using CSS.

Take another one of our alerts for example – the section where your viewers name goes is on a slight angle. By default, this is what the alert text looks like in Streamlabs:

So we need to rotate the text to match that angle.

Using this string of code, we can do just that:

transform: rotate(20deg);

It goes in the same section in the CSS from when we were editing the text padding.

Just replace the number, 20, with whatever degree rotates your text how you want it. Again you’ll need to do some trial and error to get it perfect.

You can also add a “-” to make it negative degrees to rotate the text the other way.

In our example, I used transform: rotate(-7deg); AND padding-top: 32px; to get the text lined up perfectly with my alert.

ANY QUESTIONS?

So that’s how to move your alert text in Streamlabs!

If you have any questions, or have anything to add to this tutorial to make it better then please drop a comment below. Also you should hit up Streamlabs support here for help.

And if you’ve been meaning to get new alerts for your stream, then you can check out our selection of professionally designed alerts here.

Thanks 🙂