Custom Notification WorkShop

[TheNumbLock]

Download/Install the font from this link: http://www.1001freefonts.com/courgette.font

Requested by: dr_sim

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 550
Height: 200

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 160px !important;
height: 160px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 180px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Courgette !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: #6441a5;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' Thanks for the follow!' !important;
}

Preview: (If there is a black background, it is just my background.)




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 600
Height: 200

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 160px !important;
    height: 160px !important;
    background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: 150px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 38px !important;
font-family: Courgette !important;
color: red !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: 150px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Courgette !important;
color: red !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: ' Thanks for the ' ;
}

.amount:after {
content: ' donation!' ;
}

Preview: (If there is a black background, it is just my background.)



Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=160&h=160
Width: 600
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -20px !important;
    margin-left: 180px !important;
    text-align: center;
    width: 420px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 34px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: hidden !important;
    position: relative;
    top: 120px !important;
    left: -30px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: '';
}
.hostname:before {
    content: '';
}
.hostdiv:after {
    position: absolute !important;
    content: ' Thanks for hosting the stream!';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}

Preview: (If there is a black background, it is just my background.)

[dr_sim]

Thanks TheNumbLock,

They all look great.

I must have done something funky though with the host css. When I put it into OBS and click OK, "Thanks for hosting the stream" appears and stays on my preview.

With the follow and the donation nothing is visible unless I do a preview.

What am I doing wrong?

Also, is there a preview button somewhere for a host alert that I'm missing? I can't seem to find it.

Thanks

[YBpoor69]

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

[TheNumbLock]

Thanks TheNumbLock,

They all look great.

I must have done something funky though with the host css. When I put it into OBS and click OK, "Thanks for hosting the stream" appears and stays on my preview.

With the follow and the donation nothing is visible unless I do a preview.

What am I doing wrong?

Also, is there a preview button somewhere for a host alert that I'm missing? I can't seem to find it.

Thanks

It is something with the CSS. I will have to look into it.

[TheNumbLock]

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

[YBpoor69]

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

The sub, host, and the donation links aren't working and with the sub alert you posted the wrong link to make it pop out. In deepbot you have preview but thats not working even when I tried putting them in the obs css tab

[TheNumbLock]

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

The sub, host, and the donation links aren't working and with the sub alert you posted the wrong link to make it pop out. In deepbot you have preview but thats not working even when I tried putting them in the obs css tab

I will test them again when I get home from work.

[TheNumbLock]

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

The sub, host, and the donation links aren't working and with the sub alert you posted the wrong link to make it pop out. In deepbot you have preview but thats not working even when I tried putting them in the obs css tab

What streaming software are you using? Just tested these in OBS Classic, and works perfectly for me with preview:

Donation:



Sub:



Host:

[TheNumbLock]

Thanks TheNumbLock,

They all look great.

I must have done something funky though with the host css. When I put it into OBS and click OK, "Thanks for hosting the stream" appears and stays on my preview.

With the follow and the donation nothing is visible unless I do a preview.

What am I doing wrong?

Also, is there a preview button somewhere for a host alert that I'm missing? I can't seem to find it.

Thanks

Fixed the Host notification CSS in the post.

New CSS for Host Notification:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -20px !important;
    margin-left: 180px !important;
    text-align: center;
    width: 420px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 34px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: hidden !important;
    position: relative;
    top: 120px !important;
    left: -30px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: '';
}
.hostname:before {
    content: '';
}
.hostdiv:after {
    position: absolute !important;
    content: ' Thanks for hosting the stream!';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}


[YBpoor69]

I was using obs classic and it didnt work but now im using studio and its working. Not sure what was going with obs classic, thatnks.

[Father_Bill]

Thanks in advance for your assistance and expertise!
Also could you please point me if you can in the direction of instructions on how to install these notifications.

Follower Notification

Image Link: http://imgur.com/Pq2CP9c
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Donation Notification

Image Link: http://imgur.com/K86uDBH
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Cheer Notification

Image Link: http://imgur.com/hBMQshz
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Host Notification

Image Link: http://imgur.com/Ihdy7r8
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Peace,

Father Bill Kessler

[TheNumbLock]

Will get to these tomorrow afternoon.

[TheNumbLock]

Requested by: Father_Bill

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 250

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 550px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/Pq2CP9c.png) !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 30px !important;
margin-left: 120px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

