Author Topic: Custom Notification WorkShop (Read 262110 times)

l0wcrow · « **Reply #195 on:** August 18, 2015, 07:53:08 AM »

Donation Alert!

Image Link: http://imgur.com/X9BXJQW
Font Style/Link: https://www.fontyukle.net/en/1,belwe ( Size text is 20px and amount area is 30px )
Currency Type: â‚¬

How should it look like: http://imgur.com/sbgAqvT

Thanks!

TheNumbLock · « **Reply #196 on:** August 18, 2015, 02:29:57 PM »

You may have to adjust the margins, since I can't really test with your stream name.

Requested by: l0wcrow

Donation:

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

CSS Code:

Code: [Select]

@font-face { 
font-family: 'Bel'; 
src: url('https://www.fontyukle.net/en/indir.php?id=101366&nrsg=b252b4d7333a9a023469e1eb3d5189db'); 
}

#donor-notification {
width: 1920px !important;
height: 1080px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/X9BXJQW.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}

#donor-notification .date {
position: absolute !important;
margin-top: 360px !important;
margin-left: 990px !important;
width: 300px !important;
font-size: 20px !important;
font-weight: bold !important;
font-family: Bel !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

#donor-notification .header {
position: absolute !important;
margin-top: 500px !important;
margin-left: 500px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Bel !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
 
#donor-notification .streamname {
position: absolute !important;
margin-top: 425px !important;
margin-left: 570px !important;
width: 300px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Bel !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 0px 0px 0px black !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 485px !important;
margin-left: 600px !important;
width: 500px !important;
font-size: 24px !important;
font-weight: bold !important;
font-family: Bel !important;
color: blue !important;
text-shadow: 0px 0px 0px black !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 565px !important;
margin-left: 1220px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Bel !important;
color: blue !important;
text-shadow: 0px 0px 0px black !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 490px !important;
margin-left: 1100px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Bel !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 0px 0px 0px black !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

hc_phoenix · « **Reply #197 on:** August 22, 2015, 11:10:14 PM »

Follower/Donation Alert

Image Link: http://imgur.com/GNRIGV4
Font Style/Link: I don't have a specific style in mind but I really think a pretty standard/ crisp font would be nice
Font Color: White
Any text fill/boarder?: I think a black border around the text within a red to orange gradient
Where do you want text located? (Follower Name): I would like to the text to be located in a rectangle that is about 200 pixels wide and 100 pixels tall
Example (If applicable):
Anything else?: This might be a terrible description but I would like the wings to surround a small rectangle as described above that just scrolls upward from the bottom of a 1920x1080 screen to appear when activated. I would like a wider version of the same design for a donation alert that scrolls downward to appear that just shows their name and how much they donated in USD. Please feel free to message me if you have any questions, I'm sorry if its poorly described.

TheNumbLock · « **Reply #198 on:** August 23, 2015, 12:04:39 AM »

Requested by: hc_phoenix

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=10000&top=2
Width: 800
Height: 850 (You may need to make this a higher number, because of scroll bars)

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 709px !important;
height: 656px !important;
background-image: url('http://i.imgur.com/k8zPHpB.png') !important;
background-position: left center;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 200px !important;
margin-left: 250px !important;
width: 200px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
text-shadow: none !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
background: linear-gradient(330deg, red 0%, orange 25%, red 50%,orange 75%, red 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

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

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?top=1
Width: 800
Height: 800

CSS Code:

Code: [Select]

@font-face { 
font-family: 'Bel'; 
src: url('https://www.fontyukle.net/en/indir.php?id=101366&nrsg=b252b4d7333a9a023469e1eb3d5189db'); 
}

#donor-notification {
width: 709px !important;
height: 656px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/k8zPHpB.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}

#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 210px !important;
margin-left: -230px !important;
width: 200px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
text-shadow: none !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
background: linear-gradient(330deg, red 0%, red 25%, orange 50%, red 75%, red 100%);
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 180px !important;
margin-left: 30px !important;
width: 200px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
text-shadow: none !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
background: linear-gradient(330deg, red 0%, orange 25%, red 50%,orange 75%, red 100%);
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

cr4zydoc · « **Reply #199 on:** August 27, 2015, 06:13:54 AM »

Okay you may be able to help me solve and issue. Is there a work around for getting custom notifications to show correctly on Xsplit? I try to change the CSS to the custom code of any follower/donation icon etc and it still shows stock? Thank you

