Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: HayZ on September 15, 2014, 09:10:25 AM

Title: Donation Alert image changing
Post by: HayZ on September 15, 2014, 09:10:25 AM

Hi,

How do I go about changing my donation popup image?

Have it linked and everything but can't seem to change it.

Its this: http://i.imgur.com/zYGD7I3.png

Thanks in advance!

Title: Re: Donation Alert image changing
Post by: ExpertsOnline on September 15, 2014, 11:13:48 AM

Please can you specify what you want shown on the popup and its placement?

ps. moving this to the custom notifications thread.

Title: Re: Donation Alert image changing
Post by: HayZ on September 16, 2014, 12:29:07 AM

Can't I change the placement in OBS itself? If not, I'd like it in the top middle around here: http://gyazo.com/a3ea4003735d107f66aee658df069773

I think just a nice fade-in will be ok :) nothing too fancy and Calibri font too.

Thanks a lot! You really are the best.

Title: Re: Donation Alert image changing
Post by: ExpertsOnline on September 16, 2014, 02:28:53 AM

I meant, what do you want written inside and in which order

Donor - Amount
Amount - Donor

Title: Re: Donation Alert image changing
Post by: HayZ on September 16, 2014, 06:22:06 AM

Ah! Sorry :P

Can I have:
Donor - Amount

Thanks a lot! :D

Title: Re: Donation Alert image changing
Post by: ExpertsOnline on September 16, 2014, 01:42:34 PM

Donation

Link : http://deepbot.tv/notifications/donationnotification2.htm?top=1
Width: 590
Height: 120

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/zYGD7I3.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}


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

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

#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 50px;
width: 100%;
float: left;
text-align: center;
}


Preview:
(http://puu.sh/bB2bs/2a82d9e7b3.jpg)

Title: Re: Donation Alert image changing
Post by: HayZ on September 17, 2014, 03:31:59 AM

Hi again!

Sorry to bother you again, I have a slight problem with it.

Not sure whats gone wrong with it but it looks like this now: http://gyazo.com/8db0a92bcb509fb51df3447f7cae261a

Could I also get it to fade in and out instead of slide in?

If theres anything you can do, I'd appreciate it.
I need to learn this CSS stuff =/

Thanks again! <3

Title: Re: Donation Alert image changing
Post by: ExpertsOnline on September 17, 2014, 01:35:56 PM

Apologies - was tired and missed a few !important tags.

Please use the below CSS. As for fade, simply remove the ?top=1 from the link

CSS Code

Code: [Select]

#donor-notification {
width: 580px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/zYGD7I3.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}


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

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

#donor-notification .message {
position: absolute !important;
visibility: hidden !important;
}
#donor-notification .amount {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ' !important;
}
#donor-notification .title {
position: absolute !important;
padding-top: 50px !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}


Title: Re: Donation Alert image changing
Post by: HayZ on September 19, 2014, 10:19:15 PM

Thanks a lot!
Really appreciate this!