Author Topic: Custom Notification WorkShop (Read 226983 times)

Seppuko · « **Reply #150 on:** July 10, 2015, 01:00:36 PM »

Donation Alert

Image Link: http://imgur.com/srQblyP
Font Style/Link: Orbitron
Font Color: #00BB00
Any text fill/boarder?:
Currency Type: $
Where do you want text located?(Donator Name, Donation Amount, Message) in the grey Box part below the Picture
Example (If applicable): http://imgur.com/yl1cwks (please keep the transparency of the original background, i jzs qucikly edited text in in paint here
Anything else?: Thank you in Advance

TheNumbLock · « **Reply #151 on:** July 11, 2015, 05:58:04 AM »

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 900
Height: 950

CSS Code:

Code: [Select]

@font-face { 
font-family: 'Orb'; 
src: url('http://download1085.mediafire.com/v8wp2m7blcrg/ruglnnabmvvfg1v/Orbitron-Regular.ttf'); 
}

#donor-notification {
width: 876px !important;
height: 801px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/srQblyP.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 .message {
position: absolute !important;
margin-top: 720px !important;
margin-left: 140px !important;
width: 600px !important;
font-size: 20px !important;
font-weight: bold !important;
font-family: Orb !important;
color: blue !important;
-webkit-text-fill-color: #00BB00;
-webkit-text-stroke-color: #00BB00;
-webkit-text-stroke-width: .1px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 640px !important;
margin-left: -260px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Orb !important;
color: blue !important;
-webkit-text-fill-color: #00BB00;
-webkit-text-stroke-color: #00BB00;
-webkit-text-stroke-width: .1px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 640px !important;
width: 300px !important;
margin-left: -70px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Orb !important;
color: blue !important;
text-transform: capitalize;
-webkit-text-fill-color: #00BB00;
-webkit-text-stroke-color: #00BB00;
-webkit-text-stroke-width: .1px;
}

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

RandomRambo · « **Reply #152 on:** July 12, 2015, 06:52:07 PM »

Donation Alert

Image Link: http://i.imgur.com/YtxDIeT.png
Font Style/Link: bebas neue bold
Font Color: White
Any text fill/boarder?:
Currency Type: $
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable): http://i.imgur.com/KH4joJu.png
Anything else?: The preview was made fast, just to explain it simple and easy, and just use it as a guideline.

Subscriber Alert

Image Link: http://i.imgur.com/HhhKxYP.gif
Font Style/Link: bebas neue bold
Font Color: white
Any text fill/boarder?:
Where do you want text located? (Subscriber Name)
Example (If applicable):All info under the picture in the box. 2 lines, Top/firstline [name] Bottem/secondline Just subscribed!
Anything else?:

TheNumbLock · « **Reply #153 on:** July 13, 2015, 10:29:22 AM »

Requested by: RandomRambo

Subscriber:

Link: http://deepbot.tv/notifications/subnotification1.htm
Width: 350
Height: 350

CSS Code:

Code: [Select]

@font-face { 
font-family: 'BN'; 
src: url('http://download1826.mediafire.com/nyr9geg6cwog/0pd32gl2cb8zrs9/BebasNeue+Regular.otf'); 
}

#sub-notification {
width: 270px !important;
height: 290px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/HhhKxYP.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
	margin-top: 60px !important;
	margin-left: 70px !important;
	text-align: center;
	line-height: 20px;
	width: 140px !important;
	font-size: 24px !important;
	text-transform: capitalize;
	font-weight: normal !important;
	font-family: BN !important;
	color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.subname:after {
content: '  Just subscribed!'
}

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

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 850
Height: 200

CSS Code:

Code: [Select]

@font-face { 
font-family: 'BN'; 
src: url('http://download1826.mediafire.com/nyr9geg6cwog/0pd32gl2cb8zrs9/BebasNeue+Regular.otf'); 
}

#donor-notification {
width: 814px !important;
height: 163px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/YtxDIeT.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 .message {
position: absolute !important;
margin-top: 50px !important;
margin-left: 180px !important;
width: 500px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: BN !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -20px !important;
margin-left: -270px !important;
width: 500px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BN !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: #00BB00;
-webkit-text-stroke-width: 0px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -20px !important;
margin-left: -20px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BN !important;
color: blue !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: #00BB00;
-webkit-text-stroke-width: 0px;
}

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

MaskedVillianGaming · « **Reply #154 on:** July 14, 2015, 06:24:09 AM »

Follower Alert

Image Link: http://i.imgur.com/bFSy7ll.png
Font Style/Link: Compacta Bold or something like (sorry can not find googlefont link :-( )
Font Color: Black
Any text fill/boarder?: Solid
Where do you want text located? (Follower Name): Under "Thanks for following"
Example (If applicable):
Anything else?: YOU'RE AWESOME REPENT!

TheNumbLock · « **Reply #155 on:** July 14, 2015, 08:28:13 AM »

Requested by: MaskedVillianGaming

Follower:

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

CSS Code:

Code: [Select]

@font-face { 
font-family: 'Com'; 
src: url('http://download1498.mediafire.com/99x8xs2akwug/wdhauiakjsjdb43/Comfortaa-Bold.ttf'); 
}

#follow-notification {
display: none;
position: absolute;
width: 420px !important;
height: 135px !important;
background-image: url('http://i.imgur.com/bFSy7ll.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 40px !important;
margin-left: 120px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Com !important;
color: blue !important;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: .2px;
}

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

wrggrimreaper · « **Reply #156 on:** July 14, 2015, 06:13:31 PM »

Follower Alert

Image Link: http://www.netupload.de/s/61/vR43vYCF.html
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Follower Name): In the central from the picture
Example (If applicable):
Anything else?:

TheNumbLock · « **Reply #157 on:** July 15, 2015, 01:17:36 AM »

Requested by: wrggrimreaper

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 474px !important;
height: 296px !important;
background-image: url('http://s1.netupload.de/file/150714/vR43vYCF.jpg') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 90px !important;
margin-left: 85px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: .2px;
}

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

Haxxident · « **Reply #158 on:** July 15, 2015, 05:34:42 PM »

Image Link: http://imgur.com/eVCO6eJ
Font Style/Link: http://cooltext.com/Logo-Design-Skate
Font Color: Unsure if you can do it but #FFFFFF and outline of #000000
Any text fill/boarder?:
Where do you want text located? (Follower Name): The space below "&"
Example (If applicable): http://imgur.com/pKqxdJm
Anything else?: I use Xsplit, apparently it makes the CSS code different.

TheNumbLock · « **Reply #159 on:** July 15, 2015, 06:08:16 PM »

I did what I could with the outline of the letters, I can make it thicker if you want. For some reason when I do stroke around the letters, it does the details in the letters instead. I am guessing it's because of the font.

Requested by: Haxxident

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1250
Height: 1800

CSS Code:

Code: [Select]

@font-face { 
font-family: "Cap"; 
src: url("http://download24.mediafire.com/k6c7ottd0nog/r0c522bplvjdl48/Capture_it.ttf"); 
}

#follow-notification {
display: none;
position: absolute;
width: 1240px !important;
height: 1754px !important;
background-image: url("http://i.imgur.com/eVCO6eJ.jpg") !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 570px !important;
margin-left: 200px !important;
font-size: 110px !important;
font-weight: normal !important;
font-family: Cap !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
text-shadow: 1px 0px 40px black, 2px 0px 40px black, 3px 0px 40px black, 4px 0px 30px black, 6px 0px 30px;
}

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

Haxxident · « **Reply #160 on:** July 15, 2015, 06:55:10 PM »

Hi, Thanks you.

When testing the preview on deepbot and xsplit, the font is different to your picture above, also the notification is huge, how would I reduce it so fits easier onto screen?

Quote from: RepentGamingTV on July 15, 2015, 06:08:16 PM

I did what I could with the outline of the letters, I can make it thicker if you want. For some reason when I do stroke around the letters, it does the details in the letters instead. I am guessing it's because of the font.

Requested by: Haxxident

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1250
Height: 1800

