Help with Follower&Donation alerts

[MGRhino]

Hi guys.
I need ready css, or explanation how to exactly create right css for alerts.
Here are pictures that i want to add:
Followers http://i.imgur.com/0EQfFl2.png (Franklin Gothic Demi, Italic, white stroke on Nickname)
Donate http://i.imgur.com/ezmEUF0.png (Comic sans Red, Green for $amount)


Sample (how i want) screen size will be 1920*1080:
http://i.imgur.com/VYlRu5U.jpg

[TheNumbLock]

Requested by: MGRhino

Donation:

Link: http://deepbot.tv/notifications/donationnotification.htm
Width: 350
Height: 450

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 300px !important;
height: 400px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/ezmEUF0.png') !important;
overflow: hidden !important;
}

#donor-notification .date {
visibility: hidden !important;
}

#donor-notification .streamname {
visibility: hidden !important;
}

#donor-notification .message {
position: absolute;
margin-left: 50px !important;
margin-top: -40px !important;
line-height: 24px !important;
text-align: left !important;
font-size: 20px !important;
font-family: Comic sans !important;
color: red !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 170px !important;
margin-left: 30px !important;
width: 250px !important;
padding-top: 0px !important;
text-align: center !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 20px !important;
font-family: Comic sans !important;
text-shadow: 1px 1px 1px #000 !important;
color: green !important;
}
#donor-notification .donor {
position: absolute;
margin-left: 35px !important;
margin-top: 50px !important;
width: 300px !important;
text-align: center !important;
line-height: 28px !important;
vertical-align: initial !important;
font-size: 22px !important;
font-family: Comicsans !important;
color: red !important;
}

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



Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=10000
Width: 440
Height: 160

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 370px !important;
height: 120px !important;
border-radius: 0px !important;
background-image: url('http://i.imgur.com/0EQfFl2.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 30px !important;
margin-left: 100px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Franklin Gothic !important;
font-style: italic !important;
color: red !important;
-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

Preview: (Black Background is part of my setup, it is transparent.)

[TheNumbLock]

There you go, spaced out the donation one. Hopefully that works for you.