Are you trying to use stream alerts in Streamlabs, but the alert text isn’t lined up correctly?
In this quick tutorial we’ll show you how you can move your alert text up, down, left, right and rotate the text at an angle.
Keep reading 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 one of our animated Red Neon alerts that you can download from our site.
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 up, so the code I want to add in there is padding-bottom: 240px;.
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 SUBSCRIBER 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.
Don’t forget to save after each step, otherwise the changes does not show up when testing alert!
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 up and to the left, you could do this:
padding-bottom: 240px;
padding-right: 70px;
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(10deg);
It goes in the same section in the CSS from when we were editing the text padding.
Just replace the number 10 with whatever degree you need to rotate your text. Again you’ll need to do some trial and error to get it perfect.
You can also add a “-” to make it negative degrees. That way you can rotate the text other way around.
In our example, we used transform: rotate(-10deg); AND padding-top: 90px; to get the text lined up perfectly with this alert.
And that is how you move your alert text in Streamlabs!