Author Topic: Custom donation image  (Read 2485 times)

0 Members and 2 Guests are viewing this topic.

MuddUnders

  • Padawan
  • **
  • Posts: 82
  • Karma: +0/-0
    • View Profile
  • Twitch Name: MuddyUnders
Custom donation image
« 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.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom donation image
« Reply #1 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.)

« Last Edit: June 02, 2015, 07:13:26 PM by RepentGamingTV »
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

MuddUnders

  • Padawan
  • **
  • Posts: 82
  • Karma: +0/-0
    • View Profile
  • Twitch Name: MuddyUnders
Re: Custom donation image
« Reply #2 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?

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom donation image
« Reply #3 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.
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

MuddUnders

  • Padawan
  • **
  • Posts: 82
  • Karma: +0/-0
    • View Profile
  • Twitch Name: MuddyUnders
Re: Custom donation image
« Reply #4 on: June 03, 2015, 02:55:19 AM »
That looks great! Thanks again!