How to Move Streamlabs Alert Text - Easy Tutorial - Streamplay Graphics

How to Move Streamlabs Alert Text

streamlabs alert text positioning header image
Streamplay Graphics

Aug 09, 2018 · 4 min read

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!


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


before and after moving alert text


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.



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.


click enable custom html/css



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.


where to edit text css setting


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



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.


launch button to preview alert text


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.



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.



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;


you can add more than one padding css



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:


alert text not angled


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.


transform code used to rotate alert text


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.


alert text css for angled alignment


proper text alignment



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 🙂

Want a Custom graphic?

We can make a fully custom set of overlays
and graphics for your stream.

Learn more

Want design tips & business trends (and the occasional promotion) in your inbox?

Subscribers to our newsletter have been scientifically proven to be smarter, better looking and at least 50% more awesome than average.

  • This field is for validation purposes and should be left unchanged.

Our Graphics Are Compatible
With All Streaming Apps

  • Streamlabs
  • Twitch
  • Youtube
  • Stream Elements
  • Facebook gaming