Custom notifications

[Hypnox47]

Hello!
I wanna use the two following GIFs for my follower and donation notifications!

Thanks!

[TheNumbLock]

Which is which for follower and which is for donation?

[Hypnox47]

Oops forgot that.
The "Bro" is for follower and the "Nerd" is donations!

[TheNumbLock]

Requested by: Hypnox47

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 500
Height: 350

CSS Code:

Code: [Select]

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 190px !important;
margin-left: 0px !important;
width: 300px !important;
font-size: 28px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: 'New Follower ' !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: 500
Height: 300

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: 80px !important;
    width: 249px !important;
    height: 181px !important;
    background-image: url(http://i.imgur.com/zG8OD6e.gif) !important;
    background-repeat: no-repeat;
    background-size: cover;
}
#donor-notification .header {
visibility: hidden;
    color: #37b2e5;
    font-size: 38px;
    font-family: Algerian;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 180px !important;
margin-left: -250px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 28px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 150px !important;
margin-left: -70px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 28px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
text-shadow: 2px 2px 1px #000 !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.)