How to Move Alert Text in StreamElements!
Hey everyone! 👋 If your Streamlabs alert text is in the wrong spot, don’t worry—I’ll show you how to move it up, down, left, or right in just a few steps!
Log in to StreamElements:
- Go to StreamElements and log in with your streaming account.
Access Overlay Manager:
- In the dashboard, navigate to “Overlay” under the “Streaming Tools” section.
Create or Edit an Overlay:
- Click “Create New Overlay” or select an existing overlay to edit.
Add an Alert Box or editthe existing one:
- Choose the alert you want to edit, and in settings, navigate to “Text Settings” -> Advanced
Customize the Text Position:
- Margin Settings: Adjust the top / right / bottom / left margin if you want to move the text to the bottom, increase the TOP margin if you want to move the text to the top decrease TOP margin
Save Your Overlay:
- After customizing, click “Save” to save your changes.
- Copy the “Overlay URL” to add this overlay as a browser source to your streaming software.
Add to Streaming Software (if needed):
- Open your streaming software (e.g., OBS, Streamlabs Desktop).
- Add a “Browser Source” and paste the Overlay URL you copied.
How to Move Alert Text in Streamlabs!
- Create a New Theme or edit an existing one.
- Name your theme and adjust general settings as you like.
- Edit Alerts Individually
Where to Add This Code?
1️⃣ Go to Streamlabs → Alert Box
2️⃣ Click on the alert you want to edit (Follows, Subs, Donations, etc.)
3️⃣ Scroll down to Custom CSS
4️⃣ Paste the code below at the bottom 👇
Custom Code
CSS alerts delay
.widget-AlertBox {
position: relative;
}
body,
html {
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap {
position: relative;
height: 100%;
width: 100%;
}
#alert-box {
height: 100%;
width: 100%;
position: absolute;
}
#alert-box.hidden,
.hidden {
opacity: 0;
}
@keyframes fadeInOut {
0% {opacity: 0;}
25% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0%;}
}
/* Target the alert message text */
#alert-message {
position: relative; /* Allows you to use top, left, etc. to shift the text */
padding-bottom: 0px; /* Move text up */
padding-top: 900px; /* Move text down */
padding-right: 0px; /* Move text to the right */
animation-delay: 0.5s;
animation-duration: 7s;
}
#alert-message,
#alert-user-message {
text-align: center;
}
#alert-user-message img {
vertical-align: middle;
height: 1em;
}
#alert-image {
position: relative;
}
#alert-image video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#alert-message > span > span {
display: inline-block;
}
#alert-image {
z-index: 6;
position: relative;
}
#alert-text {
z-index: 6;
position: relative;
}
#alert-text-wrap {
z-index: 6;
position: relative;
}IMPORTANT
Please adjust this part of the code in your settings for text editing only. You still need to copy full code but edit only this part in YOUR DASBOARD
/* Target the alert message text */
#alert-message {
position: relative; /* Allows you to use top, left, etc. to shift the text */
padding-bottom: 0px; /* Move text up */
padding-top: 0px; /* Move text down */
padding-right: 0px; /* Move text to the right */
animation-delay: 0.5s;
animation-duration: 7s;
}🔺 Move UP
If you want to move your alert text to the top by 500px → Increase padding-bottom
/* Target the alert message text */
#alert-message {
position: relative; /* Allows you to use top, left, etc. to shift the text */
padding-bottom: 500px; /* Move text up */
padding-top: 0px; /* Move text down */
padding-right: 0px; /* Move text to the right */
animation-delay: 0.5s;
animation-duration: 7s;
}🔻 Move DOWN
If you want to move your alert text to the top by 500px → Increase padding-top
/* Target the alert message text */
#alert-message {
position: relative; /* Allows you to use top, left, etc. to shift the text */
padding-bottom: 0px; /* Move text up */
padding-top: 500px; /* Move text down */
padding-right: 0px; /* Move text to the right */
animation-delay: 0.5s;
animation-duration: 7s;
}