Tech Core Animated Alerts

Below you can learn about the contents of the folder and how to set up alerts.

The font used is Audiowide, but you can use any fount you like

✦How to set up alerts!

╰┈➤ Streamlabs

The size of the alert box is 800x500 ( use the same size for browser source size in OBS)

Alerts Settings
Alert Layout: Text over the image ( Middlebox )
Alert Animation: Fade in/Fade out
Message Template: You can use the default or this templates
Here are some templates that you can use for alerts messages template

• Follower – welcome {name}
• Subscriber – welcome {name}
• Resubscribe - welcome {name} x {amount}
• Sub Gift - {gifter} has gifted a sub to {name}
• Community Gift - {gifter} gifted {amount} subs!
• Tip – Thank you {name} - {currency}{amount}
• Cheer – {name} x{amount}
• Raid – {name} raid x{amount} viewers

Text Animation: Pulse or any animation you like

Upload WebM and Sound
Alert Duration: 9 sec
Alert Text Delay: 0 sec

Copy and paste this code as it’s shown on the image above UPDATE ONLY CSS CODE

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%;}
}
#alert-text {
   line-height : 25px;
   padding-top: 5px;
  padding-bottom: 5px;
   text-shadow: 0px 0px 0px ;
   opacity: 0;
   animation-name: fadeInOut;
   animation-delay: 2s;
  animation-duration: 8s;
}
#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;
}

Text Settings Font
Font name: Audiowide Google Fonts
Font Size: 24+px ( choose the size you prefer)
Font Weight: 300
Font Color: White

Click save when you are done with edits you will need to repeat this step for all alerts you want to use, I do recommend clicking “Save” more times, sometimes Streamlabs has a delay and does not save from the first click

╰┈➤ StreamElements

The size of the alert box is 800x500 ( use the same size for browser source size in OBS)

Main Settings:
Alert Duration: 10sec
Layout: Text over the image ( First box in the Layout options )
Text Setting:
Font: Audiowide Google Fonts
Font size: 25 (depends on the amount of text)
Line height: 1
Advanced Text Settings
Top Margin: 165-170 ( Adjust if you change the size of the alert box )
Text Color: White or any you like
Animation Settings:
Text animation enter: Fade in
Text animation enter: Fade out
Text appearance: 2 sec
Text disappearance: 1.5 sec

╰┈➤ One Click StreamElements Install

We have also included one-click installation alerts specifically for StreamElements users.
To access these alerts, please log in to StreamElements before following these steps.
Open the folder you downloaded/unzipped, then open the “Alerts Folder” Double-click on the “StreamElements Premade Alert” , and the alerts will be created.
To access them, navigate to the “Overlays” tab in StreamElements Dashboard and you can start using your new alerts without any additional setup.
If you want to make changes, it is recommended that you create a duplicate of the alert box and edit the new copy overlay so that you always have a backup of your alerts.