Custom Notification WorkShop

[TheNumbLock]

Also can you make this slide out from left to right? Thank you

The links to the images says it is not public to view. :/

[fandehgo521]

Donation Alert

Image Link: http://i.imgur.com/qCe9YC6.gif
Font Style/Link: http://dl.dafont.com/dl/?f=strawberry_muffins
Font Color: Greyish Blue (if possible the background color of this -- http://imgur.com/IicvwLL)
Any text fill/boarder?:White thick outline
Currency Type:$
Where do you want text located? Above Vayne tumbling
Example (If applicable): Top Line: "Fandehgo521 has donated $5, Thanks for Supporting the #SellOutDream
                                   Next line: "Donation Message"
                                   *VAYNE TUMBLING*
Anything else?:


Follower Alert

Image Link: http://i.imgur.com/qCe9YC6.gif
Font Style/Link: http://dl.dafont.com/dl/?f=strawberry_muffins
Font Color: Font Color: Greyish Blue (if possible the background color of this -- http://imgur.com/IicvwLL)
Any text fill/boarder?:White thick outline
Where do you want text located? Above Vayne tumbling
Example (If applicable): Top Line: "Fandehgo521 has followed the channel. Thanks for the support!!
                                   *VAYNE TUMBLING*
Anything else?: Thank you so much <3

[Wolfstreet Gaming]

Also can you make this slide out from left to right? Thank you

The links to the images says it is not public to view. :/

My bad!

http://imgur.com/UzGUPeP
http://imgur.com/r9FUnqJ

[TheNumbLock]

Can't make it slide in and out, only from top or bottom. :/ The donation one was a bit hard, since it was kind of limited on space. If you want to remove it coming from the top, just remove ?top=1 in the urls.

Requested by: WolfStreetGaming

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?top=1
Width: 1920
Height: 1080

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/r9FUnqJ.png') !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 0px !important;
margin-left: -250px !important;
width: 700px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Arial !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 10px white !important;
}

.followname:after {
position: absolute !important;
content: 'Welcome to the #WOLFPACK!' !important;
margin-left: -50px !important;
width: 700px !important;
}

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




Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/UzGUPeP.png') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 25px !important;
margin-left: 250px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 16px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: -1110px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 20px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -1070px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 20px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}

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

[TheNumbLock]

Requested by: fandehgo521

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 150px !important;
left: 200px !important;
width: 399px !important;
height: 390px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/qCe9YC6.gif') !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: -80px !important;
margin-left: -150px !important;
width: 700px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 10px white !important;
}

.followname:after {
content: ' has followed the channel. Thanks for the support!!' !important;
}

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




Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 200px !important;
left: 200px !important;
width: 399px !important;
height: 390px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/qCe9YC6.gif') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: -50px !important;
margin-left: -100px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 24px !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: -130px !important;
margin-left: -500px !important;
width: 800px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -170px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 3px !important;
}

.donor:after {
content: ' has donated ' !important;
}

.amount:after {
content: ', Thanks for Supporting the #SellOutDream' !important;
}

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

[fandehgo521]

Thank you so much repent <3

[TheNumbLock]

Requested by: SunshineKid 

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 399px !important;
height: 592px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/31q7EAA.png') !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 25px !important;
margin-left: -85px !important;
width: 400px !important;
font-size: 24px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
-webkit-transform: rotate(-23deg) !important;
}

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

[SunshineKid]

Thanks man looks absolutely great!

[Spishak]

Follower Alert

Image Link: No img
Font Style/Link: http://www.dafont.com/againts.font?text=Welcome+To++The+Madness&back=new
Font Color: Red plz.
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Above the Follwer Name
Example (If applicable):
Anything else?:

Donation Alert

Image Link: No
Font Style/Link: http://www.dafont.com/againts.font?text=Thank+you+for+the+Support%21&back=new
Font Color: Red plz
Any text fill/boarder?:no
Currency Type:$
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) Above the Donation plz!
Example (If applicable):
Anything else?:

[TheNumbLock]

Requested by: Spishak

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 500px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url("http://i.imgur.com/HwoPBKJ.png") !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 50px !important;
margin-left: 80px !important;
width: 400px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
}

.followname:before {
content: "Welcome to the Madness " !important;
}

.followname:after {
content: " !" !important;
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 600
Height: 350

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 500px !important;
height: 200px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url("http://i.imgur.com/HwoPBKJ.png") !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 130px !important;
margin-left: 60px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 24px !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 50px !important;
margin-left: -100px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 50px !important;
margin-left: -100px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
position: absolute;
margin-top: -40px !important;
margin-left: 0px !important;
content: "Thank you for the Support! " !important;
}

.amount:after {
content: "" !important;
}

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

[TramikTV]

I tried using some examples as templates, I'm just having a hard time getting this right. I would really appreciate it if someone gave me a hand. Thanks in advance.