TheNumbLock · « **Reply #200 on:** August 27, 2015, 06:21:28 AM »

Quote from: cr4zydoc on August 27, 2015, 06:13:54 AM

Okay you may be able to help me solve and issue. Is there a work around for getting custom notifications to show correctly on Xsplit? I try to change the CSS to the custom code of any follower/donation icon etc and it still shows stock? Thank you

In the CSS code, you have to replace ' with ". OBS likes ', while xsplit likes ".

ShadowBearded · « **Reply #201 on:** September 07, 2015, 04:44:21 AM »

Donation Alert

Image Link: https://41.media.tumblr.com/d00da6ac8f83c68e4b24492d53f4d329/tumblr_nbw1xrcpq61sxlrs8o1_500.jpg
Font Style/Link:
-A basic, very readable font, nothing fancy
Font Color:
-Silver
Any text fill/boarder?:
-I would like the text to be have a black box background to make reading it easier.
Currency Type:
-US Dollar
Where do you want text located?(Donator Name, Donation Amount, Message)
-I Would like the Donator Name and amount above the picture, and the message below the picture.
Example (If applicable):
----------Donator Name-----------
-----------Donator $---------------
--------------------------------------
- Picture -
- -
- -
- -
----------Donator Message---------

Anything else?:

TheNumbLock · « **Reply #202 on:** September 07, 2015, 04:54:17 AM »

Requested by: ShadowBearded

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 500px !important;
height: 400px !important;
top: 80px !important;
left: 50px !important;
background-color: transparent !important;
background-image:url('https://41.media.tumblr.com/d00da6ac8f83c68e4b24492d53f4d329/tumblr_nbw1xrcpq61sxlrs8o1_500.jpg') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}

#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 410px !important;
margin-left: 0px !important;
width: 500px !important;
font-size: 22px !important;
font-weight: normal !important;
font-family: impact !important;
text-transform: capitalize;
color: #C0C0C0 !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: #C0C0C0;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -70px !important;
margin-left: -300px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: #C0C0C0;
text-shadow: 2px 1px 6px black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -100px !important;
margin-left: -30px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: #C0C0C0;
text-shadow: 2px 1px 6px black;
}

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

Wasp_46 · « **Reply #203 on:** September 14, 2015, 04:10:24 PM »

HI there, i would only need a new follower notification

Follower Alert

Image Link: http://imgur.com/zE6V6MK
Font Style/Link: http://www.urbanfonts.com/fonts/Prototype.htm
Font Color: Black / Yellow ( like a wasp

)
Any text fill/boarder?:
Where do you want text located? (Follower Name): middle
Example (If applicable): sorry

Anything else?: Feel free to surprise me

thanks in advance..and once again i love Deep bot !!

regards

Wasp

TheNumbLock · « **Reply #204 on:** September 14, 2015, 04:49:51 PM »

Make sure you have the font installed on your computer.

Requested by: Wasp_46

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 500
Height: 300

CSS Code:

Code: [Select]

@font-face {
font-family: 'Prototype';
src:local('Prototype'),
    local('Prototype Regular'),
    local('HOMOARAK'),
    url('Prototype.ttf');
}
 
#follow-notification {
display: none;
position: absolute;
width: 325px !important;
height: 260px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/zE6V6MK.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 80px !important;
margin-left: 0px !important;
width: 300px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Prototype !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: yellow;
-webkit-text-stroke-width: 1px;
}

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

lastzombie · « **Reply #205 on:** September 17, 2015, 03:59:28 PM »

Hello first of all thanks for help. I have the details down. I want images to slite from top if possible. Here is a static example : http://i.imgur.com/Lr06N4E.png

Follower Alert

Image Link: http://i.imgur.com/S9jhCkf.png
Font Style/Link: Bebas neue bold
Font Color: Black
Any text fill/boarder?:no
Where do you want text located? (Follower Name): In the middle of the box.
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://i.imgur.com/u24po4a.png
Font Style/Link: Bebas neue bold
Font Color: Black
Any text fill/boarder?: No
Currency Type: $ (i wish we had Turkish Lira TL)
Where do you want text located?(Donator Name, Donation Amount, Message): Name amount and message in the box
Example (If applicable):
Anything else?:

Don't have subs up yet but since they are nearly the same image if its not a bother ^^
Subscriber Alert

