Custom Notification WorkShop

[TheNumbLock]

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now?

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound with the message and the name insert the notification that will be great

ps: found it as gif https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread.

[Charanor]

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now?

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound with the message and the name insert the notification that will be great

ps: found it as gif https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread.

i i see it and edit the post before, sorry haha its a donation notification

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

[TheNumbLock]

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now?

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound with the message and the name insert the notification that will be great

ps: found it as gif https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread.

i i see it and edit the post before, sorry haha

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

Do you have a link to the font?

Also what currency do you want?

[Charanor]

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now?

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound with the message and the name insert the notification that will be great

ps: found it as gif https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread.

i i see it and edit the post before, sorry haha

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

Do you have a link to the font?

Also what currency do you want?

https://www.microsoft.com/typography/fonts/family.aspx?FID=372

[TheNumbLock]

Requested by: Charanor

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 50px !important;
width: 700px !important;
height: 350px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.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: 340px !important;
margin-left: -310px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !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: 310px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: 'Danke ';
}
 
.donor:after {
content: ' für deine Donation ';
}

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

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

[Charanor]

Requested by: Charanor

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 50px !important;
width: 700px !important;
height: 350px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.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: 340px !important;
margin-left: -310px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !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: 310px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: 'Danke ';
}
 
.donor:after {
content: ' für deine Donation ';
}

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

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

it is perfect thanx for your work and time! Big thanx!

[Spiidermantv]

1. Do you still do these custom donation notifications?
2. Can there be an animation besides a gif?
2a. If I can't get an animation besides a gif,
      what is the easiest way to do that?

[TheNumbLock]

1. Do you still do these custom donation notifications?
2. Can there be an animation besides a gif?
2a. If I can't get an animation besides a gif,
      what is the easiest way to do that?

1. Yes
2. Technically yes, but honestly depends on what you want. I am not that good with animations. Kind of some basic things here: http://www.w3schools.com/css/css3_animations.asp
2a. I am not really sure. o.o

[Charanor]

Follower Alert

Image Link: without text: https://www.dropbox.com/s/cj9v5o6q5s92b8y/follower%20banner.png?dl=0    with text: https://www.dropbox.com/s/y2u0awiqtwhb3k2/followerBanner.png?dl=0
Font Style/Link: http://www.cssfontstack.com/Arial-Black
Font Color: ff0000  Red if you can with an white shine
Any text fill/boarder?: Welcome to the Beard Club!
Where do you want text located? (Follower Name): under the "Welcome..."
Example (If applicable):
Anything else?:   

[TheNumbLock]

Follower:

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

CSS Code:

Code: [Select]

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 300px !important;
margin-left: 300px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0px;
text-shadow: 0 0 5px #ffffff , 0 0 10px #ffffff , 0 0 15px #ffffff , 0 0 20px #ffffff , 0 0 25px #ffffff , 0 0 30px #ffffff , 0 0 35px #ffffff !important;
}

.followname:before {
content: 'WELCOME TO THE BEARD CLUB ' !important;
}

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

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

[Charanor]

Perfekt!! Thanx for the great work! 

[WoodedCobra]

Follower Alert

Image Link: http://imgur.com/sLpMtNF
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Center
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/tWVMPQG
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?: No
Currency Type: £
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Donator Name and Amount
Example (If applicable):
Anything else?:

[TheNumbLock]

Requested by: Wooded Cobra

Follower:

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

CSS Code:

Code: [Select]

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 30px !important;
margin-left: 50px !important;
width: 500px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: '' !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?dur=10000&ccy=%C2%A3
Width: 620
Height: 150

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/tWVMPQG.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 30px !important;
margin-left: -190px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 34px !important;
font-family: Arial !important;
color: white !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: 30px !important;
margin-left: -290px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 34px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: '';
}
 
.donor:after {
content: ' - ';
}

.amount:after{
content: '';
}

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

[anthonydh88]

Host Alert
Image Link: http://i.imgur.com/Cv3jzwH.gif
Font Style/Link: http://www.dafont.com/rogue-hero.font?text=DEAD+POOL or anything is fine.
Font Color: white with black outline
What do you want the alert to say? Host Name
                                              Thanks for The Host

[TheNumbLock]

Requested by: anthonydh88

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=550&h=450
Width: 640
Height: 500

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}

#host-notification {
    top: 0px;
    left: 100px;
    width: 300px;
    height: 200px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/Cv3jzwH.gif) !important;
    background-repeat: no-repeat;
    overflow: hidden !important;
}
#host-notification .hostname {
    margin-top: 180px !important;
    margin-left: 40px !important;
    text-align: center;
    width: 500px !important;
    font-size: 36px !important;
    font-family: Rogue Hero !important;
    font-weight: regular !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 2px;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 0px !important;
    margin-left: 2px;
    text-shadow: none !important;
    color: #900020 !important;
    border-radius: 50%;
    width: 500px !important;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 0px solid #F00 !important;
    font: 30px Papyrus Regular !important;
    -webkit-transform: rotate(0deg) !important;
}
.hostnumber {
visibility: hidden !important;
    position: absolute !important;
    margin-top: 400px !important;
    margin-left: -250px !important;
    top: 0 !important;
    font-family: Arial !important;
    font-weight: bold !important;
    font-size: 36px !important;
    color: white !important;
    text-shadow: none !important;
    width: 500px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 36px !important;
    line-height: 26px;
    font-family: Arial !important;
    font-weight: bold !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    position: relative !important;
    top: 30px !important;
    margin-left: -330px !important;
    width: 500px !important;
    content: 'Thanks for the host!' !important;
}
.hostnumber:after {
    content: ' viewers!' !important;
}

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