Author Topic: Custom Notification WorkShop (Read 262045 times)

YoungAndDangerous · « **Reply #405 on:** January 29, 2017, 06:30:34 AM »

im using the ones you posted
deepbot.tv/notifications/follownotification1.htm?dur=8000
deepbot.tv/notifications/donationnotification2.htm
and i implemented the css codes in each one.

but everytime i hit preview it gives me something thats not mine

so wondering if the preview is sett to default images ?

TheNumbLock · « **Reply #406 on:** January 29, 2017, 06:38:44 AM »

And you are putting the CSS into the CSS tab?

Using OBS Classic, Studio, or xSplit?

This is with the same CSS and URLs I posted:

YoungAndDangerous · « **Reply #407 on:** January 29, 2017, 06:41:06 AM »

im using Xsplit

is there a diffrent way there because that looked so cool

u are amazing :O

TheNumbLock · « **Reply #408 on:** January 29, 2017, 06:42:06 AM »

Quote from: YoungAndDangerous on January 29, 2017, 06:41:06 AM

im using Xsplit is there a diffrent way there because that looked so cool u are amazing :O

Yeah xSplit hates a few things compared to CSS code for OBS. One sec.

killakestrelgaming · « **Reply #409 on:** February 16, 2017, 01:04:40 AM »

GameWisp Sub Alert

Image Link:http://i.imgur.com/AL62XVh.gif
Font Style/Link:Diablo heavy
Font Color:red
Any text fill/boarder?:white outline
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): New TeamTGW sub
Anything else?:

killakestrelgaming · « **Reply #410 on:** February 16, 2017, 01:10:44 AM »

Follower Alert

Image Link: http://imgur.com/6uDnxCm
Font Style/Link: http://fontzone.net/font-details/diablo-heavy
Font Color: Red
Any text fill/boarder?: outline white
Where do you want text located? (Follower Name): just under the head
Example (If applicable): New Team TGW Follower
Anything else?:

TheNumbLock · « **Reply #411 on:** February 17, 2017, 09:02:48 AM »

Will work on this, this weekend.

kleinkiko · « **Reply #412 on:** February 21, 2017, 03:59:04 AM »

Donation Alert

Image Link: http://imgur.com/a/ktIVm
Font Style/Link: telegrafico
Font Color: Green ( #006738 )
Any text fill/boarder?: No
Currency Type:
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Donator Name, Donation Amount, Message
Example (If applicable): The Text for Name , Amount and Message please under the Pic ( Background transparent by the Text^^)
Anything else?:

TheNumbLock · « **Reply #413 on:** February 26, 2017, 01:37:25 AM »

Requested by: killakestrelgaming

Make sure you have the diablo font installed on your PC.

Follower:

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

CSS Code:

Code: [Select]

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

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 90px !important;
margin-left: 70px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Diablo !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: 'New Team TGW Follower ' !important;
}

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

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

Gamewisp:

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

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: 512px !important;
  height: 300px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/AL62XVh.gif) !important;
  background-size: contain !important;
}
 
#sub-notification .subname {
  margin-left: 70px !important;
  padding-top: 300px !important;
  width: 400px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 28px !important;
  font-family: Diablo !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: red !important;
  -webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
visibility: hidden !important;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: '' !important;
}
 
#sub-notification .newsubmsg::before {
  content: 'New TeamTGW Sub' !important;
}

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

#sub-notification .subname::before {
  content: 'New TeamTGW Sub ' !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.)

TheNumbLock · « **Reply #414 on:** February 26, 2017, 01:47:56 AM »

Requested by: kleinkiko

I installed the font you want from here: http://www.dafont.com/telegrafico.font

Donation:

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

CSS Code:

Code: [Select]

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

@font-face {
    font-family: Diablo Heavy;
    src: url(diablo_h.ttf),    !important;
}

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: 500px !important;
    height: 222px !important;
    background-image: url(http://i.imgur.com/r5FLgR4.gif) !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 {
position: absolute;
margin-top: 300px !important;
margin-left: 10px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 36px !important;
font-family: Telegrafico !important;
color: #006738 !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 235px !important;
margin-left: -280px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 38px !important;
font-family: Telegrafico !important;
color: #006738 !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: 200px !important;
margin-left: -80px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Telegrafico !important;
color: #006738 !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.)

special · « **Reply #415 on:** March 14, 2017, 06:51:20 AM »

Follower Alert

Background Color: transparent
Image Link: http://i.imgur.com/YDfWBaI.gif (repeat)
Font Style/Link: Arial
Font Color: #ffffff
Font Weight: Bold
Font Size: 93px
Font Outline Size: 1px
Font Outline Color: #6441a5
Any text fill/boarder?:
Where do you want text located? (Follower Name): center, exactly over the wood
Example (If applicable): http://imgur.com/7qTUGyG

Thanks in advance

TheNumbLock · « **Reply #416 on:** March 14, 2017, 07:14:08 AM »

Requested by: special

Follower:

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

CSS Code:

Code: [Select]

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

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

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 70px !important;
margin-left: 0px !important;
width: 400px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-stroke-color: #6441a5;
-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.)

dr_sim · « **Reply #417 on:** March 24, 2017, 01:53:37 AM »

Follower Alert

Image Link: http://imgur.com/vcNVhVO
Font Style/Link: Courgette (bold)
Font Color: Red
Any text fill/boarder?: No
Where do you want text located? (Follower Name): To the right of the image: Name Thanks for the follow! (see example)
Example (If applicable): http://imgur.com/Bdcmal5
Anything else?: Image animated. Rounded corners would be cool but no sweat if it is not possible.

Donation Alert

Image Link: http://imgur.com/vcNVhVO
Font Style/Link: Courgette (bold)
Font Color: Red
Any text fill/boarder?: No
Currency Type: $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Name Thanks for the $$$ donation! (see example)
Example (If applicable): http://imgur.com/Ze4BABY
Anything else?: Image animated. Rounded corners would be cool but no sweat if it is not possible.

Host Alert

Image Link: http://imgur.com/vcNVhVO
Font Style/Link: Courgette (bold)
Font Color: Red
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Name Thanks for hosting the stream! (see example)
Example (If applicable): http://imgur.com/ewGL1Ez
Anything else?: Image animated. Rounded corners would be cool but no sweat if it is not possible.

Thank you!

TheNumbLock · « **Reply #418 on:** March 25, 2017, 11:19:28 PM »

Do you have a link to the courgette font?

dr_sim · « **Reply #419 on:** March 26, 2017, 06:38:54 AM »

Here it is on google fonts: https://fonts.google.com/specimen/Courgette

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 262045 times)

YoungAndDangerous

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

YoungAndDangerous

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

killakestrelgaming

Re: Custom Notification WorkShop

killakestrelgaming

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

kleinkiko

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

special

Custom Notification WorkShop - Follower Notification

TheNumbLock

Re: Custom Notification WorkShop

dr_sim

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

dr_sim

Re: Custom Notification WorkShop