Follower Alert

Image Link: http://i.imgur.com/XePEJtX.gif
Font Style/Link: Big Noodle Tilting (http://www.dafont.com/bignoodle-titling.font)
Font Color: FFA600 (bright orange)
Any text fill/boarder?: Black border around text
Where do you want text located? User (Follower Name): To left of the image, centered vertically.
Example (If applicable):
Anything else?: It'd like it to read "@user@ followed!" with a 60px font

Donation Alert

Image Link: http://i.imgur.com/hFyGn68.gif
Font Style/Link: same
Font Color: same
Any text fill/boarder?: same
Currency Type: USD
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message): same
Example (If applicable):
Anything else?: same as the follower just a different gif, please read as "@user@" donated @amt@!"

Subscriber Alert

Image Link: http://i.imgur.com/7PnAZi9.gif
Font Style/Link: same
Font Color: same
Any text fill/boarder?: same
Where do you want text located? (Subscriber Name) same
Example (If applicable):
Anything else?: read as "@user@ just subscribed!"

[TheNumbLock]

Let me know if you want anything adjusted. Also make sure you installed the font you linked on your pc.

Requested by: TramikTV

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1000
Height: 400

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 400px !important;
width: 258px !important;
height: 182px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/XePEJtX.gif') !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 0px !important;
margin-left: -420px !important;
width: 400px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: BigNoodleTitling !important;
color: #FFA600 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.8px;
text-shadow: 10px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' followed!' !important;
}

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




Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 200px !important;
left: 400px !important;
width: 264px !important;
height: 205px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/hFyGn68.gif') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 80px !important;
margin-left: -540px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 60px !important;
font-family: BigNoodleTitling !important;
color: FFA600 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -50px !important;
margin-left: -400px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 60px !important;
font-family: BigNoodleTitling !important;
color: FFA600 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}

.donor:after {
content: ' donated ' !important;
}

.amount:after {
content: '!' !important;
}

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



Subscriber:

Link: http://deepbot.tv/notifications/subnotification3.htm
Width: 1000
Height: 600

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
  display: none;
  position: absolute;
  top: 150px !important;
  left: 500px !important;
  width: 116px !important;
  height: 136px !important;
  background-repeat: no-repeat;
  background-size: contain !important;
  background-image: url('http://i.imgur.com/7PnAZi9.gif') !important;
  background-position-y: 0px;
}
#resub-notification {
  display: none;
  position: absolute;
  top: 150px !important;
  left: 500px !important;
  width: 116px !important;
  height: 136px !important;
  background-repeat: no-repeat;
  background-size: contain !important;
  background-image: url('http://i.imgur.com/7PnAZi9.gif') !important;
  background-position-y: 0px;
}
.subname {
position: absolute !important;
margin-left: -450px !important;
  margin-top: 50px !important;
  padding-top: 0px !important;
  width: 400px !important;
  text-align: center !important;
  font-size: 60px !important;
  font-weight: normal !important;
  font-family: BigNoodleTitling !important;
  color: #FFA600 !important;
  -webkit-text-stroke: 2px;
  text-transform: capitalize;
  -webkit-text-stroke-color: black;
}

.months {
visibility: hidden !important;
}

.months:after {
visibility: hidden !important;
}

.badge {
visibility: hidden !important;
}

.subname:after {
position: absolute !important;
margin-left: -380px !important;
  margin-top: 50px !important;
  width: 500px !important;
content: ' just subscribed!' !important;
}

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

[TramikTV]

Let me know if you want anything adjusted. Also make sure you installed the font you linked on your pc.

Dude - that's excellent. If possible could we make the gifs aboirt 50% smaller (basically the default size in the links)? They'd just take up too much room being that big. I think the text size is good. Thanks so much for your work.

[SeanKushery423]

Donation Alert

Image Link: http://imgur.com/gallery/YQeWejH
Font Style/Link: Stencil
Font Color: Gray with Green outline
Any text fill/boarder?: I would like a clean boarder just to clean it up, maybe a Grey and Green line box
Currency Type: USD
Where do you want text located? In the middle of the GIF. It should say (name) just donated (amount)!
Example (If applicable):
Anything else?:

Follower Alert

Image Link: http://imgur.com/gallery/a03YMIc
Font Style/Link: Broadway
Font Color:  Gray with Blue outline
Any text fill/boarder?: Same Boarder as the donations alert
Where do you want text located? Just above the text in the GIF (Follower Name): (follower name) followed
Example (If applicable):
Anything else?:

[TheNumbLock]

Let me know if you want anything adjusted. Also make sure you installed the font you linked on your pc.

Dude - that's excellent. If possible could we make the gifs aboirt 50% smaller (basically the default size in the links)? They'd just take up too much room being that big. I think the text size is good. Thanks so much for your work.

Updated post with new CSS.