Sakura Animated Alerts

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

The font used is Poppins and Sacramento ( you can find it in the “Font” folder )
The colors used are:
Purple #8E7BF6
Dark Purple #201941
Light Purple #EDE6FF

✦How to set up alerts!

╰┈➤ Streamlabs

The size of the alert box is 600x300 ( 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

• Follower – welcome {name}
• Sub – welcome {name} x {amount}
• 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: 7 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 : 35px;
   padding-bottom: 25px;
   text-shadow: 0px 0px 0px ;
   opacity: 0;
   animation-name: fadeInOut;
   animation-delay: 0.5s;
  animation-duration: 6.9s;
}
#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: Poppins or Sacramento Google Fonts
Font Size: 35+px ( choose the size you prefer)
Font Weight: 500
Font Color: #EDE6FF

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 600x300 ( use the same size for browser source size in OBS)

╰┈➤ 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 Alerts” file, 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.