Donation Alert image changing

[HayZ]

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!

[ExpertsOnline]

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

ps. moving this to the custom notifications thread.

[HayZ]

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.

[ExpertsOnline]

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

Donor - Amount
Amount - Donor

[HayZ]

Ah! Sorry

Can I have:
Donor - Amount

Thanks a lot!

[ExpertsOnline]

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:

[HayZ]

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

[ExpertsOnline]

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;
}


[HayZ]

Thanks a lot!
Really appreciate this!