Preview: (If there is a black background, it is just my background.)




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 600
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 550px !important;
    height: 200px !important;
    background-image: url(http://i.imgur.com/K86uDBH.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 30px !important;
margin-left: -180px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 30px !important;
margin-left: -120px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

Preview: (If there is a black background, it is just my background.)



Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=550&h=200
Width: 650
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/Ihdy7r8.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -30px !important;
    margin-left: 0px !important;
    text-align: center;
    width: 420px !important;
    font-size: 30px !important;
    font-family: Arial !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 30px !important;
    font-family: Arial !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: visible !important;
    position: relative;
    top: 10px !important;
    left: -100px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Norwester !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: '';
}
.hostnumber:before {
    content: '';
}
.hostnumber:after {
    content: '';
}
.hostdiv:after {
    position: absolute !important;
    content: '';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}

Preview: (If there is a black background, it is just my background.)




Cheer:

Link: http://deepbot.tv/notifications/cheernotification.htm
Width: 1000
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 50px !important;
    width: 920px !important;
    height: 200px;
    background: url(http://i.imgur.com/hBMQshz.png);
    background-repeat: no-repeat !important !important;
}
.cheerleftimg {
visibility: hidden !important;
}
.cheerleftamount {
visibility: hidden !important;
}
.cheerrightamount {
visibility: hidden !important;
}
.cheerrightimg {
visibility: hidden !important;
}
#header {
    position: absolute;
    top: 100px !important;
    left: 170px !important;
    width: 560px;
    height: 60px;
    text-align: center;
    font-family: Arial !important;
    font-weight: normal !important;
    font-size: 36px !important;
    opacity: 0;
    color: white !important;
    text-transform: capitalize !important;
}
.cheername {} .cheerheaderamount {} .cheermsg {
visibility: hidden !important;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' cheered';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

Preview: (If there is a black background, it is just my background.)

[puuhbear]

Hi,
 
I have a special request and don't even know if it's possible. I'd like to switch my notifications from Tipeee to deepbot but am not shure if you can help me with that.

It's hard for me to tell what infos you need, as I don't know if it's even possible.

This is, how it should look like in the end: https://www.youtube.com/watch?v=2atebZqdLms
I used the AGENCYB.TTF as font family

this is the code in the message box of Tipeee:

<b style="background: rgba(37, 48, 74, ." id="line"><b id="mainText">{name}</b><b id="subText"> is now following!</b></b>

and this is the CSS I have in my OBS browser source:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

html, body {
  margin: 0;
  padding: 0;
} 

#widget, #body, #alert-box, #wrap, #alert-text-wrap, #alert-text{
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  top: 0;
  left: 0;
  opacity: 1;
}

#alert-box.hidden, .hidden {
  opacity: 1;
}

#line {
  width: 0;
  height: 0;
  position: absolute;
  top: 400px;
  left: 50%;
  margin-left: 0;
  display: block;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  opacity: 0;
  -webkit-animation: lineIn 0.2s .6s forwards,
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
          animation: lineIn 0.2s .6s forwards,
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
}

@-webkit-keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@-webkit-keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@-webkit-keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}

@keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}


#mainText {
  text-align: center;
  font-size: 100px;
  width: 2200px;
  display: block;
  line-height: 100px;
  text-indent: -3000px;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  opacity: 0;
  font-family: "AGENCY FB", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  display: block !important;
  position: absolute !important;
  -webkit-animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
          animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;}
}

@keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;}
}

@-webkit-keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;}
  100% {text-indent: 3000px;}
}

@keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;}
  100% {text-indent: 3000px;}
}

#subText {
  text-align: center;
  font-size: 40px;
  width: 2200px;
  display: block;
  line-height: 40px;
  text-indent: 3000px;
  position: absolute;
  bottom: 30px;
  white-space: nowrap;
  opacity: 0;
  font-family: "AGENCY FB", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  display: block !important;
  position: absolute !important;
  -webkit-animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
          animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;}
  100% {text-indent: 20px;opacity: 1;}
}

@keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;}
  100% {text-indent: 20px;opacity: 1;}
}

@-webkit-keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;}
  100% {text-indent: -3000px;}
}

@keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;}
  100% {text-indent: -3000px;}
}

PS: if it is possible, I will provide more infos on the texts for donation and cheer alerts

[TheNumbLock]

If it is the overwatch one for all three, I can give you the follow and donation one since I did this for a past user. Cheer may take some time, but if you have the info for the cheer one, feel free to send it my way.