Author Topic: Custom Notification WorkShop (Read 253120 times)

Xzapo · « **Reply #45 on:** April 17, 2015, 01:49:20 AM »

Follower
Image Link: http://i.imgur.com/RcKCHD4.png
Font Style/Link: http://www.dafont.com/batman-forever.font
Font Color: #FFFFFF
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle below the image
Example (If applicable):
Anything else?: transparent background

Donation
Image Link: http://i.imgur.com/BinAsTU.png
Font Style/Link: http://www.dafont.com/batman-forever.font
Font Color: #FFFFFF
Any text fill/boarder?: none
Currency Type: USD
Where do you want text located?
Donator Name- Top Center
Donation Amount- to the right of name
Message- Below other two
Example (If applicable):
Anything else?: Transparent background

TheNumbLock · « **Reply #46 on:** April 17, 2015, 03:07:52 AM »

If you need anything changed let me know. I had to move things around in order for it to look decent.

To get this custom font to work for you, you need to go here: Here Don't download but right click the download button and hit copy link. Then you will insert into the CSS where I put InsertDownloadLinkHere

Requested by:

Follower:

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

CSS Code:

Code: [Select]

@font-face { 
font-family: 'Batman'; 
src: url('InsertDownloadLinkHere'); 
}

#follow-notification {
	display: none;
	position: absolute;
	width: 682px !important;
	height: 329px !important;
	border-radius: 0px !important;
	background-image: url('http://i.imgur.com/RcKCHD4.png') !important;
	background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
	text-align: center !important;
	margin-top: 130px !important;
	margin-left: 230px !important;
	margin-right: 100px !important;
	width: 300px !important;
	font-size: 30px !important;
	font-weight: bold !important;
  font-family: Batman !important;
	color: #FFFFFF !important;
}

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

Donation:

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

CSS Code:

Code: [Select]

@font-face { 
font-family: 'Batman'; 
src: url('InsertDownloadLinkHere'); 
}

#donor-notification {
position: absolute;
width: 682px !important;
height: 450px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/BinAsTU.png') !important;
background-repeat: no-repeat !important;
background-size: contain !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: 270px !important;
margin-left: 90px !important;
width: 600px !important;
font-size: 24px !important;
font-family: Batman !important;
font-weight: normal !important;
color: #FFFFFF !important;
}

#donor-notification .amount {
position: absolute !important;
margin-top: 170px !important;
margin-left: -150px !important;
width: 100px !important;
font-size: 24px !important;
font-family: Batman !important;
font-weight: normal !important;
color: #FFFFFF !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 130px !important;
margin-left: 50px !important;
width: 200px !important;
font-size: 24px !important;
font-family: Batman !important;
font-weight: normal !important;
color: #FFFFFF !important;
}

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

Xzapo · « **Reply #47 on:** April 17, 2015, 09:09:31 PM »

Looks awesome thanks man!

Quigonswag · « **Reply #48 on:** April 21, 2015, 02:44:41 PM »

I was wondering if you could help me set up a custom donation notification.

Donation Alert

Image Link: http://imgur.com/rNxbY5L
Font Style/Link: Whatever you think looks good
Font Color:Whatever you think looks good
Any text fill/boarder?: Whatever you think looks good
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) if you could just add like a section next to it or under it with the name and amount that would be great
Example (If applicable):
Anything else?: ILU <3

if you could also explain how to hook it up and use it that would be great because I have not been able to find that anywhere

TheNumbLock · « **Reply #49 on:** April 21, 2015, 03:04:05 PM »

So you need to install CLR Browser for OBS if using OBS, and there is a guide here: http://deepbot.deep.sg/forums/index.php?topic=2890.0 If using xSplit here: http://deepbot.deep.sg/forums/index.php?topic=3305.0

All you really do is plug these into CLR Browser Properties.

Requested by: Quigonswag

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 650
Height: 800

CSS Code:

Code: [Select]

#donor-notification {
position: center !important;
width: 595px !important;
height: 631px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/rNxbY5L.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}


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

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

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

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

#donor-notification .amount {
position: absolute !important;
margin-top: 610px !important;
margin-left: -160px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Impact;
color: white;
}

#donor-notification .donor {
position: absolute !important;
margin-top: 610px !important;
margin-left: -180px !important;
width: 400px !important;
font-size: 40px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Impact !important;
color: white;
}

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

Gutta_man_popa · « **Reply #50 on:** April 25, 2015, 12:15:09 PM »

Donation Alert

Image Link:http://static.atlantablackstar.com/wp-content/uploads/2014/02/dave-chapelle-Im-rich-bitch.png
Font Style/Link:
Font Color:RED
Any text fill/boarder?:
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable):
Anything else?:Just want the amount donated, sound, and image played when donated to.

TheNumbLock · « **Reply #51 on:** April 25, 2015, 12:47:20 PM »

If you want anything adjusted or changed, let me know.

Requested by: Gutta_Man_Popa

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 650
Height: 550

CSS Code:

Code: [Select]

#donor-notification {
position: center !important;
width: 600px !important;
height: 484px !important;
background-color: transparent !important;
background-image: url('http://static.atlantablackstar.com/wp-content/uploads/2014/02/dave-chapelle-Im-rich-bitch.png') !important;
background-size: auto !important;
background-repeat: no-repeat !important;
}


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

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

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

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

#donor-notification .amount {
position: absolute !important;
margin-top: -20px !important;
margin-left: -170px !important;
width: 300px !important;
font-size: 32px !important;
font-weight: bold !important;
font-family: Impact !important;
color: red;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: Black;
}

#donor-notification .donor {
position: absolute !important;
margin-top: -20px !important;
margin-left: -170px !important;
width: 400px !important;
font-size: 32px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Impact !important;
color: red;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: Black;
}

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

Camcamtheginger · « **Reply #52 on:** April 28, 2015, 09:07:45 AM »

Image (hopefully gifs work) https://imgur.com/F5yYlgc
Donation Alert

Font Style/Link: http://www.dafont.com/zian.font
Font Color:white
Any text fill/boarder?: Boarder similar to the background of http://i.imgur.com/U1q88bD.png
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) Frogs on both sides background in the middle large enough for name and donation amount. with message bellow all that in whit with black outline.
Example (If applicable):
Anything else?:

TheNumbLock · « **Reply #53 on:** April 28, 2015, 09:47:34 AM »

Quote from: Camcamtheginger on April 28, 2015, 09:07:45 AM

Image (hopefully gifs work) https://imgur.com/F5yYlgc
Donation Alert

Font Style/Link: http://www.dafont.com/zian.font
Font Color:white
Any text fill/boarder?: Boarder similar to the background of http://i.imgur.com/U1q88bD.png
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) Frogs on both sides background in the middle large enough for name and donation amount. with message bellow all that in whit with black outline.
Example (If applicable):
Anything else?:

I am confused, frogs on both sides? I can't seem to get it that way. I can only get multiple frogs going across the screen. I don't really do graphics. o.o

Camcamtheginger · « **Reply #54 on:** April 29, 2015, 09:59:07 AM »

I can do the graphics then. No worries I can send you a link to the image when I get it done.

yourfateismybullet · « **Reply #55 on:** May 01, 2015, 01:47:06 AM »

Donation Alert

Image Link: http://i.imgur.com/jU3h1Xw.jpg?1
Font Style/Link:ariel
Font Color:white
Any text fill/boarder?: none
Currency Type:$
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable):could you do it the same way the picture is but make it so there name and amount are on the lines?? and msg under where it says message please if you could would be great
Anything else?:could you make it so the when the persons name and ammount and there msg comes up in white many thanks

Follower Alert

Image Link: http://i.imgur.com/RKk5kZJ.png?1
Font Style/Link:bold ariel
Font Color:white
Any text fill/boarder?:no
Where do you want text located? (Follower Name):under where it says new follower
Example (If applicable):
Anything else?:

TheNumbLock · « **Reply #56 on:** May 01, 2015, 02:43:32 AM »

Requested by: yourfateismybullet

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 580
Height: 150

CSS Code:

Code: [Select]

#follow-notification {
	display: none;
	position: absolute;
	width: 580px !important;
	height: 110px !important;
	border-radius: 0px !important;
	background-image: url('http://i.imgur.com/RKk5kZJ.png?1') !important;
	background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
	text-align: center !important;
	margin-top: 22px !important;
	margin-left: 90px !important;
	width: 400px !important;
	font-size: 30px !important;
  font-weight: normal !important;
	font-family: Arial !important;
	color: #ADD8E6 !important;
  -webkit-text-fill-color: White;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: white;
}

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

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1316
Height: 750

CSS Code:

Code: [Select]

#donor-notification {
width: 1316px !important;
height: 659px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/jU3h1Xw.jpg?1') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
text-shadow: none !important;
}


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

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

#donor-notification .message {
position: absolute !important;
	text-align: center !important;
	margin-top: 410px !important;
	margin-left: 310px !important;
	width: 700px !important;
	font-size: 40px !important;
	font-weight: normal !important;
	font-family: Arial !important;
	color: white !important;
	-webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}
#donor-notification .amount {
position: absolute !important;
	text-align: center !important;
	margin-top: 210px !important;
	margin-left: 360px !important;
	width: 100px !important;
	font-size: 40px !important;
	font-weight: normal !important;
	font-family: Arial !important;
	color: white !important;
	-webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}
#donor-notification .donor {
position: absolute !important;
	text-align: center !important;
	margin-top: 100px !important;
	margin-left: 500px !important;
	width: 300px !important;
	font-size: 40px !important;
	font-weight: normal !important;
	font-family: Arial !important;
	color: white !important;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

#donor-notification .title {
padding-top: 44px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: left !important;
}

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

s314der · « **Reply #57 on:** May 01, 2015, 10:07:33 AM »

Donation Alert

Image Link: http://i.imgur.com/koYP9tr.png
Font Style/Link: Impact
Font Color: black
Any text fill/border?: None
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message): Just the donor name centered in the speech bubble, donation amount over the money bags.
Example (If applicable):
Anything else?: On the donation amount, lime text with black outline. Thanks for being awesome!

TheNumbLock · « **Reply #58 on:** May 01, 2015, 12:39:50 PM »

Let me know if you want anything changed.

Requested by: s314der

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 500px !important;
height: 300px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/koYP9tr.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
text-shadow: none !important;
}


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

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

#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
	text-align: center !important;
	margin-top: 50px !important;
	margin-left: 30px !important;
	width: 100px !important;
	font-size: 28px !important;
	font-weight: normal !important;
	font-family: impact !important;
	color: black !important;
}
#donor-notification .donor {
position: absolute !important;
	text-align: center !important;
	margin-top: 70px !important;
	margin-left: 180px !important;
	width: 300px !important;
	font-size: 28px !important;
	font-weight: normal !important;
	font-family: impact !important;
	color: black !important;
}

#donor-notification .title {
padding-top: 44px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: left !important;
}

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

8BitMom · « **Reply #59 on:** May 07, 2015, 08:28:55 AM »

Donation Alert

Image Link: http://i.imgur.com/bFINo7n.png
Font Style/Link: Arial Bold
Font Color: White
Any text fill/boarder?: No
Currency Type: $
Where do you want text located? Donator Name: Under Donation HYPE! Donation Amount: under person's Name. Message: Under the image (Not in the blue box) Centered.)
Example (If applicable): http://imgur.com/RmKH7Kr
Anything else? That's it! Thank you!

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 253120 times)

Xzapo

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Xzapo

Re: Custom Notification WorkShop

Quigonswag

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Gutta_man_popa

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Camcamtheginger

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Camcamtheginger

Re: Custom Notification WorkShop

yourfateismybullet

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

s314der

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

8BitMom

Re: Custom Notification WorkShop