Image Link: http://i.imgur.com/BomvWzD.png
Font Style/Link: Bebas neue bold
Font Color: Black
Any text fill/boarder?: no
Where do you want text located? (Subscriber Name): Middle of the box
Example (If applicable):
Anything else?: No.

TheNumbLock · « **Reply #206 on:** September 17, 2015, 07:25:49 PM »

Make sure you have the font installed on your pc. The BebasNeue Bold.ttf version.

Requested by: lastzombie

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 604
Height: 337

CSS Code:

Code: [Select]

@font-face {
font-family: 'Bebas';
src:local('BebasNeue Bold'),
    local('Anime Inept Regular'),
    local('Bebas Neue Bold'),
    url('BebasNeue Bold.ttf');
}
 
#follow-notification {
display: none;
position: absolute;
width: 604px !important;
height: 337px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/S9jhCkf.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 160px !important;
margin-left: 10px !important;
width: 500px !important;
font-size: 54px !important;
font-weight: normal !important;
font-family: Bebas !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 604
Height: 337

CSS Code:

Code: [Select]

@font-face {
font-family: 'Bebas';
src:local('BebasNeue Bold'),
    local('Anime Inept Regular'),
    local('Bebas Neue Bold'),
    url('BebasNeue Bold.ttf');
}

#donor-notification {
position: absolute;
left: 0px !important;
width: 604px !important;
height: 337px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/u24po4a.png') !important;
overflow: hidden !important;
}

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

#donor-notification .date {
visibility: hidden !important;
}

#donor-notification .streamname {
visibility: hidden !important;
}

#donor-notification .message {
position: absolute !important;
margin-top: 200px !important;
margin-left: 60px !important;
width: 400px !important;
font-size: 22px !important;
font-weight: normal !important;
font-family: Bebas !important;
text-transform: capitalize;
color: #C0C0C0 !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 130px !important;
margin-left: -200px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Bebas !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 130px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Bebas !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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

Subscriber:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 604
Height: 337

CSS Code:

Code: [Select]

@font-face {
font-family: 'Bebas';
src:local('BebasNeue Bold'),
    local('Anime Inept Regular'),
    local('Bebas Neue Bold'),
    url('BebasNeue Bold.ttf');
}

#sub-notification {
width: 604px !important;
height: 337px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/BomvWzD.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
	margin-top: 40px !important;
	margin-left: 140px !important;
	text-align: center;
	line-height: 80px;
	width: 300px !important;
	font-size: 50px !important;
	text-transform: capitalize;
	font-weight: normal !important;
	font-family: Bebas !important;
	color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

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

lastzombie · « **Reply #207 on:** September 18, 2015, 09:13:24 AM »

Quote from: RepentGamingTV on September 17, 2015, 07:25:49 PM

Thanks it works but donation messages goes over the image if they are too long. Anyway to fix or limit this? Also turkish letters don't work. They are supported with the font. (example: ğ,ü,ş,ı,ç )

TheNumbLock · « **Reply #208 on:** September 18, 2015, 10:05:27 AM »

Quote from: lastzombie on September 18, 2015, 09:13:24 AM

Quote from: RepentGamingTV on September 17, 2015, 07:25:49 PM

Thanks it works but donation messages goes over the image if they are too long. Anyway to fix or limit this? Also turkish letters don't work. They are supported with the font. (example: ğ,ü,ş,ı,ç )

I adjusted the CSS, may work now. As for turkish letters, I am not sure. Might be something with paypal.

lastzombie · « **Reply #209 on:** September 18, 2015, 10:14:37 AM »

Quote from: RepentGamingTV on September 18, 2015, 10:05:27 AM

Quote from: lastzombie on September 18, 2015, 09:13:24 AM
Quote from: RepentGamingTV on September 17, 2015, 07:25:49 PM

Thanks it works but donation messages goes over the image if they are too long. Anyway to fix or limit this? Also turkish letters don't work. They are supported with the font. (example: ğ,ü,ş,ı,ç )

I adjusted the CSS, may work now. As for turkish letters, I am not sure. Might be something with paypal.

Still going out of the box from left and bottom sometimes. As for the turkish it seems it is a problem with the bot. I tried the default notification same thing happened. i have to talk that with experts when he comes back =)

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 262110 times)

l0wcrow

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

hc_phoenix

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

cr4zydoc

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

ShadowBearded

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Wasp_46

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

lastzombie

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

lastzombie

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

lastzombie

Re: Custom Notification WorkShop