Custom Follower Notification

[Hanger84]

Now that I finally have a custom animation for my follower notification, I want to move it over to Deep Bot, but after trying to use the same info from my donation notifications, I can't get it to work. Any help would be greatly appreciated.

Here is what my current one looks like on Twitch Alerts: http://i.imgur.com/zWWkKK9.jpg
Here is the link for my animation: http://i.imgur.com/mjSZPKo.gif
And below is my CSS for my donation notification..

Also, I was wondering if there is a way to switch both my notification to a font I have on my computer....not one that's on google fonts?
This is the font I use for my whole channel...including my overlays: http://www.dafont.com/ethnocentric.font

Code: [Select]

#donor-notification {
width: 600px !important;
height: 500px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/jo9NKPy.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
background-position-x: center !important;

}


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

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

#donor-notification .message {
font-size: 20px !important;
font-family: Orbitron !important;
color: #ffffff !important;
max-width: 600px !important;
text-shadow: 3px 3px 1px #000 !important;
margin-left: auto !important;
margin-right: auto !important;
}
#donor-notification .amount {
font-size: 26px !important;
font-family: Orbitron !important;
font-weight: normal !important;
text-shadow: 3px 3px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 26px !important;
font-family: Orbitron !important;
font-weight: normal !important;
text-shadow: 3px 3px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' donated ';
}
#donor-notification .title {
padding-top: 314px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}


[ExpertsOnline]

Each notification module has its own code, so you can't simply copy one to the other. Try the below, I have updated the font to the one you have requested as well.

Link : http://deepbot.tv/notifications/follownotification1.htm
Width: 800
Height: 600

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 800px !important;
height: 600px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/mjSZPKo.gif') !important;
background-repeat: no-repeat;
background-position-x: center !important;
overflow: hidden !important;

}
#follow-notification .followname {
position: absolute !important;
margin-top: 480px !important;
margin-left: 0px !important;
text-align: center !important;
width: 800px !important;
font-size: 22px !important;
font-family: ethnocentric !important;
color: #00cebb !important;
-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
    -webkit-text-fill-color: #FFFFFF;


}
#follow-notification .followname:after {
content: ' has boarded The Mothership';
font-family: !important;
}

Preview:

[Hanger84]

Thank you very much! Now I can finally have working notifications that match lol

[Draygera]

Ok, I'm trying this out, and I can't get it to work at all. It's still showing the default follower notification. Got any suggestions?

I'm using basically the same code you are now. :/

EDIT: NVM. Solved the issue. Had body still in the CSS. Deleting that fixed everything