Follow and Donate pop up

[Hiko_Karuga]

imgur: http://imgur.com/xnJZTWY,643L8AU#0

The first is for the follower, 2nd for donators.

Font color is the same as the colored rectangle (purple for followers, yellow/gold for donaters)
The message is supposed to be in the black rectangle. For the message (donators), i'd like it to be set under the black rectangle.

Font is Candara Regular.
Thanks a lot

[jwhite8559]

Requested by: Hiko_Karuga

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Candara';
src: url('http://fontsup.com/download/25380.html');
}

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 650px;
height: 430px;
border-radius: 10px;
background-image: url('http://i.imgur.com/xnJZTWY.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 168px !important;
margin-left: 165px !important;
text-align: center;
width: 313px;
font-size: 32px;
font-family: Candara !important;
text-shadow: 2px 2px 1px #000;
color: purple;
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width:750
Height:450

CSS Code:

Code: [Select]

@font-face {
font-family: 'Candara';
src: url('http://fontsup.com/download/25380.html');
}
 
#donor-notification {
width: 650px !important;
height: 430px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/643L8AU.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
text-shadow: none !important;
}
 
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
        text-align: center !important;
        margin-top: 270px !important;
        margin-left: 175px !important;
        width: 300px !important;
        font-size: 28px !important;
        font-weight: normal !important;
        font-family: Candara !important;
        color: gold !important;

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

#donor-notification .donor {
position: absolute !important;
        text-align: center !important;
        margin-top: 155px !important;
        margin-left: 170px !important;
        width: 300px !important;
        font-size: 28px !important;
        font-weight: normal !important;
        font-family: Candara !important;
        color: gold !important;
}
 
#donor-notification .title {
padding-top: 44px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: left !important;
}

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

[Hiko_Karuga]

Thanks a lot. Is it possible to use it with Xsplit?

[TheNumbLock]

Thanks a lot. Is it possible to use it with Xsplit?

Ya, you just have to replace ' with " in the CSS

[Hiko_Karuga]

Thanks for the work, but it's not working. I get the Xbox style notification, not mine. Dunno what I did wrong.
I changed the CSS as given... Mmmmm....

[Hiko_Karuga]

I'm so stupid, I did'nt see your message. I'll try that

[Hiko_Karuga]

Working! Thanks a lot