Custom Notification WorkShop

[Blindleader]

Looks great as it is

[TheNumbLock]

Requested by: Blindleader

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
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/AhWxLCH.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: 180px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
color: black !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}

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

.followname:after {
content: ' is now following!' !important;
}

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



Donation:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 580px !important;
    height: 110px !important;
    background-image: url(http://i.imgur.com/AhWxLCH.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 30px !important;
margin-left: -160px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: black !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -20px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: black !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: ' has added ' ;
}

.amount:after {
content: ' to the stash!' ;
}

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



GameWisp:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 600
Height: 150

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden !important;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 580px !important;
  height: 110px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/AhWxLCH.png) !important;
  background-size: contain !important;
}
 
#sub-notification .subname {
  margin-left: 220px !important;
  padding-top: 20px !important;
  width: 300px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 28px !important;
  font-family: Impact !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: black !important;
  -webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .subtier {
 position: absolute;
  top: 50px !important;
  margin-left: 150px;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 28px !important;
  font-family: Impact !important;
  text-shadow: none !important;
  color: black !important;
    -webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .submonths {
visibility: hidden !important;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: '' !important;
}
 
#sub-notification .newsubmsg::after {
  content: '' !important;
}

#sub-notification .submonths::before{
  content: '';
}

#sub-notification .subname::after {
  content: '' !important;
}

#sub-notification .subtier::before {
  content: ' has subscribed to sub tier ' !important;
}

#sub-notification .subtier::after {
  content: '!' !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

[Blindleader]

Wonderful, thank you so much!

[n008down]

request by: n008down

I need your help! I just started streaming again and now wanna use the DeepBot. But my alert is not working fine because i want my own picture in it :/
Thank u so much!!


Follower Alert

Image Link: http://imgur.com/a/BNBQb
Font Style/Link: Arial Bolt
Font Color: red
Any text fill/boarder?: no, just the name
Where do you want text located? (Follower Name): centered under the "new follower"
Example (If applicable):
Anything else?:




Donation Alert

Image Link: http://imgur.com/a/84DNl
Font Style/Link: Arial Bolt
Font Color: Green
Any text fill/boarder?: no
Currency Type: EUR
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): just name and amount. both centered under the "new donator".
Example (If applicable):
Anything else?:

[TheNumbLock]

Requested by: n008down

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
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/SgxIzNq.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 135px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Arial !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-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?ccy=%E2%82%AC (You must use this URL if you want it to show in Euros)
Width: 600
Height: 150

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 580px !important;
    height: 110px !important;
    background-image: url(http://i.imgur.com/SR3UXEt.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 40px !important;
margin-left: -260px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: green !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 5px !important;
margin-left: -120px !important;
width: 400px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: green !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: '' ;
}

.amount:after {
content: '' ;
}

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

[n008down]

Thank you so much!

[YoungAndDangerous]

i have two pictures that i want animated text of follower and donation in the middle of the pictures is it possible for you to add the cool animation like any cool animation would do

[TheNumbLock]

i have two pictures that i want animated text of follower and donation in the middle of the pictures is it possible for you to add the cool animation like any cool animation would do

I really don't mess with animations because I am not good at them, but I can try.

[YoungAndDangerous]

im posting the css code i have and if you could implement it with the pictures i want it would be epic and i only need the css text to show the name of the guy who followed or donated nothing more then the name since the pictures have New Follower & New Donation.

THE CSS CODE BELOW!

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }html, body {  margin: 0;  padding: 0;}  #widget, #body, #alert-box, #wrap, #alert-text-wrap, #alert-text{  position: relative;  overflow: hidden;  width: 1920px;  height: 1080px;  top: 0;  left: 0;  opacity: 1;}#alert-box.hidden, .hidden {  opacity: 1;}#line {  width: 0;  height: 0;  position: absolute;  top: 400px;  left: 50%;  margin-left: 0;  display: block;  -webkit-transform: rotate(-5deg);          transform: rotate(-5deg);  opacity: 0;  -webkit-animation: lineIn 0.2s .6s forwards,              lineGrow 0.4s 1s forwards,             linehide 0.5s 6.7s forwards;          animation: lineIn 0.2s .6s forwards,              lineGrow 0.4s 1s forwards,             linehide 0.5s 6.7s forwards; }@-webkit-keyframes lineIn {  0% {width: 0; height: 0px;}  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}}@keyframes lineIn {  0% {width: 0; height: 0px;}  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}}@-webkit-keyframes lineGrow {  0% {}  100% {height: 200px; top: 300px;}}@keyframes lineGrow {  0% {}  100% {height: 200px; top: 300px;}}@-webkit-keyframes linehide {  0% {height: 200px;top: 300px;}  100% {height: 0px; top: 400px;}}@keyframes linehide {  0% {height: 200px;top: 300px;}  100% {height: 0px; top: 400px;}}#mainText {  text-align: center;  font-size: 100px;  width: 2200px;  display: block;  line-height: 100px;  text-indent: -3000px;  position: absolute;  top: 30px;  white-space: nowrap;  opacity: 0;  font-family: "BigNoodleTitling", sans-serif;  font-style: italic;  text-transform: uppercase;  display: block !important;  position: absolute !important;  -webkit-animation: textIn 0.4s 1.4s forwards,             textTravel 4.6s 1.8s linear forwards;          animation: textIn 0.4s 1.4s forwards,             textTravel 4.6s 1.8s linear forwards;}@-webkit-keyframes textIn {  0% {text-indent: -3000px;opacity: 1;}  100% {text-indent: -20px;opacity: 1;} }@keyframes textIn {  0% {text-indent: -3000px;opacity: 1;}  100% {text-indent: -20px;opacity: 1;} }@-webkit-keyframes textTravel {  0% {text-indent: -20px;}  90% {text-indent: 20px;}  95% {text-indent: 3000px;}   100% {text-indent: 3000px;} }@keyframes textTravel {  0% {text-indent: -20px;}  90% {text-indent: 20px;}  95% {text-indent: 3000px;}   100% {text-indent: 3000px;} }#subText {  text-align: center;  font-size: 40px;  width: 2200px;  display: block;  line-height: 40px;  text-indent: 3000px;  position: absolute;  bottom: 30px;  white-space: nowrap;  opacity: 0;  font-family: "BigNoodleTitling", sans-serif;  font-style: italic;  text-transform: uppercase;  display: block !important;  position: absolute !important;  -webkit-animation: tagIn 0.4s 1.4s forwards,             tagTravel 4.6s 1.8s linear forwards;          animation: tagIn 0.4s 1.4s forwards,             tagTravel 4.6s 1.8s linear forwards;}@-webkit-keyframes tagIn {  0% {text-indent: 3000px;opacity: 1;}   100% {text-indent: 20px;opacity: 1;} }@keyframes tagIn {  0% {text-indent: 3000px;opacity: 1;}   100% {text-indent: 20px;opacity: 1;} }@-webkit-keyframes tagTravel {  0% {text-indent: 20px;}  90% {text-indent: -20px;}  95% {text-indent: -3000px;}   100% {text-indent: -3000px;}}@keyframes tagTravel {  0% {text-indent: 20px;}  90% {text-indent: -20px;}  95% {text-indent: -3000px;}   100% {text-indent: -3000px;} }

http://imgur.com/Ku31JmQ picture 1
http://imgur.com/zP3dSoe picture 2

[TheNumbLock]

I am confused on the CSS code, does that have both the follower and donation CSS?

[YoungAndDangerous]

yeah it should have both in there. But you know what, if you can make any type of cool animation that you know u can il be happy. I'm not going to ask for to much i'm just happy to get some help so if you could do that it would be wonderful

but i found this animation that maybe you could implement. il drop the link to it in here: http://codepen.io/anon/pen/bgYaRr

if you can't do that, any animations will be cool

[TheNumbLock]

I could not figure out the CSS animation here: http://codepen.io/anon/pen/bgYaRr but I got the ones in the CSS Code to work.

Requested by: YoungAndDangerous

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=8000 (I recommend setting duration in the Config Tab > Follower Notifications to 8 Seconds near the bottom)
Width: 1100
Height: 450

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

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

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

#follow-notification .followname {
    width: 0;
    height: 0;
    position: absolute;
    top: 400px;
    left: 50%;
    margin-left: 0;
    display: block;
    font-family: "BigNoodleTitling", sans-serif;
    font-size: 100px;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    opacity: 0;
    -webkit-animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 7.0s forwards;
    animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 7.0s forwards;
}

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

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

@-webkit-keyframes lineIn {
    0% {
        width: 0;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        margin-top: -120px;
        opacity: 1;
        height: 3px;
    }
}
@keyframes lineIn {
    0% {
        width: 0;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        margin-top: -120px;       
        opacity: 1;
        height: 3px;
    }
}
@-webkit-keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@-webkit-keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 800px;
    }
}
@keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 800px;
    }
}

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

I don't really do gifs, so no pic here.


Donation:

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

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 1000px !important;
    height: 394px !important;
    background-image: url("http://i.imgur.com/Ku31JmQ.png") !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
text-align: center;
font-size: 90px;
width: 1000px;
display: block;
line-height: 40px;
text-indent: 800px;
position: absolute;
margin-top: 200px !important;
margin-left: 1250px !important;
white-space: nowrap;
opacity: 0;
font-family: "BigNoodleTitling", sans-serif;
font-style: italic;
text-transform: uppercase;
display: block !important;
position: absolute !important;
-webkit-animation: tagIn 0.4s 0.6s forwards, tagTravel 3.0s 1.9s linear forwards;
animation: tagIn 0.4s 0.6s forwards, tagTravel 3.0s 1.9s linear forwards;
}
#donor-notification .donor {
text-align: center;
font-size: 90px;
width: 1000px;
display: block;
line-height: 40px;
text-indent: 800px;
position: absolute;
margin-top: 150px !important;
margin-left: 1250px !important;
white-space: nowrap;
opacity: 0;
font-family: "BigNoodleTitling", sans-serif;
font-style: italic;
text-transform: uppercase;
display: block !important;
position: absolute !important;
-webkit-animation: tagIn 0.4s 0.6s forwards, tagTravel 1.8s 1.0s linear forwards;
animation: tagIn 0.4s 0.6s forwards, tagTravel 1.8s 1.0s linear forwards;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: "" ;
}

.amount:after {
content: "" ;
}

@-webkit-keyframes tagIn {
    0% {
        text-indent: 500px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@keyframes tagIn {
    0% {
        text-indent: 1000px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@-webkit-keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -2400px;
    }
    100% {
        text-indent: -2500px;
    }
}
@keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -2400px;
    }
    100% {
        text-indent: -2500px;
    }
}

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

I don't really do gifs, so no pic here.

[YoungAndDangerous]

thanks will try it out now

[YoungAndDangerous]

its showing other images when i hit the preview button on both donation & follower? i dont get it when i check my image links its the right ones but for some reason it shows a xbox loading follower notification and a crappy donations background picture. nothing like mine? am i doing something wrong or?

[TheNumbLock]

What URLS are you using in the CLR Browser?