Author Topic: Custom Notification WorkShop  (Read 223196 times)

0 Members and 1 Guest are viewing this topic.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #15 on: March 15, 2015, 02:34:31 AM »
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. :o
« Last Edit: March 15, 2015, 02:42:01 AM by RepentGamingTV »
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #16 on: March 15, 2015, 02:39:41 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.)

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

Surrenderat20PLZ

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Surrenderat20PLZ
Re: Custom Notification WorkShop
« Reply #17 on: March 15, 2015, 11:08:35 AM »

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

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

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #18 on: March 15, 2015, 11:31:07 AM »

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

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. :/
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

HeyItsMerkk

  • Youngling
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile
  • Twitch Name: az_merkk
Re: Custom Notification WorkShop
« 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

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Surrenderat20PLZ
Re: Custom Notification WorkShop
« Reply #20 on: March 15, 2015, 07:54:26 PM »

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

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

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #21 on: March 16, 2015, 02:57:05 AM »

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

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

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #22 on: March 16, 2015, 03:02:02 AM »
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.)

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

Elfriedia

  • Youngling
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Elfriedia
Re: Custom Notification WorkShop
« 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

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« 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.)

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

lvlAether

  • Guest
Re: Custom Notification WorkShop
« 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!
« Last Edit: March 19, 2015, 07:40:38 PM by lvlAether »

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« 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.)

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

lvlAether

  • Youngling
  • *
  • Posts: 1
  • Karma: +0/-0
    • View Profile
Re: Custom Notification WorkShop
« Reply #27 on: March 20, 2015, 04:49:33 AM »
Thank you so much <3

xSgtPepperx

  • Youngling
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile
  • Twitch Name: xSgtPepperx
Re: Custom Notification WorkShop
« 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

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #29 on: March 25, 2015, 05:20:41 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.
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport