Author Topic: Custom Notification WorkShop (Read 226988 times)

TheNumbLock · « **Reply #375 on:** December 06, 2016, 12:45:21 AM »

Requested by: hoenens

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?dur=10000&ccy=%C2%A3
Width: 500
Height: 170

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: 434px !important;
    height: 154px !important;
    background-image: url(http://i.imgur.com/9CRkCnI.png) !important;
    background-repeat: no-repeat;
    background-size: cover;
}
#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: 80px !important;
margin-left: -250px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 30px !important;
margin-left: -60px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

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

Backyardis · « **Reply #376 on:** December 08, 2016, 02:18:17 PM »

Hi Team

hoping to get some help with my host notification

Host Alert

Image Link: http://imgur.com/okgYnnw.png
Font Style/Link: Algerian
Font Color:#FFFFFF
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Thank You (Host Name) for bringing (Amount of Viewers) to the stream!
Example (If applicable):

This is the CSS for my follower notification which i want this to mimic as close as possible.

Code: [Select]

#follow-notification {
position: absolute !important;
width: 1100px !important;
height: 400px !important;
background-color: transparent !important;
background-image: url("http://i.imgur.com/SJ6PMNq.png") !important;
background-repeat: no-repeat !important;
}
#follow-notification .leftimage {
position: absolute !important;
}
#follow-notification .followname {
position: absolute !important;
margin-left: 180px  !important;
padding-top: 160px !important;
text-align: center !important;
width: 580px !important;
font-size: 32px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000 !important;
color: #ffffff !important;
}

#follow-notification .header {
}

Also using Xsplit (in case that makes a difference)

Thanks

Backyardis

TheNumbLock · « **Reply #377 on:** December 09, 2016, 01:22:07 AM »

Requested by: Backyardis

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=1100&h=400
Link to Test: http://deepbot.tv/notifications/hostnotification.htm?w=1100&h=400&test=1
Width: 1150
Height: 450

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/okgYnnw.png) !important;
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -50px !important;
    margin-left: 220px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: Algerian !important;
    text-shadow: none !important;
    color: #FFFFFF !important;
    -webkit-text-stroke-color: #00fff6;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 140px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: Algerian !important;
    text-shadow: none !important;
    color: #FFFFFF !important;
    -webkit-text-stroke-color: #00fff6;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
    position: relative;
    top: 70px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian !important;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' for bringing ';
}
.hostname:before {
    content: 'Thank you ';
}
.hostnumber:after {
    content: ' viewers to the stream!';
}

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

Backyardis · « **Reply #378 on:** December 09, 2016, 10:10:20 AM »

Thanks so much!

anthonydh88 · « **Reply #379 on:** December 11, 2016, 06:33:25 AM »

Follow Notification
Image Link: Image Link: http://imgur.com/gallery/L8nT7
What do you want the alert to say? Followers Name
Font Color : Orange/yellow
Font Outline: Black
Transparent Background

TheNumbLock · « **Reply #380 on:** December 11, 2016, 06:59:24 AM »

Requested by: anthonydh88

Follower:

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

CSS Code:

Code: [Select]

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 190px !important;
margin-left: 300px !important;
width: 300px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: Impact !important;
color: orange !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-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.)

YBpoor69 · « **Reply #381 on:** January 12, 2017, 03:42:13 PM »

ALL IMAGES ARE 600 X 200 LANDSCAPE

Follower Alert

Image Link: http://imgur.com/rM5DK7Z
Font Style/Link: Gill San MT http://fontsforweb.com/font/show?id=1416
Font Color: White
Any text fill/boarder?: NO
Where do you want text located? (Follower Name): Centered in the black box
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/afLVlgV
Font Style/Link: Gills Sans MT http://fontsforweb.com/font/show?id=1416
Font Color: White
Any text fill/boarder?: NO
Currency Type: Gill Sans MT
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Donator Name: $donation amount (centered in black box)
Example (If applicable):
Anything else?:

GameWisp Sub Alert

Image Link: http://imgur.com/esCdlAU
Font Style/Link: Gill Sans MT
Font Color: White
Any text fill/boarder?:NO
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): Sub Name for Sub Months (centered in black box)
Example (If applicable):
Anything else?:

Host Alert

Image Link: http://imgur.com/e1d7jXL
Font Style/Link: Gill Sans MT
Font Color: White
Any text fill/boarder?: NO
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Host name with amount of veiwers (centered in the black box)
Example (If applicable):
Anything else?:

TheNumbLock · « **Reply #382 on:** January 13, 2017, 01:44:33 AM »

Requested by: YBpoor69

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 600px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/rM5DK7Z.png) !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: 230px !important;
width: 300px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: 33535gillsansmt !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-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
Width: 650
Height: 250

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: 600px !important;
    height: 200px !important;
    background-image: url(http://i.imgur.com/afLVlgV.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: 90px !important;
margin-left: -210px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: 33535gillsansmt !important;
color: white !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 60px !important;
margin-left: -20px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: 33535gillsansmt !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-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: '' ;
}

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

Gamewisp:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 650
Height: 250

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: 600px !important;
  height: 200px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/esCdlAU.png) !important;
  background-size: contain !important;
}
 
#sub-notification .subname {
  margin-left: 220px !important;
  padding-top: 80px !important;
  width: 300px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: 33535gillsansmt !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  margin-left: 220px !important;
  padding-top: 50px !important;
  width: 300px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: 33535gillsansmt !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .newsubmsg {
 position: absolute;
  top: 120px !important;
  margin-left: 150px;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: 33535gillsansmt !important;
  text-shadow: none !important;
  color: white !important;
}
 
#sub-notification .submonths::after {
  content: ' months!' !important;
}
 
#sub-notification .newsubmsg::after {
  content: ' New Sub! ' !important;
}

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

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

#sub-notification .subtier::before {
  content: '' !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.)

Host:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/e1d7jXL.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 50px !important;
    margin-left: 120px !important;
    text-align: center;
    width: 450px !important;
    font-size: 28px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 0px !important;
    margin-left: 150px !important;
    text-align: center;
    width: 450px !important;
    font-size: 28px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
    position: relative;
    top: 120px !important;
    left: -30px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' with ';
}
.hostname:before {
    content: '';
}
.hostnumber:after {
    content: ' viewers!';
}

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

OldRustyBones · « **Reply #383 on:** January 16, 2017, 12:01:20 PM »

Host Alert

Image Link: http://i.imgur.com/N7Afema.gif
Width: 1280px
Height: 720px
Font Style/Link: BigNoodleTitling ( @import url(http://db.onlinewebfonts.com/c/52629e481c4d4df7a9783ed08bdecdef?family=BigNoodleTitling); )
Font Color: #FFFEE7
Any text fill/boarder?: None
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): @user@ is summoning more skeletons for us! @numviewers@
Example (If applicable): exact layout as this one. http://i.imgur.com/vU56LtV.jpg
Anything else?:

After getting every other notification to work properly the host notification has stumped me and I've run out of patience. The issue I was running into was that the actual alert wouldn't show, but chat messages and audio would play perfectly fine. !important tags didn't even get it to show. Tried resizing and it still wouldn't show, so please, please, handle this one for me! Thanks in advance.

TheNumbLock · « **Reply #384 on:** January 17, 2017, 10:11:11 AM »

Requested by: OldRustyBones

[b[Host:[/b]

Link: http://deepbot.tv/notifications/hostnotification.htm?w=1280&h=720
Width: 1300
Height: 740

CSS Code:

Code: [Select]

@font-face {font-family: 'BigNoodleTitling);';
    src: url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.eot');
    src: url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.eot?#iefix') format('embedded-opentype'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.woff2') format('woff2'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.woff') format('woff'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.ttf') format('truetype'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.svg#BigNoodleTitling);') format('svg');
}

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/N7Afema.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 300px !important;
    margin-left: 620px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: BigNoodleTitling !important;
    text-shadow: none !important;
    color: #FFFEE7 !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 0px !important;
    margin-left: 150px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: BigNoodleTitling !important;
    text-shadow: none !important;
    color: #FFFEE7 !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
    position: relative;
    top: 420px !important;
    left: 480px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 36px !important;
    line-height: 26px;
    font-family: BigNoodleTitling !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: #FFFEE7 !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is summoning more skeletons for us! ';
}
.hostname:before {
    content: '';
}
.hostnumber:after {
    content: '';
}

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

OldRustyBones · « **Reply #385 on:** January 17, 2017, 11:27:14 AM »

Terribly sorry Repentgamingtv, but would you mind using this animation for the icon above? I tried adding it in and using !important to override the animation that's set on the image but it's not working. As I can't find the animation anywhere I cannot edit it out myself. Thank you.

-webkit-keyframes slide {
0% {top: 600px;}
10% {top: 600px;}
25% {top: 0px;}
75% {top: 0px;}
100% {top: 600px;}
}

-webkit-animation: slide 10s;

TheNumbLock · « **Reply #386 on:** January 17, 2017, 11:34:03 AM »

I don't think the default animation can be removed since it is built into the URL. :/

OldRustyBones · « **Reply #387 on:** January 17, 2017, 11:39:49 AM »

thanks for the quick reply. I'll see if I can work around it. Thanks again for getting it to work RepentGamingtv

Blindleader · « **Reply #388 on:** January 19, 2017, 02:15:26 AM »

I'd like follower, donations and gamewisp subs CSS. Nothing fancy, use the following image on all 3.

Follower Alert

Image Link:

Font Style: Artist choice
Font Color: Black
Any text fill/boarder?: white boarder
Where do you want text located? above (Follower Name):
Welcome to the Nuthouse!

GameWisp Sub Alert

Image Link:

Font Style: Artists choice
Font Color: Black
Any text fill/boarder?: white boarder
What do you want the alert to say? Sub Name has subscribed to Sub Tier

Donation Alert

Image Link:

Font Style/Link: You decide, your choice
Font Color: Black
Any text fill/boarder?: white
Currency Type: USD
What do you want the alert to say? Donator Name has added Donation Amount to the stash

Alternate image if the primary isn't working.

Thank you so much!
Regards,
Blindleader_3AC

TheNumbLock · « **Reply #389 on:** January 19, 2017, 02:50:51 AM »

Quote from: Blindleader on January 19, 2017, 02:15:26 AM

I'd like follower, donations and gamewisp subs CSS. Nothing fancy, use the following image on all 3.

Follower Alert

Image Link:
Font Style: Artist choice
Font Color: Black
Any text fill/boarder?: white boarder
Where do you want text located? above (Follower Name):
Welcome to the Nuthouse!

GameWisp Sub Alert

Image Link:
Font Style: Artists choice
Font Color: Black
Any text fill/boarder?: white boarder
What do you want the alert to say? Sub Name has subscribed to Sub Tier

Donation Alert

Image Link:
Font Style/Link: You decide, your choice
Font Color: Black
Any text fill/boarder?: white
Currency Type: USD
What do you want the alert to say? Donator Name has added Donation Amount to the stash

Alternate image if the primary isn't working.

Thank you so much!
Regards,
Blindleader_3AC

Where do you want the text located? To the side of the image? Or above it? Or somewhere else? This is what I have so far:

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 226988 times)

TheNumbLock

Re: Custom Notification WorkShop

Backyardis

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Backyardis

Re: Custom Notification WorkShop

anthonydh88

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

YBpoor69

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

OldRustyBones

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

OldRustyBones

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

OldRustyBones

Re: Custom Notification WorkShop

Blindleader

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop