All the Custom Alerts minus the Sub

[Chetty82]

Follower Alert

Image Link:http://imgur.com/K87fJ1c
Font Style/Link:Arial
Font Color:White
Any text fill/boarder?:no
Where do you want text located? (Follower Name):Right Below the Gif
Example (If applicable): Follower name Thank you for the Follow!!!
Anything else?:




Donation Alert

Image Link:http://imgur.com/O8roBjb
Font Style/Link:Arial
Font Color:White
Any text fill/boarder?:No
Currency Type:U.S.
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message):Donor Name has just donated $**. Thank you!!!
Example (If applicable):
Anything else?:


Host Alert

Image Link:http://imgur.com/1EZ4OfT
Font Style/Link:Arial
Font Color:Red
Any text fill/boarder?:No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers):Host name is bringing the party.
Example (If applicable):
Anything else?:Would like the numbers in a red circle and put in the top right hand corner of the gif please. Also I would like to add a cut song to it as well.

[TheNumbLock]

Requested by: chetty82

Follower:

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

CSS Code:

Code: [Select]

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: -20px !important;
width: 500px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

.followname:after {
content: ', Thank you 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: 500

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 100px !important;
width: 413px !important;
height: 230px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/O8roBjb.gif') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 260px !important;
margin-left: -310px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 34px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 220px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 34px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: '';
}
 
.donor:after {
content: ' has just donated ';
}

.amount:after{
content: '. Thank you!!!';
}

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



Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=480&h=360
Width: 640
Height: 480

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px;
    width: 600px;
    height: 150px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/1EZ4OfT.gif);
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 220px !important;
    margin-left: 70px !important;
    text-align: center;
    width: 313px;
    font-size: 24px;
    font-family: Arial !important;
    text-shadow: none !important;
    color: red !important;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    margin-left: 430px !important;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
    border-radius: 50%;
    width: 44px;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 3px solid #F00;
    font: 22px Arial !important;
    -webkit-transform: rotate(45deg);
}
.hostnumber {
    position: relative;
    top: 11%;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Arial !important;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is bringing the party!';
}
.hostnum:after {
    content: '';
}

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