Author Topic: Custom Notification WorkShop (Read 262060 times)

puuhbear · « **Reply #435 on:** May 08, 2017, 01:45:21 AM »

oh cool...

indeed it is the overwatch one!

Edit OK full infos :

Follower Alert

Font Style/Link: https://dl.dropboxusercontent.com/s/9by7zjws454amsq/AGENCYB.TTF
Font Color: Name should be #48c3d9 and text should be #FFFFFF
What do you want the alert to say? {name} hat gefollowed!
Any text fill/boarder?: small boarder in black
Anything else?:

Code: [Select]

Donation Alert

Font Style/Link: https://dl.dropboxusercontent.com/s/9by7zjws454amsq/AGENCYB.TTF
Font Color: Name, amount and currency should be #48c3d9 and text should be #FFFFFF
Any text fill/boarder?: small boarder in black
Currency Type: Euros
What do you want the alert to say? {name} hat {amount currency} gespendet!
Anything else?:

Code: [Select]

Cheer Alert

Font Style/Link: https://dl.dropboxusercontent.com/s/9by7zjws454amsq/AGENCYB.TTF
Font Color: Name and amount should be #48c3d9 and text and "bits" should be #FFFFFF
Any text fill/boarder?: small boarder in black
Currency Type: Bits
What do you want the alert to say? {name} hat {amount} bits gespendet!
Example (If applicable):
Anything else?:

I hope you can do something whith that

TheNumbLock · « **Reply #436 on:** May 08, 2017, 03:35:29 AM »

I am having issues trying to get the cheer one to work. But follower/donation ones are below.

Follower:

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

CSS Code:

Code: [Select]

body,
html {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "BigNoodleTitling", sans-serif !important;
    font-style: italic !important;
    overflow: hidden !important;
}
#follow-notification {
    background: rgba(37, 48, 74, .8) !important;
    background-image: none !important;
}
#follow-name {} #notification-header {
    color: rgb(240, 242, 245) !important;
}
/* START OF FOLLOW-NOTIFICATIONS DEFINITIONS */

#follow-notification {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    top: 400px !important;
    left: 50% !important;
    margin-left: 0 !important;
    -webkit-transform: rotate(-5deg) !important;
    transform: rotate(-5deg) !important;
    opacity: 0 !important;
    -webkit-animation: linein 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    background-repeat: no-repeat;
}
@-webkit-keyframes lineIn {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        opacity: 1;
        height: 3px;
    }
}
@keyframes lineIn {
    0% {
        width: 0px;
        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;
    }
}
/* END OF FOLLOW-NOTIFICATION DEFINITIONS */
/* START OF FOLLOW-NAME DEFINITIONS */

#follow-name {
    text-align: center !important;
    font-size: 100px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 100px !important;
    text-indent: -3000px !important;
    position: absolute !important;
    top: 30px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    margin-left: 0px !important;
    font-family: inherit !important;
    text-shadow: none !important;
    color: #14E6FD !important;
}
@-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;
    }
}
/* END OF FOLLOW-NAME DEFINITIONS */
/* START OF NOTIFICATION-HEADER DEFINITIONS */

#notification-header {
    text-align: center !important;
    font-size: 40px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 40px !important;
    text-indent: 3000px;
    position: absolute !important;
    bottom: 30px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    text-align: center;
    vertical-align: initial !important;
    font-family: inherit !important;
    text-shadow: none !important;
    text-decoration: none !important;
    color: rgb(240, 242, 245) !important;
    visibility: visible !important;
    padding-top: 0px !important;
    border-bottom: none !important;
}
@-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;
    }
}
/* END OF NOTIFICATION-HEADER DEFINITIONS */

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

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 1080

CSS Code:

Code: [Select]

body,
html {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "BigNoodleTitling", sans-serif !important;
    font-style: italic !important;
    overflow: hidden !important;
}
#donor-notification {
    background: rgba(37, 48, 74, .8) !important;
    background-image: none !important;
}
#donor-notification .header {
    visibility: hidden !important;
}
#donor-notification .message {
    visibility: hidden !important;
}
#donor-notification .amount {
    visibility: visible !important;
}
/* START OF FOLLOW-NOTIFICATIONS DEFINITIONS */

#donor-notification {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    top: 400px !important;
    left: 50% !important;
    margin-left: 0 !important;
    -webkit-transform: rotate(-5deg) !important;
    transform: rotate(-5deg) !important;
    opacity: 0 !important;
    -webkit-animation: linein 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    background-repeat: no-repeat;
}
@-webkit-keyframes lineIn {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        opacity: 1;
        height: 3px;
    }
}
@keyframes lineIn {
    0% {
        width: 0px;
        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;
    }
}
/* END OF FOLLOW-NOTIFICATION DEFINITIONS */
/* START OF FOLLOW-NAME DEFINITIONS */

#donor-notification .donor {
    text-align: center !important;
    font-size: 100px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 100px !important;
    text-indent: -3000px !important;
    position: absolute !important;
    top: 30px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    margin-left: 0px !important;
    font-family: inherit !important;
    text-shadow: none !important;
    color: #14E6FD !important;
}
@-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;
    }
}
/* END OF FOLLOW-NAME DEFINITIONS */
/* START OF NOTIFICATION-HEADER DEFINITIONS */

#donor-notification .amount {
    text-align: center !important;
    font-size: 40px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 40px !important;
    text-indent: 3000px;
    position: absolute !important;
    bottom: 40px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    text-align: center;
    vertical-align: initial !important;
    font-family: inherit !important;
    text-shadow: none !important;
    text-decoration: none !important;
    color: #14E6FD !important;
    visibility: visible !important;
    padding-top: 0px !important;
}
.amount:before {
    content: 'Just Donated ' !important;
    color: rgb(240, 242, 245) !important;
}
@-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;
    }
}
/* END OF NOTIFICATION-HEADER DEFINITIONS */

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

puuhbear · « **Reply #437 on:** May 08, 2017, 04:39:13 AM »

Works like a charm

thanks a lot

Only thing, can I change the text from the followalert to "{name} hat gefolgt!" and the text from the donation to "{name} hat {amount}€ gespendet!" somewhere myself? because I'm a german streamer and my viewers usualy donate euros and not dollars.

puuhbear · « **Reply #438 on:** May 10, 2017, 12:08:57 AM »

OkOkOk

With the help of *best support ever* MercurY3rd I managed to figure out the changes for the followeralert (with a local html file) and the donationalert (found that in the css and wasn't aware of the &ccy=€ thing in the link) .

Now I would just need the cheers stuff, but I know you're allready on it

MercurY3rd also informed me, that there is a hostalert too, wich I wasn't aware of. I would love to have that too if possible

Something in the same style with "*name* hostet mich mit *number* Zuschauern*" as a text.

I hope I'm not asking to much here :/

TheNumbLock · « **Reply #439 on:** May 10, 2017, 12:19:47 AM »

The host alert, I can try (I think I have that one setup, and should be able to change the words). The cheer one, I just can't figure out how to get it to work. Do you happen to have the CSS you were using for the cheer one?

puuhbear · « **Reply #440 on:** May 10, 2017, 12:28:57 AM »

shure... but don't know if it helps a lot...

I do it with Tipeee so far. The CSS is:

Code: [Select]

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: "AGENCY FB", 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: "AGENCY FB", 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;} 
}

and in the massagebox on Tipeee I entered:

Code: [Select]

<b style="background: rgba(37, 48, 74, .8)" id="line"><b id="mainText">{name}</b><b id="subText"> hat {amount} bits gespendet!</b></b>

I could also provide the HTML link if that helps.

RagingRedneck83 · « **Reply #441 on:** May 10, 2017, 02:55:07 AM »

Follower Alert

Image Link: http://imgur.com/nCKhaCn
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
Where do you want text located? (Follower Name): in the box on the image
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/U16oeY7
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
Currency Type: USD
What do you want the alert to say? (Text Options: Donator Name, Donation Amount): (name) Thanks for the (amount) Donation
Example (If applicable):
Anything else?:

Subscriber Alert

Image Link: http://imgur.com/JCCcMqM
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
What do you want the alert to say? (Text Options: Sub Name, Months): (name) has subbed for (months)
Example (If applicable):
Anything else?:

Host Alert

Image Link: http://imgur.com/ZLF8rsH
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
What do you want the alert to say? (Text Options: Host Name, Amount of Viewers): (name) hosted with (amount) viewers
Example (If applicable):
Anything else?:

Bits Alert

Image Link: http://imgur.com/IGGGZgk
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
What do you want the alert to say? (Text Options: Veiwers Name, Amount of bits): (name) thanks for the (amount) bits
Example (If applicable):
Anything else?:

TheNumbLock · « **Reply #442 on:** May 10, 2017, 03:28:16 AM »

Do you have a link to the font?

RagingRedneck83 · « **Reply #443 on:** May 10, 2017, 05:14:05 AM »

updated the request with the link.

TheNumbLock · « **Reply #444 on:** May 12, 2017, 08:52:21 AM »

Requested by: FatalOmen

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 638px !important;
height: 171px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/nCKhaCn.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: 170px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: normal !important;
font-family: Abaddon ll !important;
color: #3e3d40 !important;
text-transform: capitalize;
-webkit-text-stroke-color: #b80000;
-webkit-text-stroke-width: 1px;
}

.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
Width: 700
Height: 200

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: 638px !important;
    height: 171px !important;
    background-image: url(http://i.imgur.com/U16oeY7.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: 35px !important;
margin-left: -120px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 26px !important;
font-family: Abaddon ll !important;
color: #3e3d40 !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 35px !important;
margin-left: -150px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 26px !important;
font-family: Abaddon ll !important;
color: #3e3d40 !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #b80000;
-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: ' Thanks for the ';
}

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

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

Subscriber:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 638px;
    height: 171px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url(http://i.imgur.com/JCCcMqM.png) !important;
}

#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 638px;
    height: 171px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url(http://i.imgur.com/JCCcMqM.png) !important;
}

.subname {
margin-left: 20px !important;
  padding-top: 75px !important;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
  font-family: Abaddon ll !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: #3e3d40 !important;
  -webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
}

.subname:after {
content: ' has subbed for '
}

.months {
  position: absolute;
  top: 75px !important;
  margin-left: 400px !important;
  width: 165px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
font-family: Abaddon ll !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: #3e3d40 !important;
  -webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
}

.months::after {
  content: ' Months!';
}
.badge {
    position: absolute;
    top: 50px;
    margin-left: 420px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    -webkit-animation: rot 3s infinite linear;
}
.msg {
    position: absolute;
    top: 20px;
    margin-left: 40px;
    width: 60%;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}


@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

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

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=638&h=171
Width: 650
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 638px;
    height: 171px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/ZLF8rsH.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -30px !important;
    margin-left: 30px !important;
    text-align: center;
    width: 420px !important;
    font-size: 28px !important;
    font-family: Abaddon ll !important;
    text-shadow: none !important;
    color: #3e3d40 !important;
    -webkit-text-stroke-color: #b80000;
    -webkit-text-stroke-width: 1px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 55px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 28px !important;
    font-family: Abaddon ll !important;
    text-shadow: none !important;
    color: #3e3d40 !important;
    -webkit-text-stroke-color: #b80000;
    -webkit-text-stroke-width: 1px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: visible !important;
    position: relative;
    top: 10px !important;
    left: -20px !important;
    width: 300px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Norwester !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' hosted with ';
}
.hostnumber:before {
    content: '';
}
.hostnumber:after {
    content: ' viewers';
}
.hostdiv:after {
    position: absolute !important;
    content: '';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    
}

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

Cheer:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px !important;
    width: 638px !important;
    height: 171px !important;
    background: url(http://i.imgur.com/IGGGZgk.png);
    background-repeat: no-repeat !important !important;
}
.cheerleftimg {
visibility: hidden !important;
}
.cheerleftamount {
visibility: hidden !important;
}
.cheerrightamount {
visibility: hidden !important;
}
.cheerrightimg {
visibility: hidden !important;
}
#header {
    position: absolute;
    top: 60px !important;
    left: 70px !important;
    width: 500px !important;
    height: 60px;
    text-align: center;
    font-family: Abaddon ll !important;
    color: #3e3d40 !important;
    font-weight: normal !important;
    font-size: 28px !important;
    opacity: 0;
    text-transform: capitalize !important;
    -webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
}
.cheername {} .cheerheaderamount {} .cheermsg {
visibility: hidden !important;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' thanks for the ';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

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

ChewieMelodies · « **Reply #445 on:** May 12, 2017, 02:06:59 PM »

Hi TheNumbLock

Was hoping you could help me with my notifications:

Subscriber Alert

Image Link: http://i.imgur.com/F7VIiJE.gif
Font Style/Link: Century Gothic
Font Color: White
Any text fill/border?: Black border
What do you want the alert to say? Thanks for the Sub twitchusername

Resub alert
Image Link: http://imgur.com/wTUSRqj
Font Style/Link: Century Gothic
Font Color: ADD8E6
Any text fill/border?: Black border
What do you want the alert to say? Thanks for the Resub twitchusername

Thanks in advance for your help!!
Chewie

anthonydh88 · « **Reply #446 on:** June 29, 2017, 07:14:57 AM »

http://imgur.com/Grrq9UP
Sub Notification And Resub Notification
Black Text Yellow Outline

Charanor · « **Reply #447 on:** June 29, 2017, 05:00:00 PM »

Heyhou, can you Switch my Follower Alert to an Sub Alert?

http://deepbot.tv/notifications/follownotification1.htm

#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

Father_Bill · « **Reply #448 on:** July 03, 2017, 06:03:09 AM »

Hi,

Like many twitch streamers last week i got a sub button. Would it be possible to get the css for a sub button. the image for it can be found

Image Link: http://i.imgur.com/47nKI3m.png
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Sub Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Thanks in advance for your assistance. The last group worked wonderfully!

Peace,

Father Bill Kessler

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 262060 times)

puuhbear

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

puuhbear

Re: Custom Notification WorkShop

puuhbear

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

puuhbear

Re: Custom Notification WorkShop

RagingRedneck83

Custom Notification Request

TheNumbLock

Re: Custom Notification WorkShop

RagingRedneck83

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

ChewieMelodies

Re: Custom Notification WorkShop

anthonydh88

Re: Custom Notification WorkShop

Charanor

Re: Custom Notification WorkShop

Father_Bill

Re: Custom Notification WorkShop