CSS-Variables

Description of all the variables that you can change to customize the overlay to your liking.

---

Name of the event the is happening right now (e.g.: Follow, Donation, Sub, etc…)

--alert-identifier-name: "follow";

Content/Text of what the alert should tell/show you or alert you about?

e.g.: {name} just followed you! or {name} just donated {amount}!

use only {messageTemplate} if you want to set the message in Streamlabs' message template field.

--alert-user-text: "{name}";

Content/Text of the bubble that appears on the bottom right corner of the alert-box.

--bubble-text-content: "+1";

Change the alert's icon.

Uni-codes for some icons:

*Check [fontawesome.com](http://fontawesome.com/) for more icons*

- Follow: "\f234" → Person with a plus sign
- Donation 1: "\f4c0" → Money on hand
- Donation 2: "\f155" → Dollar sign
- Raid: "\f0c0" → 3 people icon
- Host: "e595" → 3 people in view frame
- Sub: "\f521" → Crown
- Gifted Sub: "\f06b" → Gift
- Merch: "\f54e" → Shopping bag

--icon-unicode: "\f234";

Change the color of the icon background (left side of the alert-box)

--icon-background-color: #e74c3c;

Change the color of the identifier text.

--alert-identifier-color: #e74c3c;

Change the color of the bubble that appears on the bottom right corner of the alert-box.

--bubble-container-color: #e74c3c;

Change the color of the right side of the alert-box.

--alert-box-right-side-color: whitesmoke;

Change the color of the message background that is sent by the viewer when they donate etc…

--message-background-color: none;

Change the Font-Family (this applies for all of text for the Alert Box)

--fontFamily: "Open Sans", sans-serif;

Change the Alert-Box’s Entry and Exit Animations.

--alertAnimation-Entry: var(--slide-in-blurred-left);
--alertAnimation-Exit: var(--slide-out-blurred-left);

Change the Icon idle/attention animation.

--iconAnimation: var(--pulsate-bck);

Change Entry and Exit animation for the message that is left by the viewer.

--user-message-animation-Entry: var(--slide-in-blurred-left);
--user-message-animation-Exit: var(--slide-out-blurred-left);

Change .Container’s class position.

This changes the position of the Alert Box and the message left by the viewer.

For alert box x or y position use: start, center or end.

--alert-box-positon-x: center;
--alert-box-positon-y: start;
/* This sets the Alert box and user message in the top center of the screen */