Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: MuddUnders on June 02, 2015, 02:41:17 PM

Title: Custom donation image
Post by: MuddUnders on June 02, 2015, 02:41:17 PM

Donation Alert

Image Link: http://i.imgur.com/qbTSS0i.jpg
Font Style/Link: http://fontzone.net/font-details/aharoni-bold
Font Color: Green
Any text fill/boarder?:NO
Marquee/Scroll Effect?:No
Currency Type: $
Where do you want text located?(Donator Name, Donation Amount, Message): All text below the logo. Text should say "Thank you for the donation <user>" Please have the message area have a solid black background so the green text stands out.
Example (If applicable):NA
Anything else?: Please make the donators name 3x the size of the message.

Title: Re: Custom donation image
Post by: TheNumbLock on June 02, 2015, 03:30:11 PM

Not sure if this is what you wanted exactly. I can change anything you like. Just let me know.

Requested by: MuddUnders

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 2000
Height: 2500

CSS Code:

Code: [Select]

@font-face {
font-family: 'ahronbd';
src: url('http://download1177.mediafire.com/cslrvr11gxag/2824qtj99c093dd/ahronbd.ttf');
}

#donor-notification {
width: 2000px !important;
height: 2000px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/h4qkbBX.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 2250px !important;
margin-left: -350px !important;
font-size: 120px !important;
font-weight: bold !important;
font-family: ahronbd !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: Green;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 1970px !important;
margin-left: -930px !important;
text-transform: capitalize;
font-size: 120px !important;
font-weight: bold !important;
font-family: ahronbd !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: Green;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:before {
content: 'Thanks for the donation ';
}

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

(http://puu.sh/i9vZ0/422f0c7631.jpg)

Title: Re: Custom donation image
Post by: MuddUnders on June 02, 2015, 03:39:27 PM

Thanks for the quick turn around!

Few edits:

1. Can you remove the message and just keep the amount?
2. Make the donation amount ALOT bigger, like 5x bigger?
3. Make the background of the image transparent?

Title: Re: Custom donation image
Post by: TheNumbLock on June 02, 2015, 07:12:41 PM

Had to do some photoshop to delete the white background and then save as .png to keep the transparency.

Updated the Post with CSS/Dimensions changes.

Title: Re: Custom donation image
Post by: MuddUnders on June 03, 2015, 02:55:19 AM

That looks great! Thanks again!