Custom Follower and Donation notification help.

[TundraMike]

Hello!

I was hoping I can get some help turning these GIFs into follower alerts and donation alerts. Any help is greatly appreciated. I would like the GIF to show up small and then to the right the say New follower and their name. Any help is greatly appreciated!

Follower alert GIF:
http://33.media.tumblr.com/tumblr_lfeeap2m6b1qdj3kh.gif

Donation alert GIF:
http://33.media.tumblr.com/tumblr_lfedxpdZx31qdj3kh.gif

[TheNumbLock]

Requested by: TundraMike

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 580
Height: 200

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 580px !important;
height: 155px !important;
background-image: url('http://33.media.tumblr.com/tumblr_lfeeap2m6b1qdj3kh.gif') !important;
background-position: left center;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 220px !important;
width: 200px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: 'New Follower '
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 650
Height: 200

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 155px !important;
background-color: transparent !important;
background-image:url('http://33.media.tumblr.com/tumblr_lfedxpdZx31qdj3kh.gif') !important;
background-repeat: no-repeat !important;
background-position: left center;
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: 30px !important;
margin-left: 80px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 30px !important;
margin-left: -50px !important;
width: 500px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

[TundraMike]

Thank you so much! Is there a video or somewhere you can point me to get them setup and to work properly? With OBS and deepbot.

[TheNumbLock]

Here you go: http://deepbot.deep.sg/forums/index.php?topic=2890.0

[TundraMike]

I cannot get these to work. The link you gave http://deepbot.tv/notifications/donationnotification2.htm is supposed to go in the CLR browser URL then copy and paste the CSS portion on the next tab right? But I'm getting a popup when I preview of a search box. Any help is greatly appreciated!

[TheNumbLock]

Ya, if you want I can teamviewer or skype if you like. PM me either info.

[OfficialprevisioN]

Hello guys
i have one question and i made this notification:

#follow-notification {
display: none;
position: absolute;
width: 580px !important;
height: 580px !important;
background-image: url('http://cdn.makeagif.com/media/8-25-2015/HcY93R.gif') !important;
background-position: left center;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 220px !important;
width: 200px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: 'New Follower '
}


but i try to change the position of the "New Follower"
how can i do this? at the moment the message is on the top right of the alert.
but i want it right over it and i think the resolution is not the right...with width and height
please help me

[TheNumbLock]

To move it around, you adjust the margins under .followname margin-top will move it up and down when you decrease and increase the number, same with margin-left, except left to right.

Requested by: OfficialprevisioN

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 500
Height: 300

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 400px !important;
height: 225px !important;
background-image: url('http://cdn.makeagif.com/media/8-25-2015/HcY93R.gif') !important;
background-position: left center;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 130px !important;
margin-left: 100px !important;
width: 200px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: 'New Follower '
}

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