CSS Code:
Code: [Select]
@font-face { font-family: "Cap"; src: url("http://download24.mediafire.com/k6c7ottd0nog/r0c522bplvjdl48/Capture_it.ttf"); } #follow-notification { display: none; position: absolute; width: 1240px !important; height: 1754px !important; background-image: url("http://i.imgur.com/eVCO6eJ.jpg") !important; background-repeat: no-repeat; } #follow-notification .followname { position: absolute !important; margin-top: 570px !important; margin-left: 200px !important; font-size: 110px !important; font-weight: normal !important; font-family: Cap !important; color: blue !important; -webkit-text-fill-color: white; -webkit-text-stroke-color: black; -webkit-text-stroke-width: 1px; text-shadow: 1px 0px 40px black, 2px 0px 40px black, 3px 0px 40px black, 4px 0px 30px black, 6px 0px 30px; }
Preview: (If there is a black background, it is just my background.)

TheNumbLock · « **Reply #161 on:** July 16, 2015, 01:21:21 AM »

Quote from: Haxxident on July 15, 2015, 06:55:10 PM

Hi, Thanks you.

When testing the preview on deepbot and xsplit, the font is different to your picture above, also the notification is huge, how would I reduce it so fits easier onto screen?

I think you can resize it by editing it, like OBS, where you can adjust it by sliding the corners in.

As for the font, you may have to insert the download link yourself: http://www.mediafire.com/download/r0c522bplvjdl48/Capture_it.ttf

Go to that link, right click the download now button>copy link address>paste in the CSS at the top where it says:

@font-face {
font-family: "Cap";
src: url("http://download24.mediafire.com/k6c7ottd0nog/r0c522bplvjdl48/Capture_it.ttf");
}

If it still doesn't work, let me know.

Haxxident · « **Reply #162 on:** July 16, 2015, 03:18:19 AM »

Hi,

I have tried dragging the sides and it just changes the size on show, but the image never reduces in size. Thanks, I'll try the link for the text.

Quote from: RepentGamingTV on July 16, 2015, 01:21:21 AM

Quote from: Haxxident on July 15, 2015, 06:55:10 PM
Hi, Thanks you.

When testing the preview on deepbot and xsplit, the font is different to your picture above, also the notification is huge, how would I reduce it so fits easier onto screen?

I think you can resize it by editing it, like OBS, where you can adjust it by sliding the corners in.

As for the font, you may have to insert the download link yourself: http://www.mediafire.com/download/r0c522bplvjdl48/Capture_it.ttf

Go to that link, right click the download now button>copy link address>paste in the CSS at the top where it says:

@font-face {
font-family: "Cap";
src: url("http://download24.mediafire.com/k6c7ottd0nog/r0c522bplvjdl48/Capture_it.ttf");
}

If it still doesn't work, let me know.

Haxxident · « **Reply #163 on:** July 16, 2015, 04:23:19 AM »

Hi, i got the text fixed thank you. but the image is still huge.

Quote from: RepentGamingTV on July 16, 2015, 01:21:21 AM

Quote from: Haxxident on July 15, 2015, 06:55:10 PM
Hi, Thanks you.

When testing the preview on deepbot and xsplit, the font is different to your picture above, also the notification is huge, how would I reduce it so fits easier onto screen?

I think you can resize it by editing it, like OBS, where you can adjust it by sliding the corners in.

As for the font, you may have to insert the download link yourself: http://www.mediafire.com/download/r0c522bplvjdl48/Capture_it.ttf

Go to that link, right click the download now button>copy link address>paste in the CSS at the top where it says:

@font-face {
font-family: "Cap";
src: url("http://download24.mediafire.com/k6c7ottd0nog/r0c522bplvjdl48/Capture_it.ttf");
}

If it still doesn't work, let me know.

TheNumbLock · « **Reply #164 on:** July 16, 2015, 06:24:42 AM »

This is how I have mine setup:

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 226983 times)

Seppuko

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

RandomRambo

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

MaskedVillianGaming

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

wrggrimreaper

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Haxxident

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Haxxident

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Haxxident

Re: Custom Notification WorkShop

Haxxident

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop