Author Topic: Custom Notification WorkShop (Read 262326 times)

TheNumbLock · « **Reply #15 on:** March 15, 2015, 02:34:31 AM »

Quote from: Surrenderat20PLZ on March 10, 2015, 09:38:04 PM

Follower Alert

Code: [Select]
Image Link: http://imgur.com/qT5k62w Font Style/Link: Arial Bold Font Color: White Any text fill/boarder?: White Text fill Marquee/Scroll Effect?: No Where do you want text located? (Follower Name): In the box
Donation Alert

Code: [Select]
Image Link: http://imgur.com/nYrVyEg Font Style/Link: Arial Bold Font Color: White Any text fill/boarder?: White Marquee/Scroll Effect?: Yes, for donation message Currency Type: $ Where do you want text located?(Donator Name, Donation Amount, Message): Donator name in top box with donation amount and scrolling donation message in bottom box
Subscriber Alert

Code: [Select]
Image Link: http://imgur.com/rJ3DTAr Font Style/Link: Arial bold Font Color: White Any text fill/boarder?: White Marquee/Scroll Effect?: No Where do you want text located? (Subscriber Name) In the box

I can't do scroll effects in a certain box, it would go across the screen.

TheNumbLock · « **Reply #16 on:** March 15, 2015, 02:39:41 AM »

Quote from: HeyItsMerkk on March 15, 2015, 01:19:45 AM

Follower Alert
Image Link: http://imgur.com/2o7L06A
Font Style/Link: Arial Black
Font Color: White
Any Text Fill/Border?: No
Where do you want text located?: In the middle.
Example: http://imgur.com/2sq3UCN
Anything else?: No

Requested by: HeyItsMerkk

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
	display: none;
	position: absolute;
	width: 500px !important;
	height: 100px !important;
	border-radius: 00px !important;
	background-image: url('http://i.imgur.com/2o7L06A.png') !important;
	background-repeat: no-repeat;
}
#follow-notification .followname {
	margin-top: 0px !important;
	margin-left: 65px !important;
	text-align: center !important;
	width: 380px !important;
	font-size: 34px !important;
	font-weight: normal !important;
	font-family: Arial Black !important;
	color: white !important;
    -webkit-text-fill-color: white;
}

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

Surrenderat20PLZ · « **Reply #17 on:** March 15, 2015, 11:08:35 AM »

Quote from: RepentGamingTV on March 15, 2015, 02:34:31 AM

I can't do scroll effects in a certain box, it would go across the screen.

Hm. What if it isn't scrolling? Could you get it to just fit into the box and if the message is too long it will simply be cut off or the message font size will get smaller? If not can I just get the notifications for the follower/subscriber? Thanks

TheNumbLock · « **Reply #18 on:** March 15, 2015, 11:31:07 AM »

Quote from: Surrenderat20PLZ on March 15, 2015, 11:08:35 AM

Quote from: RepentGamingTV on March 15, 2015, 02:34:31 AM

I can't do scroll effects in a certain box, it would go across the screen.

Hm. What if it isn't scrolling? Could you get it to just fit into the box and if the message is too long it will simply be cut off or the message font size will get smaller? If not can I just get the notifications for the follower/subscriber? Thanks

Ya, I was trying, but couldn't get it to stay in the box, it just keeps scrolling thru it. :/

HeyItsMerkk · « **Reply #19 on:** March 15, 2015, 04:14:24 PM »

Image Link: http://imgur.com/ew39Mat
Font Style: Typograph
Font Color: Black
Any Text Fill?: No
Where do you want it located?: In the Middle
Example: None, sorry.
Anything else?: No

Surrenderat20PLZ · « **Reply #20 on:** March 15, 2015, 07:54:26 PM »

Quote from: RepentGamingTV on March 15, 2015, 11:31:07 AM

Quote from: Surrenderat20PLZ on March 15, 2015, 11:08:35 AM
Quote from: RepentGamingTV on March 15, 2015, 02:34:31 AM

I can't do scroll effects in a certain box, it would go across the screen.

Hm. What if it isn't scrolling? Could you get it to just fit into the box and if the message is too long it will simply be cut off or the message font size will get smaller? If not can I just get the notifications for the follower/subscriber? Thanks

Ya, I was trying, but couldn't get it to stay in the box, it just keeps scrolling thru it. :/

I meant without the scroll but thats ok thanks for trying. But you can do the notification/subscriber notifications still right?

TheNumbLock · « **Reply #21 on:** March 16, 2015, 02:57:05 AM »

Quote from: Surrenderat20PLZ on March 15, 2015, 07:54:26 PM

Quote from: RepentGamingTV on March 15, 2015, 11:31:07 AM
Quote from: Surrenderat20PLZ on March 15, 2015, 11:08:35 AM
Quote from: RepentGamingTV on March 15, 2015, 02:34:31 AM

I can't do scroll effects in a certain box, it would go across the screen.

Hm. What if it isn't scrolling? Could you get it to just fit into the box and if the message is too long it will simply be cut off or the message font size will get smaller? If not can I just get the notifications for the follower/subscriber? Thanks

Ya, I was trying, but couldn't get it to stay in the box, it just keeps scrolling thru it. :/

I meant without the scroll but thats ok thanks for trying. But you can do the notification/subscriber notifications still right?

Requested by: Surrenderat20plz

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htmdur=10000
Width: 600
Height: 200

CSS Code:

Code: [Select]

#follow-notification {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 580px !important;
	height: 150px !important;
	border-radius: 00px !important;
	background-image: url('http://i.imgur.com/qT5k62w.png') !important;
	background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
	text-align: center !important;
	margin-top: 30px !important;
	margin-left: 90px !important;
	margin-right: 100px !important;
	width: 400px !important;
	font-size: 30px !important;
	font-weight: normal !important;
	font-family: Arial Bold !important;
	color: white !important;
    -webkit-text-fill-color: white;
}

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

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 300px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/nYrVyEg.png') !important;
background-repeat: no-repeat !important;
background-size: initial !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: 170px !important;
	margin-left: 60px !important;
	margin-right: 250px !important;
	width: 450px !important;
	font-size: 22px !important;
	font-weight: normal !important;
	font-family: Arial Bold !important;
	color: white !important;
    -webkit-text-fill-color: white;
}
#donor-notification .amount {
position: absolute !important;
	text-align: center !important;
	margin-top: 25px !important;
	margin-left: 250px !important;
	margin-right: 250px !important;
	width: 300px !important;
	font-size: 30px !important;
	font-weight: normal !important;
	font-family: Arial Bold !important;
	color: white !important;
    -webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
	text-align: center !important;
	margin-top: 25px !important;
	margin-left: -20px !important;
	margin-right: 100px !important;
	width: 500px !important;
	font-size: 30px !important;
	font-weight: normal !important;
	font-family: Arial Bold !important;
	color: white !important;
    -webkit-text-fill-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.)

Subscriber:

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

CSS Code:

Code: [Select]

#sub-notification {
  display: none;
  position: absolute;
  width: 580px !important;
  height: 150px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/rJ3DTAr.png') !important;
}
#sub-notification .subname {
  margin-left: 140px !important;
  padding-top: 60px !important;
  width: 300px !important;
  text-align: center !important;
  font-size: 30px !important;
  font-family: Arial Bold !important;
  color: white !important;
}

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

TheNumbLock · « **Reply #22 on:** March 16, 2015, 03:02:02 AM »

Quote from: HeyItsMerkk on March 15, 2015, 04:14:24 PM

Image Link: http://imgur.com/ew39Mat
Font Style: Typograph
Font Color: Black
Any Text Fill?: No
Where do you want it located?: In the Middle
Example: None, sorry.
Anything else?: No

Requested by:

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=10000
Width: 500
Height: 150

CSS Code:

Code: [Select]

#follow-notification {
	display: none;
	position: absolute;
	width: 500px !important;
	height: 100px !important;
	border-radius: 00px !important;
	background-image: url('http://i.imgur.com/ew39Mat.png') !important;
	background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
	text-align: center !important;
	margin-top: 10px !important;
	margin-left: 50px !important;
	margin-right: 100px !important;
	width: 400px !important;
	font-size: 30px !important;
	font-weight: bold !important;
	font-family: Typograph !important;
	text-shadow:none !important;
	color: black !important;
    -webkit-text-fill-color: black;
}

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

Elfriedia · « **Reply #23 on:** March 18, 2015, 07:40:37 PM »

Follower Alert

Image Link: http://i.imgur.com/6Fduz2Q.jpg?1
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?: no
Where do you want text located? (Follower Name): middle of the bluebox
Example (If applicable): na
Anything else?: na

Donation Alert

Image Link: http://i.imgur.com/s82XJA3.jpg?1
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?: no
Marquee/Scroll Effect?: no
Currency Type: €
Where do you want text located?(Donator Name, Donation Amount, Message): Donator name and amount in middel of the bluebox
Example (If applicable): na
Anything else?: na

THX Elfriedia

TheNumbLock · « **Reply #24 on:** March 19, 2015, 04:43:47 AM »

Also if you want a transparent background, you will have to save it as a .png file.

Requested by: Elfriedia

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
	display: none;
	position: absolute;
	width: 1600px !important;
	height: 500px !important;
	border-radius: 00px !important;
	background-image: url('http://i.imgur.com/6Fduz2Q.jpg?1') !important;
	background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
	text-align: left !important;
	margin-top: 270px !important;
	margin-left: 300px !important;
	margin-right: 150px !important;
	width: 250px !important;
	font-size: 90px !important;
	font-weight: normal !important;
	font-family: arial !important;
	color: white !important;
}

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

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 1600px !important;
height: 500px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/s82XJA3.jpg?1') !important;
background-repeat: no-repeat !important;
background-size: initial !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: 250px !important;
	margin-left: 570px !important;
	width: 500px !important;
	font-size: 80px !important;
	font-weight: bold !important;
	font-family: Arial !important;
	color: white !important;
    -webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
	text-align: center !important;
	margin-top: 250px !important;
	margin-left:50px !important;
	width: 700px !important;
	font-size: 80px !important;
	font-weight: bold !important;
	font-family: Arial !important;
	color: white !important;
    -webkit-text-fill-color: white;
}

.donor:after {

content: " - " !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.)

lvlAether · « **Reply #25 on:** March 19, 2015, 07:25:35 PM »

Subscriber Alert

Image Link: http://i.imgur.com/fsoNiUJ.png
Font Style/Link: http://www.fontsquirrel.com/fonts/league-gothic (regular), font size:30px
Font Color: #f0f0f0
Any text fill/boarder?: no
Where do you want text located? Center of black area
Example (If applicable): http://i.imgur.com/QN05HzJ.png
Anything else?: letter spacing 1px, word spacing 3px

Donation Alert

Image Link: http://i.imgur.com/eBm9Mds.png
Font Style/Link: http://www.fontsquirrel.com/fonts/league-gothic (regular), font size:30px
Font Color: top: #f0f0f0
Any text fill/boarder?: no
Currency Type: $
Where do you want text located? Center of black area
Example (If applicable): http://i.imgur.com/KGEESzx.png
Anything else?: letter spacing 1px, word spacing 3px

Thank you!

TheNumbLock · « **Reply #26 on:** March 20, 2015, 03:19:38 AM »

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/nlj791t307dhzbd/LeagueGothic-Regular.otf 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:

Subscriber:

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

CSS Code:

Code: [Select]

@font-face { 
font-family: 'League'; 
src: url('InsertDownloadLinkHere'); 
}
#sub-notification {
  display: none;
  position: absolute;
  width: 435px !important;
  height: 78px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/fsoNiUJ.png') !important;
}
#sub-notification .subname {
position: absolute !important;
	text-align: left !important;
	margin-top: -130px !important;
	margin-left: 110px !important;
	margin-right: 200px !important;
	width: 300px !important;
	font-size: 28px !important;
	font-weight: bold !important;
	font-family: League !important;
	color: #f0f0f0 !important;
	letter-spacing: 3px;
	word-spacing: 6px;
}

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

Donation:

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

CSS Code:

Code: [Select]

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

#donor-notification {
width: 435px !important;
height: 78px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/eBm9Mds.png') !important;
background-repeat: no-repeat !important;
background-size: initial !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: -10px !important;
	margin-left: 110px !important;
	width: 300px !important;
	font-size: 20px !important;
	font-weight: normal !important;
	font-family: League !important;
	color: white !important;
    -webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
	text-align: center !important;
	margin-top: -10px !important;
	margin-left: -20px !important;
	width: 300px !important;
	font-size: 20px !important;
	font-weight: normal !important;
	font-family: League !important;
	color: white !important;
    -webkit-text-fill-color: white;
  letter-spacing: 3px;
	word-spacing: 6px;
}

#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.)

lvlAether · « **Reply #27 on:** March 20, 2015, 04:49:33 AM »

Thank you so much <3

xSgtPepperx · « **Reply #28 on:** March 25, 2015, 02:19:12 AM »

Hello,

I may be interested in one of these customized notifications you are designing for people. Very nice of you to be doing this btw. =)

I just have a small question before I make my request; I am attempting to use the deepbot notifications via OBS. I have OBS on my streaming PC and deepbot runs on my other/media PC. I have been able to get the OBS CLR Browser to work across the two machines thanks to another guide on these awesome forums. I have been able to use a few example CSS's to confirm that I can customize the notification without issue. The only thing I do not seem to be able to figure out is how can I get sound coming out from OBS? I would very much like to keep Deepbot and OBS running on the separate PCs as they are now, any insight would be very helpful. Thank you for your time.

Sgt. Pepper

TheNumbLock · « **Reply #29 on:** March 25, 2015, 05:20:41 AM »

Quote from: xSgtPepperx on March 25, 2015, 02:19:12 AM

Hello,

I may be interested in one of these customized notifications you are designing for people. Very nice of you to be doing this btw. =)

I just have a small question before I make my request; I am attempting to use the deepbot notifications via OBS. I have OBS on my streaming PC and deepbot runs on my other/media PC. I have been able to get the OBS CLR Browser to work across the two machines thanks to another guide on these awesome forums. I have been able to use a few example CSS's to confirm that I can customize the notification without issue. The only thing I do not seem to be able to figure out is how can I get sound coming out from OBS? I would very much like to keep Deepbot and OBS running on the separate PCs as they are now, any insight would be very helpful. Thank you for your time.

Sgt. Pepper

I am not sure, thought the sound would be transmitted thru the notification on the webpage.

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Notification WorkShop (Read 262326 times)

TheNumbLock

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Surrenderat20PLZ

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

HeyItsMerkk

Re: Custom Notification WorkShop

Surrenderat20PLZ

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

Elfriedia

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

lvlAether

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop

lvlAether

Re: Custom Notification WorkShop

xSgtPepperx

Re: Custom Notification WorkShop

TheNumbLock

Re: Custom Notification WorkShop