Follower and Donation alerts please :)

[gillsminnow]

Follower Alert

Image Link: http://i.imgur.com/wojbh3r.png?1
Font Style/Link: Capture It / http://www.dafont.com/capture-it.font
Font Color: White
Any text fill/boarder?: Black Glow
Where do you want text located? (Follower Name): Centre underneath "Please Welcome"
Example (If applicable): http://i.gyazo.com/ea11178c17bb38075b44ede635fda650.png
Anything else?:

Donation Alert

Image Link: http://i.imgur.com/SJRT3vG.png?1
Font Style/Link: Capture It / http://www.dafont.com/capture-it.font
Font Color: White
Any text fill/boarder?: Black Glow
Currency Type: £
Where do you want text located? Name - Top Centre above "has robbed Minnowtown Bank", Amount centre between "of" "and put on a free disco", Message centre below the picture.
Example (If applicable): http://i.gyazo.com/105131f4811dadf6ee8624d54fece083.png
Anything else?: Disco gif is here - http://i.imgur.com/6ZXgzde.gif?1 / Donation message in the Steelfish Rg font please - http://www.dafont.com/steelfish.font

[TheNumbLock]

The donation one was really hard to do. It will probably mess up if someone writes a short message. I couldn't get it to stay in one location at different message lengths. To get this custom font to work for you, you need to go here: Capture IT and SteelFishRG Don't download but right click the download button and hit copy link. Then you will insert into the CSS where I put InsertDownloadLinkHere for Capture and InsertDownloadLinkHere2 for SteelFishRG.

Requested by: gillsminnow

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Capture';
src: url('InsertDownloadLinkHere');
}

#follow-notification {
display: none;
position: absolute;
width: 650px !important;
height: 150px !important;
border-radius: 0px !important;
background-image: url('http://i.imgur.com/wojbh3r.png?1') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: 30px !important;
width: 400px !important;
font-size: 40px !important;
font-weight: normal !important;
  font-weight: normal !important;
  color: white !important;
  font-family: Capture;
text-shadow: 0 0 1px #000000 , 0 0 3px #000000 , 0 0 5px #000000 , 0 0 7px #000000 , 0 0 9px #000000 , 0 0 10px #000000 , 0 0 15px #000000 ;
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 1080

CSS Code:

Code: [Select]

@font-face {
font-family: 'Capture';
src: url('InsertDownloadLinkHere');
}

@font-face {
font-family: 'SteelFish';
src: url('InsertDownloadLinkHere2');
}

#donor-notification {
position: center !important;
width: 1920px !important;
height: 1080px !important;
background-color: transparent !important;
background-image: url('http://i.imgur.com/SJRT3vG.png?1') !important;
background-size: auto !important;
background-repeat: no-repeat !important;
}


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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 880px !important;
margin-left: 630px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: SteelFish !important;
color: white;
text-shadow: 0 0 1px #000000 , 0 0 3px #000000 , 0 0 5px #000000 , 0 0 7px #000000 , 0 0 9px #000000 , 0 0 10px #000000 , 0 0 15px #000000 ;
}

#donor-notification .amount {
position: absolute !important;
margin-top: 390px !important;
margin-left: -530px !important;
width: 300px !important;
font-size: 50px !important;
font-weight: bold !important;
font-family: Capture !important;
color: white;
text-shadow: 0 0 1px #000000 , 0 0 3px #000000 , 0 0 5px #000000 , 0 0 7px #000000 , 0 0 9px #000000 , 0 0 10px #000000 , 0 0 15px #000000 ;
}

#donor-notification .donor {
position: absolute !important;
margin-top: 200px !important;
margin-left: -30px !important;
width: 400px !important;
font-size: 46px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Capture !important;
color: white;
text-shadow: 0 0 1px #000000 , 0 0 3px #000000 , 0 0 5px #000000 , 0 0 7px #000000 , 0 0 9px #000000 , 0 0 10px #000000 , 0 0 15px #000000 ;
}

.amount:after {
position: fixed !important;
margin-top: 170px !important;
margin-left: 0px !important;
margin-right: -100px !important;
content: url('http://i.imgur.com/6ZXgzde.gif?1') !important;
}

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

[gillsminnow]

Thank you so much for this!

[gillsminnow]

Hmm, the picture seems to move about depending on the donation message length, any way to get it to stay put? The text stays centred fine.

http://i.gyazo.com/80b18b73746bac7fc3b592e30ad92bac.png

[TheNumbLock]

Ya, that is the problem I was having. I tried making it static, but it makes the image stay next to the words, and couldn't move it. But I changed it so it goes off the donation instead. So it won't move as much. Updated the CSS.