Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: TheNumbLock on February 02, 2015, 03:43:29 AM

Title: Custom Notification WorkShop
Post by: TheNumbLock on February 02, 2015, 03:43:29 AM

UPDATE: I will no longer be doing requests for the CSS for notifications. I currently have a full time job and not a whole lot of time to work on these. However, if you really want it done, I recommend asking another staff member.

---

---

---

I will be working on Custom Notifications for all DeepBot users. Don't expect your notifications to be done right away, since I am doing this for free. Expect up to 48 hour delay for your custom notifications to be done. (It all depends on how busy I am and how many requests I get.) If you want them done faster, you can donate to me, and I will move you to the top of the list. (PM me for details on that.)

Post Below with the following the notifications you need. Here are the layouts:

For uploading your images use Imgur (http://imgur.com/).

Updated: 4/23/2016 - Added Host/GameWisp Notifications to Workshop list.

Follower Alert:

Code: [Select]

Follower Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Follower Name):
Example (If applicable):
Anything else?:

Donation Alert: (You do not need to include all 3 text options, Just an FYI.)

Code: [Select]

Donation Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Currency Type:
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message):
Example (If applicable):
Anything else?:

Subscriber Alert:

Code: [Select]

Subscriber Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Months):
Example (If applicable):
Anything else?:

Host:

Code: [Select]

Host Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers):
Example (If applicable):
Anything else?:

GameWisp:

Code: [Select]

GameWisp Sub Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable):
Anything else?:


Title: Re: Custom Notification WorkShop
Post by: Gibbs on February 19, 2015, 02:19:48 AM

Subscriber Alert

Image Link: http://imgur.com/Qi6cYVd
Font Style/Link: Eras Bold ITC or Arial ; Text size a little smaller than the "MVP" but not too small (make it look good  ;) )
Font Color: Bright Gold or White
Any text fill/boarder?: No
Marquee/Scroll Effect?: No
Where do you want text located? (Subscriber Name) Below the Image
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 19, 2015, 03:26:59 AM

Quote from: Gibbs on February 19, 2015, 02:19:48 AM

Subscriber Alert

Image Link: http://imgur.com/Qi6cYVd
Font Style/Link: Eras Bold ITC or Arial ; Text size a little smaller than the "MVP" but not too small (make it look good  ;) )
Font Color: Bright Gold or White
Any text fill/boarder?: No
Marquee/Scroll Effect?: No
Where do you want text located? (Subscriber Name) Below the Image
Example (If applicable):
Anything else?:

Does this work? If not, I can look for a font that matches the MVP as best as I can.

Requested by: Gibbs

Subscriber:

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

CSS Code:

Code: [Select]

#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 420px !important;
  height: 341px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/Qi6cYVd.png') !important;
  background-position-y: 0px;
}
#sub-notification .subname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 50px !important;
margin-right: 180px !important;
width: 300px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: impact !important;
color: yellow !important;
}

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

(http://puu.sh/g2A7p/ebcf0f3a2d.png)

Title: Re: Custom Notification WorkShop
Post by: Gibbs on February 19, 2015, 06:09:30 AM

Looks great man! Thanks!

Title: Re: Custom Notification WorkShop
Post by: porgeland on February 19, 2015, 06:20:15 AM

Follower Alert

Image Link:http://imgur.com/gallery/EOnFUNT
Font Style/Link: bold arial
Font Color: white
Any text fill/boarder?: no
Marquee/Scroll Effect?:no
Where do you want text located? (Follower Name): on bottom
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: porgeland on February 19, 2015, 06:25:54 AM

Donation Alert

Image Link:http://imgur.com/gallery/VAfLNHd
Font Style/Link: Arial Bold
Font Color: Black
Any text fill/boarder?:no
Marquee/Scroll Effect?:no
Currency Type: usd
Where do you want text located?(Donator Name, Donation Amount, Message) all on bottom
Example (If applicable):Porgeland $20.00 thank you for a good stream!
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 19, 2015, 12:45:05 PM

Requested by: Porgeland

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 210px !important;
height: 210px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/EOnFUNT.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 150px !important;
margin-left: 10px !important;
margin-right: 50px !important;
width: 0px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: arial !important;
color: white !important;
}

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

(http://puu.sh/g3eNo/950e262466.png)



Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 450
Height: 270

CSS Code:

Code: [Select]

#donor-notification {
width: 390px !important;
height: 219px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/VAfLNHd.gif') !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: 110px !important;
margin-left: 140px !important;
margin-right: 100px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: black !important;
}

#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 110px !important;
margin-left: -120px !important;
margin-right: 100px !important;
width: 500px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: black !important;
}

.donor:after {

content: " - " ;

}

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

(http://puu.sh/g3fkY/9fa7719b7b.png)

Title: Re: Custom Notification WorkShop
Post by: Mangetank on February 22, 2015, 07:50:14 PM

Donation Alert

Image Link:http://imgur.com/zU4lwrd
Font Style/Link: Name in Blockt ->http://www.dafont.com/blockt.font and normal text in a normal easy read Windows font
Font Color: Orange
Any text fill/boarder?:
Marquee/Scroll Effect?:
Currency Type: dollar
Where do you want text located?(Donator Name, Donation Amount, Message) Name with amount next to it, with text below it and i would like it to be on the left side of Edd
Example (If applicable):
Anything else?: Nope that pretty much it :) Thanks in advance will you send me this in my Forum messages? it would be nice if you did... Thanks alot! :)

Title: Re: Custom Notification WorkShop
Post by: blindrungaming on March 08, 2015, 01:32:27 AM

Image Link: http://www.blindrungaming.com/wp-admin/upload.php?item=1532
Font Style/Link: http://www.google.com/fonts/specimen/Black+Ops+One
Font Color:black
Any text fill/boarder?:no
Marquee/Scroll Effect?:left to right
Where do you want text located? (Subscriber Name)
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: Ultimacetv on March 09, 2015, 10:36:18 PM

Follower Alert

Image Link: http://users.telenet.be/dennis/new%20follower.png
Font Style/Link: http://www.dafont.com/all-ages.font
Font Color: #af0202
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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 10, 2015, 04:26:04 AM

Quote from: blindrungaming on March 08, 2015, 01:32:27 AM

Image Link: http://www.blindrungaming.com/wp-admin/upload.php?item=1532
Font Style/Link: http://www.google.com/fonts/specimen/Black+Ops+One
Font Color:black
Any text fill/boarder?:no
Marquee/Scroll Effect?:left to right
Where do you want text located? (Subscriber Name)
Example (If applicable):
Anything else?:

I need to login to see the pic, try uploading somewhere else, like imgur.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 10, 2015, 04:49:05 AM

Quote from: Ultimacetv on March 09, 2015, 10:36:18 PM

Follower Alert

Image Link: http://users.telenet.be/dennis/new%20follower.png
Font Style/Link: http://www.dafont.com/all-ages.font
Font Color: #af0202
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

Also, to get the font to work, you have to click here: http://www.mediafire.com/download/b4ti8gmh1jft92a/AllAgesDEMO.ttf Then right click and copy download link on the download button, and paste it the CSS where it says InsertDownloadLinkHere

Requested by: Ultimacetv

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "All Ages";
src: url("InsertDownloadLinkHere");
}

#follow-notification {
display: none;
position: absolute;
top: 100px;
left: 50%;
width: 560px !important;
height: 150px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/rWzw5jM.png') !important;
background-repeat: no-repeat;
overflow: hidden !important;
}

#follow-notification .followname {
margin-top: 50px !important;
margin-left: 125px !important;
text-align: center !important;
width: 300px !important;
font-size: 44px !important;
font-weight: normal !important;
font-family: All Ages !important;
color: #af0202 !important;
}

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

(http://puu.sh/gtwuV/4f400f9009.jpg)

Title: Re: Custom Notification WorkShop
Post by: Ultimacetv on March 10, 2015, 06:08:17 AM

thanks allot, its working

greets

Ultimace

Title: Re: Custom Notification WorkShop
Post by: 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

Title: Re: Custom Notification WorkShop
Post by: 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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. :o

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/gA7d4/9a21562153.jpg)

Title: Re: Custom Notification WorkShop
Post by: 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. :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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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. :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. :/

Title: Re: Custom Notification WorkShop
Post by: 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

Title: Re: Custom Notification WorkShop
Post by: 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. :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?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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. :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.)

(http://puu.sh/gBxZU/d6d213d4be.jpg)



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

(http://puu.sh/gBySK/7af91f5c98.jpg)

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

(http://puu.sh/gBziq/33b8d2dd62.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/gBzXk/42036f3016.jpg)

Title: Re: Custom Notification WorkShop
Post by: Elfriedia 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  :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/gFPAu/f12b9da563.jpg)



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

(http://puu.sh/gFPHO/fe04f2aef1.jpg)

Title: Re: Custom Notification WorkShop
Post by: lvlAether 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!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/gH3hR/b6d96d70e2.png)



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

(http://puu.sh/gH3Ft/8c50461a95.png)

Title: Re: Custom Notification WorkShop
Post by: lvlAether on March 20, 2015, 04:49:33 AM

Thank you so much <3

Title: Re: Custom Notification WorkShop
Post by: 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.

Title: Re: Custom Notification WorkShop
Post by: Electro_mc on March 27, 2015, 08:19:46 AM

Follower Alert

Image Link: http://imgur.com/U9LwW86.gif (720 x 720)
Font Style/Link: http://www.1001fonts.com/feast-of-flesh-bb-font.html *feast of flesh font
Font Color: Gold
Any text fill/boarder?: black border/outline
Where do you want text located? (Follower Name): on the top above or on top of the top electron line
Example (If applicable):
Anything else?: Can you make it say, "*Username* is now an electron!"?

Title: Re: Custom Notification WorkShop
Post by: Electro_mc on March 27, 2015, 08:33:21 AM

Donation Alert

Image Link: https://31.media.tumblr.com/tumblr_mch6m1BGrZ1r8p1m3.gif
Font Style/Link: http://www.1001fonts.com/feast-of-flesh-bb-font.html *Feast of flesh font*
Font Color: gold
Any text fill/boarder?: none
Currency Type: $
Where do you want text located?(Donator Name, Donation Amount, Message): Under the picture
Example (If applicable):
Anything else?: Can you make it say, "*Username* has just donated *Amount*" and if possible show what rank they got from donating, like Bronze, Silver or Gold VIP?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 27, 2015, 08:39:42 AM

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/biqn8pcakwlo3kh/fofbb_reg.ttf 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: 750
Height: 750

CSS Code:

Code: [Select]

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

#follow-notification {
   display: none;
   position: absolute;
   width: 720px !important;
   height: 720px !important;
   border-radius: 10px;
   background-image: url('http://i.imgur.com/U9LwW86.gif') !important;
   background-repeat: no-repeat;
}
#follow-notification .followname {
   margin-top: 35px !important;
   margin-left: 50px !important;
   text-align: center !important;
   width: 600px !important;
   font-size: 38px !important;
   font-weight: bold !important;
   font-family: fofbb !important;
   color: gold !important;
   -webkit-text-stroke: 1px;
   -webkit-text-stroke-color: #000
}

.followname:after {

content: ' is now an electron! ' !important;
width: 300px !important;
}

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

(http://puu.sh/gR4YY/f8d5c84801.jpg)

Donation:

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

CSS Code:

Code: [Select]

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

#donor-notification {
position: absolute;
left: 0px !important;
width: 300px !important;
height: 300px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('https://31.media.tumblr.com/tumblr_mch6m1BGrZ1r8p1m3.gif') !important;
overflow: ahidden !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;
margin-top: 300px !important;
margin-left: -300px !important;
width: 350px !important;
padding-top: 0px !important;
text-align: center !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 24px !important;
   font-family: fofbb !important;
   color: gold !important;
   -webkit-text-stroke: 1px;
   -webkit-text-stroke-color: #000
}
#donor-notification .donor {
position: absolute;
margin-left: -100px !important;
margin-top: 270px !important;
width: 460px !important;
text-align: center !important;
line-height: 28px !important;
vertical-align: initial !important;
font-size: 24px !important;
   font-family: fofbb !important;
   color: gold !important;
   -webkit-text-stroke: 1px;
   -webkit-text-stroke-color: #000
}

.amount:before {

content: ' has just donated ' !important;
width: 10px !important;
margin-left: 0px !important;
margin-top: 500px !important;
}

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

(http://puu.sh/gR6gC/14d9784074.jpg)

Title: Re: Custom Notification WorkShop
Post by: ran_neechan on April 05, 2015, 03:18:42 AM

Follower Alert

Image Link: http://imgur.com/x5wjDRW,MwDMOMv#1
Font Style/Link: http://www.1001fonts.com/wake-up-honey-font.html
Font Color: White
Any text fill/boarder?:  None
Where do you want text located? (Follower Name): Under the picture
Example (If applicable): http://imgur.com/GLIYieR
Anything else?: same text as the example text  :)




Donation Alert

Image Link: http://imgur.com/x5wjDRW,MwDMOMv#0
Font Style/Link: http://www.1001fonts.com/wake-up-honey-font.html
Font Color: White
Any text fill/boarder?: None
Currency Type: €
Where do you want text located?(Donator Name, Donation Amount, Message) Under the Image
Example (If applicable): http://imgur.com/WIXl1Ef
Anything else?: Same text as the example one :)


I hope both are big enough to work with.
Thanks and keep the good work up :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 05, 2015, 10:53:50 AM

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/51nlqkafeiihhe3/Wake+Up+Honey.ttf 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: Ran_neechan

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "CF Crack and Bold";
src: url('InsertDownloadLinkHere');
}
#follow-notification {
display: none;
position: absolute;
width: 300px !important;
height: 212px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/MwDMOMv.gifg') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 0px !important;
margin-right: 100px !important;
width: 300px !important;
font-size: 22px !important;
font-weight: normal !important;
font-family: CF Crack and Bold !important;
color: white !important;
}

.followname:after {
content: 'is now following!' !important;
}

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

(http://puu.sh/h1TGj/d5e1b7c4c6.jpg)



Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=€
Width: 350
Height: 250

CSS Code:

Code: [Select]

@font-face {
font-family: 'CF Crack and Bold';
src: url('InsertDownloadLinkHere');
}
#donor-notification {
width: 250px !important;
height: 163px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/x5wjDRW.gif') !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: 120px !important;
margin-left: 50px !important;
margin-right: 0px !important;
width: 300px !important;
font-size: 22px !important;
font-weight: normal !important;
font-family: CF Crack and Bold !important;
color: white !important;
}
#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 120px !important;
margin-left: -70px !important;
margin-right: 0px !important;
width: 300px !important;
font-size: 22px !important;
font-weight: normal !important;
font-family: CF Crack and Bold !important;
color: silver !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.)

(http://puu.sh/h1TUZ/5a03b8fda0.jpg)

Title: Re: Custom Notification WorkShop
Post by: Rosath on April 08, 2015, 12:11:10 AM

Follower Alert

Image Link: http://imgur.com/X8sJ0q6,yv8dk7f#1
Font Style/Link: Cinzel Decorative http://www.google.com/fonts/specimen/Cinzel+Decorative
Font Color: White
Any text fill/boarder?: None
Where do you want text located? (Follower Name): In the banner
Example (If applicable):  None
Anything else?: I'd like it to say '' X is awesome!'' X being the name. And can the name (only the name) be red instead of white?

Donation Alert

Image Link: http://imgur.com/X8sJ0q6,yv8dk7f
Font Style/Link: Cinzel Decorative http://www.google.com/fonts/specimen/Cinzel+Decorative
Font Color: White
Any text fill/boarder?: None
Currency Type: CAD
Where do you want text located?(Donator Name, Donation Amount, Message) Donator name and amount in the image where there's a blank. The message under the image.
Example (If applicable):
Anything else?: I'd like it to say: ''@donatorname@ gave @amount@ of love! '' and can the name be in red, the amount in yellow?

thank yoooooouuuuuu

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 08, 2015, 02:21:07 AM

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/lobypmc6bd6aez9/Cinzel-Bold.ttf 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: Rosath

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Cinzel";
src: url("http://download1048.mediafire.com/muag6yrzmb5g/lobypmc6bd6aez9/Cinzel-Bold.ttf");
}

#follow-notification {
display: none;
position: absolute;
width: 701px !important;
height: 151px !important;
border-radius: 0px !important;
background-image: url('http://i.imgur.com/yv8dk7f.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 42px !important;
margin-left: 230px !important;
margin-right: 100px !important;
width: 400px !important;
font-size: 24px !important;
font-weight: normal !important;
font-family: impact;
color: white !important;
}

.followname:after {

content: ' is awesome!' !important;

}

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

(http://puu.sh/h52Qd/c5d9f34c7f.jpg)



Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 701
Height: 230

CSS Code:

Code: [Select]

@font-face {
font-family: "Cinzel";
src: url("http://download1048.mediafire.com/muag6yrzmb5g/lobypmc6bd6aez9/Cinzel-Bold.ttf");
}

#donor-notification {
width: 701px !important;
height: 151px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/X8sJ0q6.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 {
position: absolute !important;
text-align: center !important;
margin-top: 150px !important;
margin-left: 50px !important;
margin-right: 0px !important;
width: 600px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Cinzel !important;
color: yellow !important;
}
#donor-notification .amount {
position: absolute !important;
text-align: center !important;
margin-top: 25px !important;
margin-left: 460px !important;
margin-right: 0px !important;
width: 200px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Cinzel !important;
color: yellow !important;
}
#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 25px !important;
margin-left: 230px !important;
margin-right: 0px !important;
width: 300px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Cinzel !important;
color: red !important;
}

.donor:after {
content: '    gave' !important;
color: white !important;
}

.amount:after {
content: ' of love!' !important;
color: white !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.)

(http://puu.sh/h53sT/08ef99bca3.jpg)

Title: Re: Custom Notification WorkShop
Post by: Rosath on April 08, 2015, 06:18:48 AM

You're amazing! Thank you!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 08, 2015, 07:17:18 AM

Quote from: Rosath on April 08, 2015, 06:18:48 AM

You're amazing! Thank you!

Also forgot to put insertdownloadlink here in the CSS. But at the top of each CSS replace the this: src: url("http://download1048.mediafire.com/muag6yrzmb5g/lobypmc6bd6aez9/Cinzel-Bold.ttf");

The download part inside the " with the download link you get, as I posted in the post above.

Title: Re: Custom Notification WorkShop
Post by: E60530d on April 08, 2015, 12:41:23 PM

image

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 08, 2015, 01:00:17 PM

Follower:

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

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/149FXg9.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 50px !important;
margin-left: 70px !important;
margin-right: 100px !important;
width: 300px !important;
font-size: 34px !important;
font-weight: normal !important;
  font-family: impact;
color: white !important;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

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

(http://puu.sh/h5IQp/29cff94f39.jpg)

Title: Re: Custom Notification WorkShop
Post by: Opt1kal on April 13, 2015, 07:21:03 AM

Donation Alert

Image Link: http://i.imgur.com/j4DtyFG.png
Font Style/Link: Lucida Console (Or something similar)
Font Color: White
Any text fill/boarder?: Nope
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) They are marked on the image. The message just goes into the big blank area.
Example (If applicable):
Anything else?: Nope that's about it.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 13, 2015, 07:40:37 AM

Requested by: opt1kal


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 811px !important;
height: 277px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/j4DtyFG.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: 65px !important;
margin-left: 50px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family:  Lucida Console !important;
color: #4298C1 !important;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    -webkit-text-fill-color: white;
}
#donor-notification .amount {
position: absolute !important;
text-align: center !important;
margin-top: 170px !important;
margin-left: 470px !important;
width: 300px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family:  Lucida Console !important;
color: #4298C1 !important;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    -webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 170px !important;
margin-left: 250px !important;
width: 300px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family:  Lucida Console !important;
color: #4298C1 !important;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    -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.)

(http://puu.sh/hbI2C/958bca3f23.jpg)

Title: Re: Custom Notification WorkShop
Post by: hoodlumscrafty on April 14, 2015, 09:57:01 AM

For Twitch Channel: HoodlumScrafty

Width: 1920
Height: 1080

Donation Alert

Image Link: http://i.imgur.com/dQpRaYP.gif
Font Style/Link: http://www.font-db.com/font/tikiisland/55653
Font Color: Green
Any text fill/boarder?: Thick Black Border
Where do you want text located? (Follower Name): Above the Scraggy when it throws its hands up.
Example (If applicable):
Anything else?:

Subscriber Alert

Image Link: http://i.imgur.com/dQpRaYP.gif
Font Style/Link: http://www.font-db.com/font/tikiisland/55653
Font Color: Orange
Any text fill/boarder?: Thick Black Border
Where do you want text located? (Follower Name): Above the Scraggy when it throws its hands up.
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 14, 2015, 10:49:54 AM

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/069q2jw6ijic6ql/font.ttf 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: hoodlumscrafty

Subscriber:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Tiki";
src: url("InsertDownloadLinkHere");
}

#sub-notification {
width: 1920px !important;
height: 1080px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/dQpRaYP.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: 100px !important;
margin-left: 620px !important;
width: 700px !important;
font-size: 70px !important;
font-weight: normal !important;
font-family: Tiki !important;
color: orange !important;
-webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: black;
}

.subname:after {

content: ' Subscribed!' !important;
}

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

(http://puu.sh/hdeje/dc951358aa.jpg)


Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Tiki";
src: url("InsertDownloadLinkHere");
}

#donor-notification {
width: 1920px !important;
height: 1080px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/dQpRaYP.gif') !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: 220px !important;
margin-left: 500px !important;
width: 1000px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family:  Tiki !important;
color: gree !important;
-webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
    -webkit-text-fill-color: green;
}
#donor-notification .amount {
position: absolute !important;
text-align: center !important;
margin-top: 70px !important;
margin-left: 820px !important;
width: 600px !important;
font-size: 70px !important;
font-weight: normal !important;
font-family:  Tiki !important;
color: #4298C1 !important;
-webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
    -webkit-text-fill-color: green;
}
#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 70px !important;
margin-left: 570px !important;
width: 600px !important;
font-size: 70px !important;
font-weight: normal !important;
font-family:  Tiki !important;
color: #4298C1 !important;
-webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
    -webkit-text-fill-color: green;
}

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

(http://puu.sh/hdevR/835be37b90.jpg)

Title: Re: Custom Notification WorkShop
Post by: Xzapo 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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 (http://www.mediafire.com/download/jjbnu3wbap8lgct/batmfa__.ttf) 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.)

(http://puu.sh/hgfbQ/860184b47e.jpg)


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

(http://puu.sh/hgfbw/83bcfcd026.jpg)

Title: Re: Custom Notification WorkShop
Post by: Xzapo on April 17, 2015, 09:09:31 PM

Looks awesome thanks man!

Title: Re: Custom Notification WorkShop
Post by: Quigonswag 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/hltvp/d14930585d.jpg)

Title: Re: Custom Notification WorkShop
Post by: Gutta_man_popa 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.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/hpX27/2bcdb5d4a7.jpg)

Title: Re: Custom Notification WorkShop
Post by: 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?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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

Title: Re: Custom Notification WorkShop
Post by: Camcamtheginger 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.

Title: Re: Custom Notification WorkShop
Post by: yourfateismybullet 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?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/hwwU4/89eb9ac091.jpg)


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

(http://puu.sh/hwwGR/c321cb0411.jpg)

Title: Re: Custom Notification WorkShop
Post by: s314der 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!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/hx7qH/7dd38af9cd.jpg)

Title: Re: Custom Notification WorkShop
Post by: 8BitMom 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! :)

Title: Re: Custom Notification WorkShop
Post by: jwhite8559 on May 07, 2015, 01:56:37 PM

Requested by: 8BitMom

Donation:

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

CSS Code:

Code: [Select]


#donor-notification {
position: center !important;
margin-left: 90px !important;
width: 364px !important;
height: 132px !important;
background-color: transparent !important;
background-image: url('http://i.imgur.com/bFINo7n.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 {
position: absolute !important;
margin-top: 125px !important;
margin-left: -20px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}
 
#donor-notification .amount {
position: absolute !important;
margin-top: 45px !important;
margin-left: -290px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}
 
#donor-notification .donor {
position: absolute !important;
margin-top: 20px !important;
margin-left: -80px !important;
width: 400px !important;
font-size: 25px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}

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

(http://puu.sh/hEpgs/1f0e42a348.jpg)

Title: Re: Custom Notification WorkShop
Post by: 8BitMom on May 07, 2015, 09:10:50 PM

Thank you so much!! <3

Title: Re: Custom Notification WorkShop
Post by: jwhite8559 on May 08, 2015, 03:24:34 AM

8BitMom you are very welcome just let me know if you need anything else.

Title: Re: Custom Notification WorkShop
Post by: fanatics34 on May 08, 2015, 05:45:52 AM

Follower Alert

Image Link: http://i.imgur.com/NGK3YuG.png
Font Style/Link: bold ariel
Font Color: White
Any text fill/boarder?:No
Where do you want text located? (Follower Name): Centered, between wings and blue/black boarder
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: jwhite8559 on May 08, 2015, 07:17:32 AM

Requested by: fanatics34

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 234px;
border-radius: 10px;
background-image: url('http://i.imgur.com/NGK3YuG.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 104px !important;
margin-left: 240px !important;
text-align: center;
width: 313px;
font-size: 32px;
font-weight: Bold;
text-transform: uppercase !important;
font-family: Arial !important;
text-shadow: 2px 2px 1px #000;
color: white;
}


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

(http://puu.sh/hFi3c/4d48798380.jpg)

Title: Re: Custom Notification WorkShop
Post by: fanatics34 on May 08, 2015, 08:12:02 AM

Thank you  jwhite8559!!!

Also I was curious could I get the same thing for a donation notification with the name in the middle and text message below it?

Title: Re: Custom Notification WorkShop
Post by: jwhite8559 on May 08, 2015, 09:57:29 AM

Requested By: fanatics34

Donation:

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

CSS Code:

Code: [Select]


#donor-notification {
position: center !important;
margin-left: 90px !important;
width: 800px !important;
height: 234px !important;
background-color: transparent !important;
background-image: url('http://i.imgur.com/NGK3YuG.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 {
position: absolute !important;
margin-top: 200px !important;
margin-left: 195px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}

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

#donor-notification .donor {
position: absolute !important;
margin-top: 103px !important;
margin-left: -10px !important;
width: 400px !important;
font-size: 30px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}


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

(http://puu.sh/hFpXV/0acbcc841f.jpg)

Title: Re: Custom Notification WorkShop
Post by: anthonydh88 on May 11, 2015, 11:44:47 AM

Donation Alert

Image Link: http://i.imgur.com/hZyGIfJ.png
Font Style/Link: any
Font Color: red
Any text fill/boarder?:
Currency Type:
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable): http://i.imgur.com/7kju0Ii.png
Anything else?: it comes down from the top of the screen

From <http://deepbot.deep.sg/forums/index.php?topic=2704.0>
wight maybe 600 tks by the way man

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 12, 2015, 03:11:35 AM

Requested by: Anthonydh88

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 510
Height: 400

CSS Code:

Code: [Select]

#donor-notification {
width: 504px !important;
height: 360px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hZyGIfJ.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: 140px !important;
        margin-left: 60px !important;
        margin-right: 10px !important;
        width: 300px !important;
        font-size: 14px !important;
        font-weight: normal !important;
        font-family: Arial !important;
        color: #ffffff !important;
    -webkit-text-fill-color: white;
}
#donor-notification .amount {
position: absolute !important;
        text-align: center !important;
        margin-top: 110px !important;
        margin-left: 200px !important;
        margin-right: 10px !important;
        width: 170px !important;
        font-size: 22px !important;
        font-weight: normal !important;
        font-family: Arial !important;
        color: #ffffff !important;
        text-shadow: 2px 2px 10px red;
        -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: red;
    -webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
        text-align: center !important;
        margin-top: 110px !important;
        margin-left: -40px !important;
        margin-right: 0px !important;
        width: 400px !important;
        font-size: 22px !important;
        font-weight: normal !important;
        font-family: Arial !important;
        color: #ffffff !important;
        text-shadow: 0 0 10px red;
        -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: red;
    -webkit-text-fill-color: white;
}
 
#donor-notification .title {
padding-top: 0px !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.)

(http://puu.sh/hJGPX/22f035d481.jpg)

Title: Re: Custom Notification WorkShop
Post by: Seppuko on May 15, 2015, 12:57:43 AM

Follower Alert:

Image Link: http://i.imgur.com/mOtkz5q.gif
Font Style: https://www.google.com/fonts (Limelight)
Font Color for Follower Name: #992727
Font Color for the other Text: white
Small black border around the Text:
Text Location: right next to the Gif
Anything Else : Can you add a text after the follower name like this : ExpertsOnline <br> joined the Order of the Samurai!



many thanks in advance =)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 15, 2015, 04:50:04 AM

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/c7xkjhrm6j5jfi9/Limelight-Regular.ttf Don't download it but right click the download button and hit copy link. Then you will insert into the CSS where I put InsertDownloadLinkHere

Requested by: Seppuko

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 900
Height: 240

CSS Code:

Code: [Select]

@font-face {
font-family: 'LL';
src: url('InsertDownloadLinkHere');
}
#follow-notification {
display: none;
position: absolute;
width: 352px !important;
height: 240px !important;
border-radius: 10px;
background-image: url('http://i.imgur.com/mOtkz5q.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 50px !important;
margin-left: 390px !important;
text-align: center !important;
width: 400px !important;
font-size: 30px !important;
font-weight: normal !important;
  font-weight: normal !important;
font-family: LL !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #992727;
}

.followname:after {
margin-left: -30px !important;
content: ' joined the Order of the Samurai!' !important;
-webkit-text-fill-color: white;
white-space: nowrap;
text-align: left !important;
}

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

(http://puu.sh/hNon3/2e82ca6343.jpg)

Title: Re: Custom Notification WorkShop
Post by: Seppuko on May 15, 2015, 05:52:45 AM

Thank you very much =)

Title: Re: Custom Notification WorkShop
Post by: TheManLtDan on May 20, 2015, 11:28:18 AM

i would like something to go with this picture im going to link, id like it to say "Lt. Dan You have a new follower!" then have the new followers name pop up below that. just a normal text works for me at the moment, and what ever color of text you think will work best with the picture.


image link: http://sharethe.buzz/wp-content/uploads/2015/03/Tom-Hanks-Forrest-Gump-jpg.jpg

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 20, 2015, 11:58:33 AM

Requested by: TheManLtDan

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 538
Height: 320

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 538px !important;
height: 302px !important;
background-image: url('http://i.imgur.com/kne2zhr.jpg') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 200px !important;
margin-left: 100px !important;
text-align: center !important;
width: 350px !important;
font-size: 40px !important;
font-weight: normal !important;
  font-family: Impact !important;
  color: #ffffff !important;
-webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: white;
}

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

(http://puu.sh/hTMEu/2ef652d325.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheManLtDan on May 21, 2015, 11:07:52 AM

thanks so much! now i must ask where do i insert the code to make it work, still really new to all of this

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 21, 2015, 11:24:24 AM

Quote from: TheManLtDan on May 21, 2015, 11:07:52 AM

thanks so much! now i must ask where do i insert the code to make it work, still really new to all of this

So on OBS, you already added a CLR Browser Source? If yes, then you edit the properties of the CLR Browser and input what I said, the URL and dimensions go on the General Tab, and the CSS Code, goes on the CSS tab, just copy and paste, then overwrite anything on the CSS tab. Then you can test it, by doing preview on the follower notification settings on deepbot. Make sure OBS CLR Browser is checked on those settings as well. If you have any trouble/problems, let me know.

Title: Re: Custom Notification WorkShop
Post by: TheManLtDan on May 21, 2015, 11:33:51 AM

sorry, i cant seem to figure out how to get the CLR browser to hook up with obs. this is making me feel really dumb cuz im normally pretty decent with this kind of stuff

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 21, 2015, 11:49:43 AM

Quote from: TheManLtDan on May 21, 2015, 11:33:51 AM

sorry, i cant seem to figure out how to get the CLR browser to hook up with obs. this is making me feel really dumb cuz im normally pretty decent with this kind of stuff

I recommend closing OBS during all of this.

So just follow the first part of this guide, the Pre-requisites, Install, and Other Required Software: http://deepbot.deep.sg/forums/index.php?topic=2890.msg13484#msg13484

Install both 32-bit and 64-bit plugins of CLR Browser, you can stop reading the guide right before setup, but the guide will also assist on helping you setup the notification as well.

Title: Re: Custom Notification WorkShop
Post by: TheManLtDan on May 24, 2015, 04:47:03 AM

i feel super retared right now, but i still cant seem to figure out how to get everything to work like how the guide is saying. you should maybe think about a youtube video on how to do this.

Title: Re: Custom Notification WorkShop
Post by: JDM_4EVA on May 24, 2015, 05:18:41 AM

im trying to get my css to work with a custom font im using with no luck i have everything working but the font

Code: [Select]

body {
    background-color: transparent;
    color: white;
}

#follow-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 580px;
  height: 110px;
  border-radius: 10px;
  background-image: url('http://i.imgur.com/XwX5kMx.png') !important;
  background-repeat: no-repeat;
}
#follow-notification .leftimage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
  background-size: 100px;
  float: left;
  border-radius: 10px;
}
#follow-notification .followname {
  margin-left: 96px;
  padding-top: 15px;
  text-align: center;
  width: 385px;
  line-height: 55px;
  vertical-align: middle;
  font-size: 32px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #000;
  color: #ffffff;
}

#follow-notification .header {
  margin-right: 115px;
  padding-top: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 26px;
  line-height: 26px;
  font-family: ('Homoarakhn Regular');
  src: url ('C:\Windows\Fonts\Homoarak.ttf');
  text-shadow: 1px 1px 1px #FFFDE8;
  color: red;
  float: right;
  border-bottom: red;
  border-bottom-style: double;
}
can anyone help me get this working?

Title: Re: Custom Notification WorkShop
Post by: Davidccheng on May 28, 2015, 07:20:21 AM

Can you please create a deepbot donation notification CSS for me?

Donation Alert

Image Link: http://i.imgur.com/evoTyEz.gif
Font Style/Link: Gotham font (the middle font here: http://madebymany.com.s3.amazonaws.com/legacy/uploads/2008/03/gotham.gif)
Font Color: Green
Any text fill/boarder?:
Currency Type: $ (dollars)
Where do you want text located?(Donator Name, Donation Amount, Message) Just place all three text fields to the right of image.
Example (If applicable):
Anything else?:

THANKS SO MUCH!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 28, 2015, 08:28:26 AM

Requested by: Davidccheng

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1500
Height: 950  (You may need to adjust a little bit bigger if donation messages get too long. But it should fit.)

CSS Code:

Code: [Select]

@font-face {
font-family: "Gotham";
src: url("http://freakfonts.com/download/41930.html");
}

#donor-notification {
width: 1500px !important;
height: 800px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/evoTyEz.gif') !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: 750px !important;
margin-left: 250px !important;
width: 1000px !important;
font-size: 40px !important;
font-family: Gotham !important;
font-weight: normal !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
-webkit-text-fill-color: green;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 300px !important;
margin-left: 250px !important;
font-size: 70px !important;
font-family: Gotham !important;
font-weight: normal !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
-webkit-text-fill-color: green;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 200px !important;
margin-left: 370px !important;
font-size: 70px !important;
font-family: Gotham !important;
font-weight: normal !important;
color: red !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
-webkit-text-fill-color: green;
}

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

(http://puu.sh/i356C/e2c0820f75.jpg)

Title: Re: Custom Notification WorkShop
Post by: Davidccheng on May 28, 2015, 01:19:51 PM

Thanks so much, but it doesn't work. It just says "experts online donated" etc.  I'm using xsplit, so I used double quotes for the URL links, and still nothing.  Any suggestions?

Thanks!

Title: Re: Custom Notification WorkShop
Post by: Davidccheng on May 28, 2015, 01:22:31 PM

Also, I think there was a typo in the imgur link. (i.imgur).  I took out the "i." and still nothing.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 28, 2015, 01:27:25 PM

Quote from: Davidccheng on May 28, 2015, 01:22:31 PM

Also, I think there was a typo in the imgur link. (i.imgur).  I took out the "i." and still nothing.

Oh it's because xsplit likes " , not '. Let me fix the CSS. And the "i" is suppose to be there.

Edit: Fixed

Title: Re: Custom Notification WorkShop
Post by: Davidccheng on May 28, 2015, 01:43:14 PM

In regards to "edit: fixed": it's fixed or you're fixing it?  Where do I find the new CSS?  Thanks!!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 28, 2015, 01:56:34 PM

Quote from: Davidccheng on May 28, 2015, 01:43:14 PM

In regards to "edit: fixed": it's fixed or you're fixing it?  Where do I find the new CSS?  Thanks!!

Up above, I just edit the post. :o

Title: Re: Custom Notification WorkShop
Post by: Davidccheng on May 28, 2015, 01:57:55 PM

Yeah, I figured. Tried it, and still nothing :(

Title: Re: Custom Notification WorkShop
Post by: Davidccheng on May 28, 2015, 02:28:41 PM

nm, I added the double quotes in the imgur link, and it worked.  Thanks so much, RepentGamingTV!!!!

Title: Re: Custom Notification WorkShop
Post by: CalToxReaper on June 01, 2015, 10:10:11 PM

Donation Alert

Image Link: http://s1074.photobucket.com/user/ComputeDrift/media/Teamcaltox-Donation_zpsvk97v4n1.jpg.html
Font Style/Link: Standard Or What looks cool with photo provided
Font Color: Green
Any text fill/boarder?: The photo provided is 580x110 so, or i just dont know what you mean xD
Currency Type: $ usa
Where do you want text located?(Donator Name, Donation Amount, Message) i would like 2 ways to do this just incase i dont like the messges being showed

Example 1:doner name right after Go Team Caltox (size it to fit anyname) then the amount messge below that so it sould look like this
Go team caltox:(username)(amount$)
(Messge:great stream buddy)

Example 2: just amout next to go team caltox then below the user name
Go Team CalTox (Amount$)
         (username centerd)

Anything else?: I would like to have bouth ex done but if you can do ex 1 for now to get me started thats cool i would like ex 2 if spam starts to show up in the messeges get me?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 02, 2015, 06:50:17 AM

Requested by:

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 150px !important;
background-color: transparent !important;
background-image:url('http://i1074.photobucket.com/albums/w416/ComputeDrift/Teamcaltox-Donation_zpsvk97v4n1.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 .message {
position: absolute !important;
margin-top: 60px !important;
margin-left: 50px !important;
width: 500px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -10px !important;
margin-left: 80px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -10px !important;
margin-left: 200px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/i8YmM/a0f2517ff5.jpg)

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 150px !important;
background-color: transparent !important;
background-image:url('http://i1074.photobucket.com/albums/w416/ComputeDrift/Teamcaltox-Donation_zpsvk97v4n1.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 .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -10px !important;
margin-left: -10px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 30px !important;
margin-left: 50px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/i8Yz3/ec333c8a6a.jpg)

Title: Re: Custom Notification WorkShop
Post by: CalToxReaper on June 02, 2015, 07:19:59 AM

Quote from: RepentGamingTV on June 02, 2015, 06:50:17 AM

Requested by:

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 150px !important;
background-color: transparent !important;
background-image:url('http://i1074.photobucket.com/albums/w416/ComputeDrift/Teamcaltox-Donation_zpsvk97v4n1.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 .message {
position: absolute !important;
margin-top: 60px !important;
margin-left: 50px !important;
width: 500px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -10px !important;
margin-left: 80px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -10px !important;
margin-left: 200px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/i8YmM/a0f2517ff5.jpg)

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 150px !important;
background-color: transparent !important;
background-image:url('http://i1074.photobucket.com/albums/w416/ComputeDrift/Teamcaltox-Donation_zpsvk97v4n1.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 .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -10px !important;
margin-left: -10px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 30px !important;
margin-left: 50px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Arial !important;
color: #ffffff !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/i8Yz3/ec333c8a6a.jpg)

That's awesome thanks bro!

Title: Re: Custom Notification WorkShop
Post by: Uknowitbro on June 02, 2015, 01:38:30 PM

Donation Alert

Image Link: http://s284.photobucket.com/user/Uknowitbro/media/donationalert_zpslrkpfzjd.jpg.html?filters[user]=143287564&filters[recent]=1&sort=1&o=4
Font Style: Impact Regular (Impact)
Font Color: Black
Any text fill/boarder?: The photo linked above? ^^^. I believe that is what you mean.
currency type: $ (usa)
Where do you want text located? http://s284.photobucket.com/user/Uknowitbro/media/donationalertexample_zpsfhanu2uq.jpg.html?filters[user]=143287564&filters[recent]=1&sort=1&o=0
Example: The regular alert and example alert provided above ^^^.
Anything else: ... width: 1000 pixels and height: 150 pixels


Thank you,
Uknowitbro

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 02, 2015, 02:58:46 PM

Requested by: Uknowitbro

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 1000px !important;
height: 150px !important;
background-color: transparent !important;
background-image:url('http://i284.photobucket.com/albums/ll16/Uknowitbro/donationalert_zpslrkpfzjd.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 .message {
position: absolute !important;
margin-top: 50px !important;
margin-left: 250px !important;
text-align: left;
font-size: 22px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
-webkit-text-fill-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -20px !important;
margin-left: -190px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -20px !important;
margin-left: -150px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
-webkit-text-fill-color: black;
}

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

(http://puu.sh/i9mMI/d8fe066403.png)

Title: Re: Custom Notification WorkShop
Post by: PerkPerky on June 03, 2015, 07:09:56 AM

Hello, Using twitchalerts, their alert is transparent
(http://i.imgur.com/OfAaLRi.png)

but using my css, it always has a color background
(http://i.imgur.com/EIotpXc.png)

what should I change my css to to make it transparent?

Code: [Select]

body {
    background-color: transparent;
    color: white;
}

#follow-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 150px;
  background-color: #0A2027;
  border-radius: 10px;
}
#follow-notification .leftimage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-image:url('[url=http://i.imgur.com/DOwiyIa.gif]http://i.imgur.com/DOwiyIa.gif[/url]') !important;
  background-position-x: -25px;
  background-position-y: -50px;
  background-size: 160px;
  float: left;
  border-radius: 10px;
}
#follow-notification .followname {
  margin-left: 96px;
  padding-top: 15px;
  text-align: center;
  width: 385px;
  line-height: 55px;
  vertical-align: middle;
  font-size: 32px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #000;
  color: #ffffff;
}

#follow-notification .header {
  margin-right: 115px;
  padding-top: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 26px;
  line-height: 26px;
  font-family: Algerian;
  text-shadow: 1px 1px 1px #FFFDE8;
  color: red;
  float: right;
  border-bottom: red;
  border-bottom-style: double;
}


Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 03, 2015, 07:35:09 AM

Requested by: Perkulator_Time

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
        display: none;
        position: absolute;
        width: 400px !important;
        height: 122px !important;
        background-image: url('http://i.imgur.com/DOwiyIa.gif') !important;
        background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 5px !important;
margin-left: 100px !important;
margin-right: 100px !important;
width: 385px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: Algerian !important;
color: #ffffff !important;
  text-shadow: 2px 2px 1px #000;
}

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

(http://puu.sh/iafNn/e50aa927a8.jpg)

Title: Re: Custom Notification WorkShop
Post by: Dodevrouw on June 05, 2015, 08:56:14 PM

Could it be possible to get these pictures set up for followers and donations .
They came with my overlay and i really like the look of them .
Is it also possible to get the text in the box that they attach to the donation?
I live in the netherlands so a € instead of the dolar one would be very nice :), and of course the name of the donator at the top :)

Hope to hear from you soon

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 06, 2015, 09:23:44 AM

I tried my best to fit the donation message in the box. You may have to adjust the width if you get longer messages.

Requested by: Dodevrouw

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;
        background-image: url('http://i.imgur.com/r9J0HRe.png') !important;
        background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 100px !important;
margin-right: 100px !important;
width: 385px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: Algerian !important;
color: #ffffff !important;
  text-shadow: 2px 2px 1px #000;
}

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

(http://puu.sh/ie3Mr/b1c1735a64.jpg)

Subscriber:

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

CSS Code:

Code: [Select]

#sub-notification {
width: 580px !important;
height: 110px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/7iYbIj7.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: -115px !important;
margin-left: 180px !important;
width: 150px !important;
font-size: 32px !important;
text-transform: uppercase;
font-weight: normal !important;
  font-family: Algerian;
color: #ffffff !important;
}

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

(http://puu.sh/ie3Vn/1ee2f110e3.jpg)

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%E2%82%AC
Width: 580
Height: 150

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 110px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/EnbRil8.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: 60px !important;
margin-left: 50px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 16px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 2px !important;
margin-left: -50px !important;
font-size: 24px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 0px !important;
margin-left: -30px !important;
text-transform: capitalize;
font-size: 24px !important;
font-weight: bold !important;
font-family: Algerian !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

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

(http://puu.sh/ie4jS/815d41c13f.jpg)

Title: Re: Custom Notification WorkShop
Post by: AndreaBLN on June 06, 2015, 04:58:47 PM

Follower Alert
Image Link: http://imgur.com/ahCIh92
Font Style/Link: Arial Black
Font Color: White
Any Text Fill/Border?: %name% has donated %amount% to the channel. (maybe message also)
Where do you want text located?: From left to the right
Example: http://imgur.com/Tiq06ZJ
Anything else?: No

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 06, 2015, 05:09:07 PM

Requested by: andreabln

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%E2%82%AC
Width: 1673
Height: 220

CSS Code:

Code: [Select]

#donor-notification {
width: 1673px !important;
height: 200px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/ahCIh92.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: 70px !important;
margin-left: 550px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 24px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 0px !important;
margin-left: -100px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 0px !important;
margin-left: -250px !important;
text-transform: capitalize;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' has donated' !important;
}

.amount:after {
content: ' to the channel.' !important;
}

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

(http://puu.sh/ieoC4/341a0f306a.jpg)

Title: Re: Custom Notification WorkShop
Post by: jukeboxgamer on June 07, 2015, 03:27:32 AM

Follower Alert

Image Link:http://i.imgur.com/gDKZQp3h.png
Font Style/Link:http://www.dafont.com/karmatic-arcade.font
Font Color:Neon Green
Any text fill/boarder?:
Where do you want text located? (Follower Name): Kinda near the top
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 07, 2015, 05:17:01 AM

Requested by: jukeboxgamer

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1024
Height: 750

CSS Code:

Code: [Select]

@font-face {
font-family: 'KA';
src: url('http://download1330.mediafire.com/rdb8egddzhrg/t3o1jo58pz738be/ka1.ttf');
}

#follow-notification {
        display: none;
        position: absolute;
        width: 1024px !important;
        height: 731px !important;
        background-image: url('http://i.imgur.com/gDKZQp3h.png') !important;
        background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 120px !important;
margin-left: 230px !important;
margin-right: 100px !important;
width: 385px !important;
font-size: 56px !important;
font-weight: normal !important;
font-family: KA !important;
color: #00FF00 !important;
  text-shadow: 2px 2px 1px #000;
}

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

(http://puu.sh/ieZUu/3a09ccba59.jpg)

Title: Re: Custom Notification WorkShop
Post by: jukeboxgamer on June 07, 2015, 06:27:47 AM

thanks bro

Title: Re: Custom Notification WorkShop
Post by: jukeboxgamer on June 07, 2015, 09:24:19 AM

Donation Alert

Image Link:http://i.imgur.com/AyJveIe.jpg
Font Style/Link:http://www.dafont.com/karmatic-arcade.font
Font Color:lime green
Any text fill/boarder?:
Currency Type:
Where do you want text located?(Donator Name, Donation Amount, Message) in the middle for the 4 dollar bills
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: jukeboxgamer on June 07, 2015, 09:31:17 AM

Follower Alert

Image Link:http://i.imgur.com/gDKZQp3h.png
Font Style/Link:http://www.dafont.com/karmatic-arcade.font
Font Color:lime green
Any text fill/boarder?:
Where do you want text located? (Follower Name just followed!): Kinda near the top
Example (If applicable):
Anything else?:can you make it follower name just followed!   and i made a few other thing if you could please go over!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 07, 2015, 11:08:20 AM

Requested by: jukeboxgamer

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1024
Height: 750

CSS Code:

Code: [Select]

@font-face {
font-family: 'KA';
src: url('http://download1330.mediafire.com/rdb8egddzhrg/t3o1jo58pz738be/ka1.ttf');
}

#follow-notification {
display: none;
position: absolute;
width: 1024px !important;
height: 731px !important;
background-image: url('http://i.imgur.com/gDKZQp3h.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 120px !important;
margin-left: 230px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 56px !important;
font-weight: normal !important;
font-family: KA !important;
color: #00FF00 !important;
  text-shadow: 2px 2px 1px #000;
}

.followname:after {
content: ' just followed!';
}

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

(http://puu.sh/ifjD6/3b68babe66.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 2100
Height: 1550

CSS Code:

Code: [Select]

@font-face {
font-family: 'KA';
src: url('http://download1330.mediafire.com/rdb8egddzhrg/t3o1jo58pz738be/ka1.ttf');
}

#donor-notification {
width: 2100px !important;
height: 1500px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/AyJveIe.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 .message {
position: absolute !important;
margin-top: 380px !important;
margin-left: 700px !important;
width: 700px !important;
text-transform: capitalize;
font-size: 30px !important;
font-weight: bold !important;
font-family: KA !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 270px !important;
margin-left: -230px !important;
font-size: 44px !important;
font-weight: bold !important;
font-family: KA !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 200px !important;
margin-left: -100px !important;
text-transform: capitalize;
font-size: 44px !important;
font-weight: bold !important;
font-family: KA !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

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

(http://puu.sh/ifgkJ/52c0cb2750.jpg)

Title: Re: Custom Notification WorkShop
Post by: jack0mo on June 10, 2015, 07:10:46 AM

Follower Alert

Image Link: http://i.imgur.com/mEV5Kv4.gif
Font Style/Link: https://www.google.com/fonts/specimen/Annie+Use+Your+Telescope
Font Color: red letters with blue outline or viceversa
Any text fill/boarder?:red letters with blue outline or viceversa
Where do you want text located? (Follower Name):a little bit above or under the image, whichever you think lookos better (I'm a new streamer)
Example (If applicable): http://imgur.com/ug9XHvF
Anything else?: ------

Donation Alert

Image Link: http://imgur.com/8Nb5cKG
Font Style/Link: Open Sans
Font Color: something like the example
Any text fill/boarder?: No suggestion
Currency Type: $ U.S. Dollar
Where do you want text located?(Donator Name, Donation Amount, Message).:
Example (If applicable): http://imgur.com/RaBQijD
Anything else?: Thanks in advance man, you rock!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 10, 2015, 09:32:48 AM

Requested by: jack0mo

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'KA';
src: url('http://download1605.mediafire.com/8466vg6u10lg/3a42dq67q2b8db7/AnnieUseYourTelescope.ttf');
}

#follow-notification {
display: none;
position: absolute;
width: 535px !important;
height: 150px !important;
background-image: url('http://i.imgur.com/mEV5Kv4.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 120px !important;
margin-left: -20px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 56px !important;
font-weight: bold !important;
font-family: KA !important;
color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: blue;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: red;
}

.followname:after {
content: ' just followed!';
}

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

(http://puu.sh/ij0rH/c848bce9b8.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 400px !important;
height: 200px !important;
left: 130px;
background-color: transparent !important;
background-image:url('http://i.imgur.com/8Nb5cKG.gif') !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: 230px !important;
margin-left: -140px !important;
width: 600px !important;
text-transform: capitalize;
font-size: 24px !important;
font-weight: bold !important;
font-family: OpenSans !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 170px !important;
margin-left: -260px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: OpenSans !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 140px !important;
margin-left: -50px !important;
text-transform: capitalize;
font-size: 30px !important;
font-weight: bold !important;
font-family: Open Sans !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
}

.amount:after {
content: '!! Thanks!';
}

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

(http://puu.sh/ij0th/c1fbef8868.png)

Title: Re: Custom Notification WorkShop
Post by: BleepBits on June 11, 2015, 02:50:33 PM

Follower Alert:

Image Link: http://i.imgur.com/bZIQIad.gif
Font Style/Link: Tahoma
Font Color: #ff7300
Any text fill/boarder?: no
Where do you want text located? (Follower Name): Below the Image
Example (If applicable): http://i.imgur.com/5xJoB93.png
Anything else?: Fade in then out after 5 seconds


Donation Alert:

Image Link: http://zeldawiki.org/images/thumb/1/17/Green_Rupee_TWW.png/105px-Green_Rupee_TWW.png
Font Style/Link: Tahoma
Font Color: #ff7300
Any text fill/boarder?:no
Currency Type: $USD
Where do you want text located?(Donator Name, Donation Amount, Message) Below the Image Donator Name beside Amount with Message below both
Example (If applicable): http://i.imgur.com/ZIhLJ9t.png Make bottom txt a bit Larger
Anything else?: Fade in then out after 5 seconds

Take your time your doing god's work here <3 PM me when your done please and thank you

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 11, 2015, 03:55:40 PM

To do the fade after x seconds, you can do that in the config tab>Donation/Follower Notification Settings>Duration>5 secs

Requested by: BleepBits

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 850
Height: 950

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 500px !important;
height: 791px !important;
left: 100px;
background-image: url('http://i.imgur.com/bZIQIad.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 750px !important;
margin-left: -20px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 56px !important;
font-weight: bold !important;
font-family: Tahoma !important;
color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: #ff7300;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: red;
}

.followname:after {
content: ' is now following!';
-webkit-text-fill-color: white;
}

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

(http://puu.sh/ikzaR/7db52f4417.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 105px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://zeldawiki.org/images/thumb/1/17/Green_Rupee_TWW.png/105px-Green_Rupee_TWW.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: 40px !important;
margin-left: 140px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 24px !important;
font-weight: bold !important;
font-family: Tahoma !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #00FF00;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -135px !important;
margin-left: 470px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Tahoma !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #ff7300;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -30px !important;
margin-left: 120px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 30px !important;
font-weight: bold !important;
font-family: Tahoma !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #ff7300;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: white;
}

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

(http://puu.sh/ikzaa/1e945a7c7f.png)

Title: Re: Custom Notification WorkShop
Post by: LLARISSAL on June 11, 2015, 06:35:51 PM

Hi there @RepentGamingTV

I was wondering if you could make me a subscriber GIF and notification that I can use for my channel. I will most likely come back for a follower notification/donor notification later but Id like to test it out before getting you to do more work than you need to :)

Thank you!
Larissa




Subscriber Alert

Image Link: http://i.imgur.com/hztG3wS.gif
Font Style/Link: Adobe Gothic Std B
Font Color: White
Any text fill/boarder?: no
Where do you want text located? (Subscriber Name) At bottom of Gif (Can cover some of the image)
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 12, 2015, 04:07:46 AM

Requested by: Llarissal

Subscriber:

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

CSS Code:

Code: [Select]

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

#sub-notification {
width: 500px !important;
height: 281px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hztG3wS.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: 60px !important;
margin-left: 110px !important;
width: 150px !important;
font-size: 32px !important;
text-transform: uppercase;
font-weight: normal !important;
  font-family: Adobe !important;
color: #ffffff !important;
}

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

(http://puu.sh/ildXC/551b42bd27.jpg)

Title: Re: Custom Notification WorkShop
Post by: Babynikki on June 13, 2015, 01:28:24 AM

Follower Alert

Image Link: http://i.imgur.com/rztdF7k.gif
Font Style/Link: arial black
Font Color: black
Any text fill/boarder?: no
Where do you want text located? (Follower Name): top middle
Example (If applicable): Thanks for following (follower name)!
Anything else?:

Donation Alert

Image Link:http://i.imgur.com/52I3ccK.gif
Font Style/Link:arial black
Font Color: black
Any text fill/boarder?: no
Currency Type:usd
Where do you want text located?(Donator Name, Donation Amount, Message): top middle
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: LLARISSAL on June 13, 2015, 01:32:20 PM

Quote from: RepentGamingTV on June 12, 2015, 04:07:46 AM

Requested by: Llarissal

Subscriber:

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

CSS Code:

Code: [Select]

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

#sub-notification {
width: 500px !important;
height: 281px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hztG3wS.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: 60px !important;
margin-left: 110px !important;
width: 150px !important;
font-size: 32px !important;
text-transform: uppercase;
font-weight: normal !important;
  font-family: Adobe !important;
color: #ffffff !important;
}

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

(http://puu.sh/ildXC/551b42bd27.jpg)

YAY :D thank you!! I followed u on twitch btw, Ill make sure to drop by again.

thats awesome. Heres the other 2:



Follower Alert

Image Link: http://i.imgur.com/LZMFvYd.gif
Font Style/Link: Adobe Gothic Std B
Font Color: White
Any text fill/boarder?: no
Where do you want text located? (Follower Name): Centered at bottom of Gif (can cover some of the image)
Example (If applicable):
Anything else?:


Donation Alert

Image Link: http://i.imgur.com/hMtD35m.gif
Font Style/Link: Adobe Gothic Std B
Font Color: White
Any text fill/boarder?: no
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) Underneath Gif, Centered (not covering Picard   )
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 13, 2015, 02:15:13 PM

Requested by: BabyNikki

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 850
Height: 250

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 220px !important;
height: 200px !important;
background-image: url('http://i.imgur.com/rztdF7k.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 30px !important;
margin-left: 120px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: black;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: red;
}

.followname:before {
content: 'Thanks for following ';
}

.followname:after {
content: '!';
}

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

(http://puu.sh/imXXv/5a126c9723.jpg)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 220px !important;
height: 200px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/52I3ccK.gif') !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: 60px !important;
margin-left: 190px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 28px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -80px !important;
margin-left: 400px !important;
font-size: 34px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -30px !important;
margin-left: 120px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: black;
}

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

(http://puu.sh/imXX1/499a8d66e6.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 13, 2015, 02:29:14 PM

Requested by: LLarissal

Follower:

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

CSS Code:

Code: [Select]

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

#follow-notification {
display: none;
position: absolute;
width: 400px !important;
height: 293px !important;
background-image: url('http://i.imgur.com/LZMFvYd.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 220px !important;
margin-left: 80px !important;
margin-right: 100px !important;
width: 200px !important;
font-size: 36px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: white;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: red;
}

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

(http://puu.sh/imYtj/e1a5eb4a9b.jpg)


Donation:

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

CSS Code:

Code: [Select]

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

#donor-notification {
width: 500px !important;
height: 213px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hMtD35m.gif') !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: 300px !important;
margin-left: 0px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 28px !important;
font-weight: normal !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 215px !important;
margin-left: -180px !important;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 180px !important;
margin-left: -70px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: white;
}

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

(http://puu.sh/imYsM/7a743dd417.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheRamosOnline on June 16, 2015, 05:24:44 AM

Follower Alert
Image Link: http://puu.sh/iq9ZI/047c7613eb.png
Font Style/Link: http://pokemon-diamond.deviantart.com/art/Alpha-Steam-font-485031806 Alpha Steam
Font Color: #21409a
Any text fill/boarder?: White boarder
Where do you want text located? (Follower Name): Middle
Example (If applicable): http://puu.sh/iqa1o/1afeec3c6c.png

Donation Alert
Image Link: http://puu.sh/iqcN0/fa5bb4b1ff.png
Font Style/Link: User: http://pokemon-diamond.deviantart.com/art/Omega-Blaze-Font-484239706 Omega Blaze Ammount: http://www.fontsquirrel.com/fonts/bebas-NEUE Bebas Neue Message: http://pokemon-diamond.deviantart.com/art/Alpha-Steam-font-485031806 Alpha Steam
Font Color: User & Ammount: #8c0404 Message: #21409a
Any text fill/boarder?: White Boarder
Currency Type: £
Where do you want text located?(Donator Name, Donation Amount, Message): see example
Example (If applicable): http://puu.sh/iqcWi/7c1f5a1be6.png

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 16, 2015, 05:51:24 AM

Requested by: TheRamosOnline

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1000
Height: 550

CSS Code:

Code: [Select]

@font-face {
font-family: 'Alpha';
src: url('http://download1980.mediafire.com/xm5l8119advg/2s8kkgkydjtvwar/alpha_steam_by_pokemon_diamond-d80rwxq.ttf');
}

#follow-notification {
display: none;
position: absolute;
width: 1000px !important;
height: 500px !important;
background-image: url('http://puu.sh/iq9ZI/047c7613eb.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 250px !important;
font-size: 100px !important;
font-weight: bold !important;
font-family: Alpha !important;
color: #21409a !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}

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

(http://puu.sh/iqdT3/130463d681.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%C2%A3
Width: 1017
Height: 800

CSS Code:

Code: [Select]

@font-face {
font-family: 'Alpha';
src: url('http://download1980.mediafire.com/xm5l8119advg/2s8kkgkydjtvwar/alpha_steam_by_pokemon_diamond-d80rwxq.ttf');
}

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

@font-face {
font-family: 'Omega';
src: url('http://download1511.mediafire.com/d1n3o73p5eag/qjfknkkhsey16fd/omega_blaze_font_by_pokemon_diamond-d80axqy.ttf');
}

#donor-notification {
width: 1017px !important;
height: 763px !important;
background-color: transparent !important;
background-image:url('http://puu.sh/iqcN0/fa5bb4b1ff.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: 250px !important;
margin-left: 500px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 40px !important;
font-weight: normal !important;
font-family: Alpha !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #21409a;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 120px !important;
margin-left: 0px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: Bebas !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #8c0404;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 70px !important;
margin-left: 130px !important;
width: 100px !important;
text-transform: capitalize;
font-size: 50px !important;
font-weight: normal !important;
font-family: Omega !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #8c0404;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}

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

(http://puu.sh/iqeUX/7b8245a45d.jpg)

Title: Re: Custom Notification WorkShop
Post by: LLARISSAL on June 19, 2015, 02:35:38 AM

Quote from: RepentGamingTV on June 13, 2015, 02:29:14 PM

Requested by: LLarissal

Follower:

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

CSS Code:

Code: [Select]

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

#follow-notification {
display: none;
position: absolute;
width: 400px !important;
height: 293px !important;
background-image: url('http://i.imgur.com/LZMFvYd.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 220px !important;
margin-left: 80px !important;
margin-right: 100px !important;
width: 200px !important;
font-size: 36px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: white;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: red;
}

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

(http://puu.sh/imYtj/e1a5eb4a9b.jpg)


Donation:

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

CSS Code:

Code: [Select]

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

#donor-notification {
width: 500px !important;
height: 213px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hMtD35m.gif') !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: 300px !important;
margin-left: 0px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 28px !important;
font-weight: normal !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 215px !important;
margin-left: -180px !important;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 180px !important;
margin-left: -70px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: white;
}

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

(http://puu.sh/imYsM/7a743dd417.jpg)

OH MY GOD!!!! THANK YOU :D :D :D

Title: Re: Custom Notification WorkShop
Post by: Vinc3ntvega on June 25, 2015, 05:59:41 AM

Follower Alert

Image Link: http://imgur.com/gallery/BWwftaB/new
Font Style/Link: Serif Bold Italic
Font Color: white
Any text fill/boarder?: no
Where do you want text located? (Follower Name): all lines centered
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 25, 2015, 06:13:46 AM

Quote from: Vinc3ntvega on June 25, 2015, 05:59:41 AM

Follower Alert

Image Link: http://imgur.com/gallery/BWwftaB/new
Font Style/Link: Serif Bold Italic
Font Color: white
Any text fill/boarder?: no
Where do you want text located? (Follower Name): all lines centered
Example (If applicable):
Anything else?:

Can you give me the image with the letters/words?

Title: Re: Custom Notification WorkShop
Post by: CalToxReaper on June 26, 2015, 05:07:35 PM

Donation Alert

Image Link: http://i1074.photobucket.com/albums/w416/ComputeDrift/DonationAlert_zpsqkli5crs.png
Font Style/Link: Arial
Font Color: Match The Blue IF able
Any text fill/boarder?: 600x400
Currency Type:$
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable):

(Thanks For The Donation) <---- Point of Rrefence
[Black Space Between Boxs]
       Donation Amount
       Donatioer Name
       Donator Messge

Anything else?: I am Not sure if your confused messege me thanks

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 27, 2015, 01:22:19 AM

Requested by: CalToxReaper

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 400px !important;
background-color: transparent !important;
background-image:url('http://i1074.photobucket.com/albums/w416/ComputeDrift/DonationAlert_zpsqkli5crs.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: 190px !important;
margin-left: 60px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #0099ff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 80px !important;
margin-left: -200px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #0099ff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 120px !important;
margin-left: -20px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #0099ff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

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

(http://puu.sh/iDACJ/b5e4b12480.jpg)

Title: Re: Custom Notification WorkShop
Post by: CalToxReaper on June 27, 2015, 01:31:55 AM

Quote from: RepentGamingTV on June 27, 2015, 01:22:19 AM

Requested by: CalToxReaper

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 400px !important;
background-color: transparent !important;
background-image:url('http://i1074.photobucket.com/albums/w416/ComputeDrift/DonationAlert_zpsqkli5crs.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: 190px !important;
margin-left: 60px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #0099ff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 80px !important;
margin-left: -200px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #0099ff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 120px !important;
margin-left: -20px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: #0099ff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

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

(http://puu.sh/iDACJ/b5e4b12480.jpg)

Cool Bro Thanks It Looks Great!

Title: Re: Custom Notification WorkShop
Post by: Haxxident on June 29, 2015, 12:02:56 AM

Follower Alert

Image Link: http://i.imgur.com/U3k1snl.png
Font Style/Link: http://cooltext.com/Logo-Design-Skate
Font Color: Start and end colors #FFFFFF
Any text fill/boarder?:
Where do you want text located? (Follower Name): Above "is Following"
Example (If applicable):
Anything else?:

Thank you very much, this is very kind of you to do.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 29, 2015, 03:05:49 AM

Requested by: Haxxident

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Capture";
src: url("http://download1691.mediafire.com/p6foqtaiyfwg/r0c522bplvjdl48/Capture_it.ttf");
}

#follow-notification {
display: none;
position: absolute;
width: 350px !important;
height: 129px !important;
background-image: url("http://i.imgur.com/U3k1snl.png") !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 180px !important;
width: 100px !important;
font-size: 16px !important;
font-weight: bold !important;
font-family: Capture !important;
color: blue !important;
-webkit-text-fill-color: #FFFFFF;
}

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

(http://puu.sh/iG1MV/8447b95dd1.jpg)

Title: Re: Custom Notification WorkShop
Post by: Haxxident on June 29, 2015, 05:17:42 AM

Thank you, I just tried to apply to Xsplit and the notification that keeps showing is the xbox style achievement notification, am I doing something wrong? cheers.

Quote from: RepentGamingTV on June 29, 2015, 03:05:49 AM

Requested by: Haxxident

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Capture';
src: url('http://download1691.mediafire.com/p6foqtaiyfwg/r0c522bplvjdl48/Capture_it.ttf');
}

#follow-notification {
display: none;
position: absolute;
width: 350px !important;
height: 129px !important;
background-image: url('http://i.imgur.com/U3k1snl.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 180px !important;
width: 100px !important;
font-size: 16px !important;
font-weight: bold !important;
font-family: Capture !important;
color: blue !important;
-webkit-text-fill-color: #FFFFFF;
}

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

(http://puu.sh/iG1MV/8447b95dd1.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 29, 2015, 05:25:25 AM

Ahh, ya the problem is with xsplit and obs, one likes " and the other likes '. I will fix my post with the CSS for you.

Edit: Should work now. Let me know if you have any more problems.

Title: Re: Custom Notification WorkShop
Post by: Haxxident on June 29, 2015, 03:18:09 PM

Awesome stuff man, works perfectly now. really appreciate it.

Quote from: RepentGamingTV on June 29, 2015, 05:25:25 AM

Ahh, ya the problem is with xsplit and obs, one likes " and the other likes '. I will fix my post with the CSS for you.

Edit: Should work now. Let me know if you have any more problems.

Title: Re: Custom Notification WorkShop
Post by: headcrashrainbow on June 30, 2015, 05:13:50 AM

Hello! ;D
I really do hope, I'm in the right thread, even though it's not the typical 'notification request'..
Sometimes, I have crazy ideas and my dear friend phoenix722 from Twitch was so kind to help out a bit.
Long story short, I wanted a customized donationtracker bar, this is, what we have worked out so far
(see embeded code). Now our only problem is, we can't figure out, how to change the currency from $ to €.
So I ask the wonderful team around Deepbot, if that would be possible with the following code?

Code: [Select]

body {
                background-color: transparent;
                color: white;
              }

              #content {
                /* width:100%; */
                padding: 0px 0px;
              }

              #thermometer {
                position: relative;
                margin: 0px 0px 0px 0px;
                height:0px;
                background: #ddd;
                border:0px solid;
                -webkit-border-radius: 0px;
                -webkit-box-shadow: 0px;
              }

              #thermometer .track {
                height:50px;
                top: 0px;
                border: 1px solid #aaa;
                margin: 20px 20px;
                background: rgb(255,255,255);
              }

              #thermometer .progress {
                height: 50px;
                width:10%;
                background: linear-gradient(90deg, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
                background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #a85e6c), color-stop(12.5%, #a85e6c), color-stop(12.5%, #e37f52), color-stop(25%, #e37f52), color-stop(25%, #ef9f48), color-stop(37.5%, #ef9f48), color-stop(37.5%, #9cb641), color-stop(50%, #9cb641), color-stop(50%, #009484), color-stop(62.5%, #009484), color-stop(62.5%, #21acb8), color-stop(75%, #21acb8), color-stop(75%, #1972dd), color-stop(87.5%, #1972dd), color-stop(87.5%, #8fa0ae), color-stop(100%, #8fa0ae));
                background-image: -webkit-linear-gradient(left, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
                background-image: -moz-linear-gradient(left, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
                background-image: -o-linear-gradient(left, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
                background-image: linear-gradient(left, #a85e6c 0%,#a85e6c 12.5%,#e37f52 12.5%,#e37f52 25%,#ef9f48 25%,#ef9f48 37.5%,#9cb641 37.5%,#9cb641 50%,#009484 50%,#009484 62.5%,#21acb8 62.5%,#21acb8 75%,#1972dd 75%,#1972dd 87.5%,#8fa0ae 87.5%,#8fa0ae 100%);
              }

              #thermometer .goal {
                position:absolute;
                width: 100%;
              }

              #thermometer .start-amount {
                position: absolute;
                float: right;
                display: inline-block;
                border-top:0px solid black;
                font-family: Trebuchet MS;
                font-weight: bold;
                top: 50px;
                right: 0px;
                width: 100%;
                color:#ffffff;
              }
              #thermometer .end-amount {
                position: absolute;
                float: right;
                display: inline-block;
                padding-right: 40px;
                border-top:0px solid black;
                font-family: Trebuchet MS;
                font-weight: bold;
                top: 50px;
                right: 0px;
                color:#ffffff;
              }
              #thermometer .progress .amount {
                display: block;
                position: absolute;
                text-align: center;
                border-top: 0px solid #060;
                font-family: Trebuchet MS;
                font-size: 32px;
                font-weight: bold;
                color: white;
                -webkit-text-fill-color: white;
                -webkit-text-stroke-width: 1px;
                -webkit-text-stroke-color: black;
                top: 8px;
                width: 100%;
              }
Much love and thanks in advance for any kind of help
headcrashrainbow  :-* :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 30, 2015, 07:40:41 AM

All you have to do is add the &ccy=%C2%A3 to the end of the URL:

Depending on the url you are using.

http://deepbot.tv/widgets/donationtracker.htm?mode=2&ccy=%C2%A3

or

http://deepbot.tv/widgets/donationtracker.htm?ccy=%C2%A3

Title: Re: Custom Notification WorkShop
Post by: headcrashrainbow on June 30, 2015, 09:02:08 AM

Those are pounds not euro though. :D
What would be the proper ending for that after the mode=2 URL?

Thanks for the fast response! <3

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 30, 2015, 09:04:29 AM

It is this one then: ccy=%E2%82%AC

Title: Re: Custom Notification WorkShop
Post by: headcrashrainbow on June 30, 2015, 10:05:36 AM

Sweet, that did it. Thank you oh so much  :-* <3

Title: Re: Custom Notification WorkShop
Post by: Omniphobia on June 30, 2015, 05:30:32 PM

I'm sending you a PM! Thanks a ton for doing this for us. We appreciate it. :D
#hyped

Title: Re: Custom Notification WorkShop
Post by: Haxxident on July 03, 2015, 06:54:59 AM

Follower Alert

Image Link: http://i.imgur.com/630jVku.png
Font Style/Link: http://cooltext.com/Logo-Design-Skate
Font Color: Start and end colors #FFFFFF
Any text fill/boarder?:
Where do you want text located? (Follower Name): Above "is Following"
Example (If applicable):
Anything else?: If possible username to fill in entire space above "is following" and this is for Xsplit.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 03, 2015, 07:17:40 AM

Requested by: Haxxident

Follower:

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

CSS Code:

Code: [Select]

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

#follow-notification {
display: none;
position: absolute;
width: 350px !important;
height: 129px !important;
background-image: url("http://i.imgur.com/630jVku.png") !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 175px !important;
width: 100px !important;
font-size: 18px !important;
font-weight: bold !important;
font-family: Capture !important;
color: blue !important;
-webkit-text-fill-color: #FFFFFF;
}

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

(http://puu.sh/iLejG/fe8839d18d.jpg)

Title: Re: Custom Notification WorkShop
Post by: NeebsGaming on July 04, 2015, 04:25:32 AM

Follower Alert

Image Link: http://imgur.com/ux2Tjza
Font Style/Link: Huxtable or Impact if "Hux" is unavailable.
Font Color: White
Any text fill/boarder?:No
Where do you want text located? (Follower Name): Centered below the text!
Example (If applicable):
Anything else?: Nope Thank You!


Donation Alert

Image Link: http://imgur.com/EXlWuhu
Font Style/Link: Huxtable or Impact if "Hux" is unavailable.
Font Color: White
Any text fill/boarder?: No
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) Centered below the text!
Example (If applicable):
Anything else?:  Nope Thank You!


Subscriber Alert

Image Link: http://imgur.com/8tOJ4Vk
Font Style/Link: Huxtable or Impact if "Hux" is unavailable.
Font Color: White
Any text fill/boarder?: No
Where do you want text located? (Subscriber Name) Centered below the text!
Example (If applicable):
Anything else?:  Nope Thank You!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 04, 2015, 09:01:54 AM

Requested by: NeebsGaming

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 800
Height: 250

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 779px !important;
height: 209px !important;
background-image: url('http://i.imgur.com/ux2Tjza.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 55px !important;
margin-left: 275px !important;
width: 100px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/iMsE3/330fbd0a98.jpg)

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 779px !important;
height: 209px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/EXlWuhu.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 55px !important;
margin-left: -25px !important;
width: 100px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 55px !important;
width: 300px !important;
margin-left: -100px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/iMtuZ/65d818afd1.jpg)


Subscriber:

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

CSS Code:

Code: [Select]

#sub-notification {
width: 779px !important;
height: 209px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/8tOJ4Vk.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: -80px !important;
margin-left: 280px !important;
font-size: 40px !important;
text-transform: capitalize;
font-weight: normal !important;
font-family: Impact !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;
}

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

(http://puu.sh/iMsJP/46455fcbaf.jpg)

Title: Re: Custom Notification WorkShop
Post by: headhunter3222 on July 04, 2015, 06:52:43 PM

Hey can u help me with 2 popups for me.

Follower Alert

Image Link: http://i.imgur.com/TSRekMy.png
Font Style/Link: I let the artis in u decide
Font Color: White
Any text fill/boarder?: nope
Where do you want text located? (Follower Name): in the middle of the black box
Example (If applicable): nope
Anything else?: nope

Donation Alert

Image Link: http://i.imgur.com/gGeNA4m.png
Font Style/Link: I let the artis in u decide
Font Color: White
Any text fill/boarder?: Nope
Currency Type: Euro
Where do you want text located?(Donator Name, Donation Amount, Message) in the middle of the black box only name and amount
Example (If applicable): nope
Anything else?: nope

thnx for in advance

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 05, 2015, 12:50:12 AM

Requested by: headhunter3222

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 580px !important;
height: 155px !important;
background-image: url("http://i.imgur.com/TSRekMy.png") !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 35px !important;
margin-left: 210px !important;
width: 100px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/iN6wC/3325d9a552.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%E2%82%AC
Width: 600
Height: 200

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 155px !important;
background-color: transparent !important;
background-image:url("http://i.imgur.com/gGeNA4m.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 35px !important;
margin-left: -65px !important;
width: 100px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 35px !important;
width: 300px !important;
margin-left: -70px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/iN6Fh/260f4d4ac3.jpg)

Title: Re: Custom Notification WorkShop
Post by: binksternl on July 05, 2015, 11:33:02 AM

hello could you check mine out if you have the time
i have a follower and donation notification made so it falls over my actual overlay hopefully it works,
on the donation notification i just want the amount of the donation under the donation hype thing, hopefully it could be in the same color.
link to the donation notification is:

http://imgur.com/S1pAQtR

Follower notification i want the name off the follower under the text as well, hopefully it can be in the same text wich is georgia and be about the same color
link to the follow notification is:

http://imgur.com/PFck3Vq

thank you for your time!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 05, 2015, 01:47:40 PM

Requested by:

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 1920px !important;
height: 1080px !important;
background-image: url('http://i.imgur.com/PFck3Vq.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 1000px !important;
margin-left: 830px !important;
width: 100px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: georgia !important;
color: blue !important;
-webkit-text-fill-color: #8f887f;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}

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

(http://puu.sh/iNDpE/9635d31580.jpg)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 1920px !important;
height: 1080px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/S1pAQtR.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 35px !important;
margin-left: -45px !important;
width: 100px !important;
font-size: 36px !important;
font-weight: bold !important;
font-family: georgia !important;
color: blue !important;
-webkit-text-fill-color: #8f887f;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 35px !important;
width: 300px !important;
margin-left: -110px !important;
font-size: 36px !important;
font-weight: bold !important;
font-family: georgia !important;
color: blue !important;
-webkit-text-fill-color: #8f887f;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}

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

(http://puu.sh/iNDmZ/e6e52d588c.jpg)

Title: Re: Custom Notification WorkShop
Post by: headhunter3222 on July 06, 2015, 08:16:57 PM

man realy thnx for the help

Title: Re: Custom Notification WorkShop
Post by: headhunter3222 on July 07, 2015, 12:24:41 AM

Repent can i ask u 1 more time for your help.

Obs is lagging mutch for me for some reason can u also make this code for xplit css

thnx if u can still thnx if not.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 07, 2015, 12:26:22 AM

Quote from: headhunter3222 on July 07, 2015, 12:24:41 AM

Repent can i ask u 1 more time for your help.

Obs is lagging mutch for me for some reason can u also make this code for xplit css

thnx if u can still thnx if not.

Converted the post above to xsplit css.

Title: Re: Custom Notification WorkShop
Post by: headhunter3222 on July 07, 2015, 12:40:03 AM

thnx man u are a hero

Title: Re: Custom Notification WorkShop
Post by: binksternl on July 07, 2015, 07:25:56 AM

thnx for making this but it only shows me a weird scrolling bar on the follow notification and nothing on the screen with donation notifications, your doing great work though for everybody else dude thanks for doing this for all of us!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 07, 2015, 07:27:49 AM

Quote from: binksternl on July 07, 2015, 07:25:56 AM

thnx for making this but it only shows me a weird scrolling bar on the follow notification and nothing on the screen with donation notifications, your doing great work though for everybody else dude thanks for doing this for all of us!

Increase the dimensions by 100 on the general tab of the CLR Browser

Title: Re: Custom Notification WorkShop
Post by: binksternl on July 07, 2015, 07:34:19 AM

dude i'm sorry it was on my end! awesome job!!!
i forgot to put the dimensions to 1920/1080  :o
thanks a lot!

Title: Re: Custom Notification WorkShop
Post by: Seppuko 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/iUxT6/f7844f95c7.jpg)

Title: Re: Custom Notification WorkShop
Post by: RandomRambo 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?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/iX77G/b2be7e90a7.jpg)


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

(http://puu.sh/iX6K1/b295e0b716.jpg)

Title: Re: Custom Notification WorkShop
Post by: MaskedVillianGaming 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!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/iYfED/3b68284646.jpg)

Title: Re: Custom Notification WorkShop
Post by: wrggrimreaper 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?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/iZ1hY/023a007a04.jpg)

Title: Re: Custom Notification WorkShop
Post by: Haxxident 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.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/iZWf6/dc52a3b738.jpg)

Title: Re: Custom Notification WorkShop
Post by: 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?

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

(http://puu.sh/iZWf6/dc52a3b738.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.

Title: Re: Custom Notification WorkShop
Post by: Haxxident 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.

Title: Re: Custom Notification WorkShop
Post by: Haxxident on July 16, 2015, 04:23:19 AM

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

(http://i.imgur.com/QMJHBd6.jpg)

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.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 16, 2015, 06:24:42 AM

This is how I have mine setup:

(http://puu.sh/j0C5O/90878b7a2d.png)

Title: Re: Custom Notification WorkShop
Post by: Thescribe83 on July 21, 2015, 05:03:46 AM

Follower Alert

Image Link: http://imgur.com/jlTEMk4
Font Style/Link: Eras Bold ITC or Arial ; Text size a little smaller than the "Take Your Place Among Friends" but not too small (make it look good  ;) )
Font Color: Bright Gold or White
Any text fill/boarder?: No
Marquee/Scroll Effect?: No
Where do you want text located? (Follower Name) Below the Image
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 21, 2015, 06:10:59 AM

Requested by: Thescribe83

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 500px !important;
height: 250px !important;
background-image: url('http://i.imgur.com/jlTEMk4.gif') !important;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 190px !important;
margin-left: 50px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Arial !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:after {
content: ' Take Your Place Among Friends'
}

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

(http://puu.sh/j6z7N/b805ec79e1.jpg)

Title: Re: Custom Notification WorkShop
Post by: RowdyB on July 21, 2015, 11:18:35 AM

Follower Alert

Image Link: http://i.imgur.com/g4aTS7K.png
Font Style/Link: Impact Bold
Font Color: White
Any text fill/boarder?: no
Where do you want text located? (Follower Name): Center of image
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: RowdyB on July 21, 2015, 11:23:22 AM

Donation Alert

Image Link: http://i.imgur.com/eBflzEJ.png
Font Style/Link: Impact Bold
Font Color: White
Any text fill/boarder?: no
Currency Type: US Dollars
Where do you want text located?(Donator Name, Donation Amount, Message)  Center of image (Name and Amount) with message on second line if possible else no message
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 21, 2015, 11:48:22 AM

Requested by: RowdyB

Follower:

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

CSS Code:

Code: [Select]

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

#follow-notification .followname {
position: absolute !important;
margin-top: 25px !important;
margin-left: 80px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: Bold !important;
font-family: Impact !important;
color: blue !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.)

(http://puu.sh/j6TbX/2b981ad0e1.jpg)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 557px !important;
height: 147px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/eBflzEJ.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: 90px !important;
margin-left: 100px !important;
width: 400px !important;
font-size: 16px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 1px 1px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 35px !important;
margin-left: -50px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Impact !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 35px !important;
margin-left: -60px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Impact !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: 1px;
}

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

(http://puu.sh/j6TfJ/5b953f432c.jpg)

Title: Re: Custom Notification WorkShop
Post by: loukassm on July 23, 2015, 12:14:07 AM

Follower Alert

Image Link: http://imgur.com/sOtuTgq
Font Style/Link: Batman Forever: http://www.dafont.com/batman-forever.font
Font Color: White
Any text fill/boarder?: yes, black borders
Where do you want text located? Text located to the right of image: (Follower name) is the follower this stream needs.
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 23, 2015, 03:46:38 AM

Requested by: loukassm

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Bat';
src: url('http://download2126.mediafire.com/33fw0mc4hkeg/jjbnu3wbap8lgct/batmfa__.ttf');
}

#follow-notification {
display: none;
position: absolute;
width: 500px !important;
height: 343px !important;
background-image: url('http://i.imgur.com/sOtuTgq.gif') !important;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 100px !important;
margin-left: 520px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: Bold !important;
font-family: Bat !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:after {
content: ' is the follower this stream needs.';
}

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

(http://puu.sh/j8VI2/a25e6044aa.jpg)

Title: Re: Custom Notification WorkShop
Post by: rockst92 on July 23, 2015, 06:00:18 AM

Follower Alert

Image Link: http://imgur.com/qWZzHYS,MoWIsmv
Font Style/Link: American Captain
Font Color: #ef05d8
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Centered in the blue
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: rockst92 on July 23, 2015, 06:01:56 AM

Donation Alert

Image Link: http://imgur.com/qWZzHYS,MoWIsmv#1
Font Style/Link: American Captain
Font Color: Black
Any text fill/boarder?:
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) Name At Very top, amount next to the name, message at the bottom.
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: Austiner on July 23, 2015, 06:20:37 AM

Follow Notification

Image Link: http://imgur.com/1pZOVjT
Font Style: Arial Bold
Font Color: White
Any text fill/boarder?: no
Where do you want text located?: A little to the right as shown in the example below.
Example: http://gyazo.com/fdd307583cc39bde368e6e1b33c54128
but I prefer the user's name to be lined up with the "new follower"
Anything else?: no thanks


Donation Notification

Image Link: http://imgur.com/K5CMvXy
Font Style: Arial Bold
Font Color: White
Any text fill/border?: no
Currency Type: USD
Where do you want text located: See Example below, I'd like it to start near the top as shown in example to leave room for longer messages to fit, I would like if it started a little more to the left and went closer to the "A's" on each side for even more room as long as it never overlaps the "A's"
Example: http://gyazo.com/1a279da81acdedca4a6fd0b093d41d26
Anything else?: No thanks

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 23, 2015, 10:07:49 AM

Requested by: rockst92

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1366
Height: 768

CSS Code:

Code: [Select]

@font-face {
font-family: 'AC';
src: url('http://download1675.mediafire.com/a32mqznx3btg/9s7sp5i2kroine4/American+Captain.ttf');
}

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

#follow-notification .followname {
position: absolute !important;
margin-top: 390px !important;
margin-left: 480px !important;
width: 400px !important;
font-size: 50px !important;
font-weight: Bold !important;
font-family: AC !important;
color: blue !important;
-webkit-text-fill-color: ef05d8;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

(http://puu.sh/j9l5i/184298d104.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1366
Height: 768

CSS Code:

Code: [Select]

@font-face {
font-family: 'AC';
src: url('http://download1675.mediafire.com/a32mqznx3btg/9s7sp5i2kroine4/American+Captain.ttf');
}

#donor-notification {
width: 1366px !important;
height: 768px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/MoWIsmv.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: 380px !important;
margin-left: 400px !important;
width: 550px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: AC !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 300px !important;
margin-left: -50px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: AC !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 300px !important;
margin-left: -120px !important;
width: 300px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: AC !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-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.)

(http://puu.sh/j9log/1b676d493d.jpg)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 23, 2015, 10:24:19 AM

Requested by: Austiner

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 580px !important;
height: 110px !important;
background-image: url('http://i.imgur.com/1pZOVjT.png') !important;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 10px !important;
margin-left: 150px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: blue !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.)

(http://puu.sh/j9lCM/597c8a4e49.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 110

CSS Code:

Code: [Select]

#donor-notification {
width: 1920px !important;
height: 110px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/K5CMvXy.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: 40px !important;
margin-left: 850px !important;
text-align: left;
font-size: 28px !important;
font-weight: bold !important;
font-family: Arial !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 10px !important;
margin-left: -360px !important;
font-size: 28px !important;
font-weight: bold !important;
font-family: Arial !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 10px !important;
margin-left: -550px !important;
width: 500px !important;
font-size: 28px !important;
font-weight: bold !important;
font-family: Arial !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: 1px;
}

.donor:before {
content: 'Thank you ';
}

.donor:after {
content: ' for ';
}

.amount:after {
content: ' : ';
}

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

(http://puu.sh/j9mj9/ebd964ceef.jpg)

Title: Re: Custom Notification WorkShop
Post by: Thenoxiousmike on July 24, 2015, 05:11:38 PM

http://imgur.com/D76h3W8
Black arial Font with a yellow outline if possible
for placement its in the Cloud thingy ^^

Much love RepentGamingTV Thankls for helping out! :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 25, 2015, 04:09:37 AM

Requested by: Thenoxiousmike

Follower:

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

CSS Code:

Code: [Select]

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

#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 90px !important;
width: 400px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Arial !important;
color: blue !important;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: yellow;
-webkit-text-stroke-width: 0.4px;
}

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

(http://puu.sh/jbtWT/8863423f9f.jpg)

Title: Re: Custom Notification WorkShop
Post by: Shad0w1988 on July 26, 2015, 04:22:43 AM

Follower Alert

Image Link: http://i.imgur.com/ehsTsge.png
Font Style/Link: http://www.dafont.com/de/angilla-tattoo.font
Font Color: blue and black outline if possible
Any text fill/boarder?:
Where do you want text located? (Follower Name): center of the blue box
Example (If applicable):
Anything else?:



Donation Alert

Image Link: http://i.imgur.com/pdoWzeI.png
Font Style/Link: http://www.dafont.com/de/angilla-tattoo.font
Font Color: blue and black outline if possible
Any text fill/boarder?:
Currency Type: € Euro
Where do you want text located?(Donator Name, Donation Amount, Message) center of the blue box and below the amount no message
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 26, 2015, 09:20:32 AM

One problem with the donation one, I can't use numbers/currency symbols with it. It gives me some symbols and what not. So changed it to impact.

Requested by: Shad0w1988

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1639
Height: 720

CSS Code:

Code: [Select]

@font-face {
font-family: 'Ang';
src: url('http://download1655.mediafire.com/4f6zh7l36c5g/y29h87nacj1wxse/AngillaTattoo_PERSONAL_USE_ONLY.ttf');
}

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

#follow-notification .followname {
position: absolute !important;
margin-top: 300px !important;
margin-left: 300px !important;
width: 400px !important;
font-size: 180px !important;
font-weight: normal !important;
font-family: Ang !important;
color: blue !important;
-webkit-text-fill-color: blue;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}

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

(http://puu.sh/jcWiL/fee52fe703.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%E2%82%AC
Width: 1639
Height: 720

CSS Code:

Code: [Select]

@font-face {
font-family: 'Ang';
src: url('http://download1655.mediafire.com/4f6zh7l36c5g/y29h87nacj1wxse/AngillaTattoo_PERSONAL_USE_ONLY.ttf');
}

#donor-notification {
width: 1639px !important;
height: 698px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/pdoWzeI.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 330px !important;
margin-left: -80px !important;
font-size: 140px !important;
font-weight: normal !important;
font-family: Impact !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 300px !important;
margin-left: -550px !important;
width: 500px !important;
font-size: 150px !important;
font-weight: normal !important;
font-family: Ang !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: 1px;
}

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

(http://puu.sh/jcWDD/ac664a3696.jpg)

Title: Re: Custom Notification WorkShop
Post by: PolonskiTV on July 31, 2015, 11:34:01 PM

Follower Alert

Image Link: http://imgur.com/RAkxr6v
Font Style/Link: Britannic Bold ( http://www.fontpalace.com/font-details/Britannic+Bold/ )
Font Color: White
Any text fill/boarder?: Just their names when they follow
Where do you want text located? (Follower Name): Centered, underneath the "Thanks for following" text.
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/x14KeM2
Font Style/Link: Britannic Bold ( http://www.fontpalace.com/font-details/Britannic+Bold/ )
Font Color: White
Any text fill/boarder?: No
Currency Type: Great British Pounds (£)
Where do you want text located?(Donator Name, Donation Amount, Message): Centered, underneath the text at the top. Only include their name and amount, no message.
Example (If applicable):
Anything else?:

Thanks a lot!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 01, 2015, 07:23:40 AM

Requested by: PolonskiTV

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 590
Height: 140

CSS Code:

Code: [Select]

@font-face {
font-family: 'BB';
src: url('http://download1502.mediafire.com/mfx5w2df7vng/e3ua9b383xx3z8k/Britannic+Bold.ttf');
}

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

#follow-notification .followname {
position: absolute !important;
margin-top: 30px !important;
margin-left: 100px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BB !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
text-transform: capitalize;
}

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

(http://puu.sh/jkHRu/5d0127264d.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%C2%A3
Width: 590
Height: 140

CSS Code:

Code: [Select]

@font-face {
font-family: 'BB';
src: url('http://download1502.mediafire.com/mfx5w2df7vng/e3ua9b383xx3z8k/Britannic+Bold.ttf');
}

#donor-notification {
width: 590px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/x14KeM2.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 20px !important;
margin-left: -170px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BB !important;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
text-shadow: 2px 2px black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 20px !important;
margin-left: -100px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BB !important;
color: blue !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
text-transform: capitalize;
text-shadow: 2px 2px black;
}

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

(http://puu.sh/jkHZG/c01d795d39.png)

Title: Re: Custom Notification WorkShop
Post by: NSHARPY on August 03, 2015, 01:56:22 AM

Follower Alert

Image Link: http://imgur.com/uAYk1eE
Font Style/Link: http://www.fontpalace.com/font-details/Britannic+Bold/
Font Color: Green
Any text fill/boarder?:
Where do you want text located? (Follower Name): In Designated Space
Example (If applicable):
Anything else?:


Donation Alert

Image Link: http://imgur.com/ief6fAL
Font Style/Link: http://www.fontpalace.com/font-details/Britannic+Bold/
Font Color: Green
Any text fill/boarder?:
Currency Type: Dollars
Where do you want text located?(Donator Name, Donation Amount, Message) In Designated Space
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 03, 2015, 05:40:38 AM

Requested by: NSHARPY

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'BB';
src: url('http://download902.mediafire.com/a3kyhe97318g/e3ua9b383xx3z8k/Britannic+Bold.ttf');
}

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

#follow-notification .followname {
position: absolute !important;
margin-top: 35px !important;
margin-left: 90px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BB !important;
text-transform: capitalize;
color: blue !important;
-webkit-text-fill-color: limegreen;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

(http://puu.sh/jmY3g/8abafb3760.jpg)


Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'BB';
src: url('http://download902.mediafire.com/a3kyhe97318g/e3ua9b383xx3z8k/Britannic+Bold.ttf');
}

#donor-notification {
width: 580px !important;
height: 155px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/ief6fAL.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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 30px !important;
margin-left: -70px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BB !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: limegreen;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 30px !important;
margin-left: -180px !important;
width: 500px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: BB !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-webkit-text-fill-color: limegreen;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

(http://puu.sh/jmY32/6905e4b955.jpg)

Title: Re: Custom Notification WorkShop
Post by: Antitonic on August 04, 2015, 02:04:31 PM

• Image Link: http://i.imgur.com/E2ZMvLI.gif
• Font Style/Link: Beleren (Page Link (http://www.slightlymagic.net/forum/viewtopic.php?t=14730&p=155163), Direct Download (http://www.slightlymagic.net/forum/download/file.php?id=17990))
• Font Color: White
• Any text fill/border?: Black border on the text for contrast.
• Where do you want text located? (Follower Name): Directly in line
• Anything else?: Extra text: "Social Link Rank Up! ||(Follower Name) Arcana!" Preferably on two lines indicated by the || (Don't include the || in the text :P )

Also, if it's possible and looks alright, could I get this image (http://i.imgur.com/8cZQf8I.png?1) as the background, and the above linked to the left? The text would be the same except in the light-blue area.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 05, 2015, 04:11:58 AM

Requested by: Antitonic

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'BB';
src: url('http://download1523.mediafire.com/yw9m6awp18tg/4vlbfg74l23xyzv/beleren-bold-webfont.ttf');
}

#follow-notification {
display: none;
position: absolute;
width: 580px !important;
height: 155px !important;
background-image: url('http://i.imgur.com/8cZQf8I.png?1'), url('http://i.imgur.com/E2ZMvLI.gif') !important;
background-position: center bottom, left center;
background-repeat: no-repeat;
}

#follow-notification .followname {
position: absolute !important;
margin-top: 20px !important;
margin-left: 90px !important;
width: 400px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: BB !important;
text-transform: capitalize;
color: blue !important;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: 'Social Link Rank Up! '
}

.followname:after {
content: ' Arcana!'
}

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

(http://puu.sh/jpnkL/8d7d929d1d.jpg)

Title: Re: Custom Notification WorkShop
Post by: Antitonic on August 05, 2015, 07:09:34 PM

Thanks a lot! Unfortunately, the line break doesn't seem to work. This is what I'm getting: http://i.imgur.com/tdDlZ0d.png (http://i.imgur.com/tdDlZ0d.png)

(http://i.imgur.com/tdDlZ0d.png)

Am I just doing something wrong?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 05, 2015, 07:14:16 PM

Try adjusting the width. Under .followname to like 300.

Title: Re: Custom Notification WorkShop
Post by: Antitonic on August 05, 2015, 11:16:40 PM

Yep, that did it! Thanks again!

Title: Re: Custom Notification WorkShop
Post by: LLARISSAL on August 10, 2015, 11:23:05 PM

Hey @repentgamingtv

the Sub and Follow notifications work perfectly. I am just wondering if you could see whatsup with the donor notification? the CSS you previously gave me is below, but it is doing some interesting things on screen. the message text and donor name are overlapping, the date is on top of the photo.. Its very possible its something Im doing wrong in obs  -_-

if you have a moment. Thank you :D

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

#donor-notification {
width: 500px !important;
height: 213px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hMtD35m.gif') !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: 300px !important;
margin-left: 0px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 28px !important;
font-weight: normal !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 215px !important;
margin-left: -180px !important;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 180px !important;
margin-left: -70px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: white;
}

Title: Re: Custom Notification WorkShop
Post by: GGSoundjack on August 11, 2015, 03:21:37 AM

Hey, i couldn´t upload it on Imgur, i hope u can use this, http://fs1.directupload.net/images/150810/fqqlu9yc.png
it looks nearly the same like the original

Hope u can help me. Cheers

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 11, 2015, 07:29:13 AM

Quote from: LLARISSAL on August 10, 2015, 11:23:05 PM

Hey @repentgamingtv

the Sub and Follow notifications work perfectly. I am just wondering if you could see whatsup with the donor notification? the CSS you previously gave me is below, but it is doing some interesting things on screen. the message text and donor name are overlapping, the date is on top of the photo.. Its very possible its something Im doing wrong in obs  -_-

if you have a moment. Thank you :D

Code: [Select]

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

#donor-notification {
width: 500px !important;
height: 213px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hMtD35m.gif') !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: 300px !important;
margin-left: 0px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 28px !important;
font-weight: normal !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 215px !important;
margin-left: -180px !important;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 180px !important;
margin-left: -70px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: white;
}


Can you give me the link you are using for your donation notification in the CLR Browser General tab?

Looks fine to me:

(http://puu.sh/jwS9L/54ec149fbf.jpg)

Try this CSS:

Code: [Select]

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

#donor-notification {
width: 500px !important;
height: 213px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hMtD35m.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 300px !important;
margin-left: 0px !important;
width: 500px !important;
text-transform: capitalize;
font-size: 28px !important;
font-weight: normal !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 215px !important;
margin-left: -180px !important;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #ffffff !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 180px !important;
margin-left: -70px !important;
width: 400px !important;
text-transform: capitalize;
font-size: 34px !important;
font-weight: bold !important;
font-family: Adobe !important;
color: #00FF00 !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: black;
}

.donor:after {
content: ' donated ';
-webkit-text-fill-color: white;
}


Title: Re: Custom Notification WorkShop
Post by: Syanarah on August 13, 2015, 12:15:18 AM

Image Link: http://imgur.com/sEXHjml
Font Style/Link: http://www.dafont.com/bignoodle-titling.font
Font Color: Black
Any text fill/boarder?:
Where do you want text located? (Follower Name): Centered on the gold part
Example (If applicable):
Anything else?:

Thank you very much :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 13, 2015, 07:01:55 AM

I recommend hosting the font yourself, since mediafire likes to reset links everyday.

Requested by: Syanarah

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 510
Height: 100

CSS Code:

Code: [Select]

@font-face {
font-family: 'big_noodle_titling';
src: url('http://download805.mediafire.com/n5idccedt3ig/ecl588n81wkjcaq/big_noodle_titling.ttf');
}

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

#follow-notification .followname {
position: absolute !important;
margin-top: -10px !important;
margin-left: 200px !important;
width: 200px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: big_noodle_titling !important;
text-transform: capitalize;
color: blue !important;
-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.)

(http://puu.sh/jznC9/6c1ef7dbd5.jpg)

Title: Re: Custom Notification WorkShop
Post by: l0wcrow 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!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/jFtUQ/6ad80f2d62.png)

Title: Re: Custom Notification WorkShop
Post by: hc_phoenix 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.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/jKx4P/cf8e49f566.png)


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

(http://puu.sh/jKxw1/c03c1cb7fb.png)

Title: Re: Custom Notification WorkShop
Post by: 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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 ".

Title: Re: Custom Notification WorkShop
Post by: ShadowBearded 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?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/k2hLP/3fd33a3df0.png)

Title: Re: Custom Notification WorkShop
Post by: Wasp_46 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

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/kaO2s/dd14919020.png)

Title: Re: Custom Notification WorkShop
Post by: lastzombie 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.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.)

(http://puu.sh/kekpE/1902f1e9a4.png)


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

(http://puu.sh/kekp9/e3667f1a33.png)

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

(http://puu.sh/kekov/93f6e73fe7.png)

Title: Re: Custom Notification WorkShop
Post by: 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: ğ,ü,ş,ı,ç )

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock 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.

Title: Re: Custom Notification WorkShop
Post by: lastzombie 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 =)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 18, 2015, 10:28:34 AM

Can you post a screenshot of the notification? So I can see how much I need to adjust it?

Title: Re: Custom Notification WorkShop
Post by: lastzombie on September 18, 2015, 11:00:42 AM

Quote from: RepentGamingTV on September 18, 2015, 10:28:34 AM

Can you post a screenshot of the notification? So I can see how much I need to adjust it?

Here you go ^^
http://prntscr.com/8hl92w
http://prntscr.com/8hl9le

I guess it is problem with caps lock text and long nicknames. Notification doesn't have to show eveything it can just show until the given space ends.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 18, 2015, 11:41:00 AM

It looks like it's not even using the custom font. Maybe using a different font from the one I am using.

Anyways, try this CSS:

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: 18px !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: 30px !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: -110px !important;
width: 300px !important;
font-size: 30px !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;
}


Title: Re: Custom Notification WorkShop
Post by: lastzombie on September 18, 2015, 01:03:12 PM

Quote from: RepentGamingTV on September 18, 2015, 11:41:00 AM

It looks like it's not even using the custom font. Maybe using a different font from the one I am using.

This worked and you are right it is not using the font even though it is installed. I will try using different font names. If it works for you I guess I have to fix it on my end.

Title: Re: Custom Notification WorkShop
Post by: CptFive3oh on September 21, 2015, 04:58:24 AM

Follower Alert
Image Link: http://imgur.com/zWDFJEZ
Font Style/Link: Anything that looks good and can be seen clear.
Font Color: White
Any Text Fill/Border?: No
Where do you want text located?: On the blade. (entire blade, not hilt.)
Anything else?: Nope.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 21, 2015, 03:17:47 PM

Requested by: CptFive3oh

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 650px !important;
height: 320px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/zWDFJEZ.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 60px !important;
margin-left: 280px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
text-transform: capitalize;
-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.)

(http://puu.sh/kiPEl/aabec5f2f3.png)

Title: Re: Custom Notification WorkShop
Post by: Frexie on September 25, 2015, 02:00:33 AM

Follower Alert

Image Link: http://imgur.com/tBUQddc
Font Style/Link: Doesnt matter, Areal or something (rest is done)
Font Color: Black
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Under the "New Follower"
Example (If applicable):
Anything else?: Yes, I would love the same for donation to.
http://imgur.com/TalpYOd
(There is the donation button) :)
Thanx <3

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 25, 2015, 01:54:37 PM

Requested by: Frexie

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 1920px !important;
height: 1080px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/tBUQddc.png?1') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 480px !important;
margin-left: 780px !important;
width: 300px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: Impact !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.)

(http://puu.sh/knmb7/f2793ff879.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/TalpYOd.png?1') !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: 520px !important;
margin-left: 600px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !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: 450px !important;
margin-left: -150px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 450px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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

(http://puu.sh/knmai/50f688e564.png)

Title: Re: Custom Notification WorkShop
Post by: forge316 on September 27, 2015, 09:43:50 AM

 hi im trying to customize the widgets for channel commands where my viewers can type a command and  a certain gif and sound will pop up through obs's clr plugin. im wondering if this is something i can customize for each command or is it just one size fits all thing. i know right now i can add any sound i want to any command i create but problem is the background of what pops up in obs is the same color background if possible i would like to have the background transparent and it only showing the text and the gif or picture i add in the command section.

Title: Re: Custom Notification WorkShop
Post by: freepoints on October 03, 2015, 01:53:25 PM

Image Link:http://imgur.com/AxekDBl
Font Style/Link: Segoe Print
Font Color: white with a black outline of 5px
Any text fill/boarder?:
Currency Type: usd
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable): donator name in the middle with the donation amount to the left of it and message a little bit smaller but readable under the amount and name
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 03, 2015, 10:44:59 PM

Requested by: freepoints

Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Segoe';
src:local('Segoe Print'),
    local('SegoePrint.ttf'),
    local('SegoePrint'),
    url('Segoe Print.ttf');
}

#donor-notification {
position: absolute;
left: 0px !important;
width: 590px !important;
height: 120px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/AxekDBl.png') !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: 50px !important;
margin-left: 10px !important;
width: 550px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Segoe !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.8px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -15px !important;
margin-left: -200px !important;
width: 300px !important;
font-size: 24px !important;
font-weight: normal !important;
font-family: Segoe !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -15px !important;
margin-left: -220px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Segoe !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}

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

(http://puu.sh/kx07T/c9f6ac7efc.png)

Title: Re: Custom Notification WorkShop
Post by: CherokeeGuy on October 14, 2015, 07:31:30 AM

Follower Alert

Image Link: http://imgur.com/gallery/TEXs97C/new - No, it is not a panda. I's a Cherokee drawing. :P
Font Style/Link: The "New Follower" text: Grilled Cheese BTN Toasted, Follower name: Grilled Cheese BTN Cn
Font Color: Whatever works with below.
Any text fill/boarder?: I would not like the logo itself to be the background of either alert. Maybe some designs or lines resembling the logo? I'd prefer to have a transparent background.
Where do you want text located? (Follower Name): Under the "New Follower" text
Example (If applicable):

New Follower
(name of new follower)

Anything else?:


Donation Alert

Image Link: Same as above
Font Style/Link: Donater name and amount: Grilled Cheese BTN Toasted, donation message Grilled Cheese BTN Cn
Font Color: Black
Any text fill/boarder?: Also same as above
Currency Type: US Dollars ($)
Where do you want text located?(Donator Name, Donation Amount, Message) See Example.
Example (If applicable):

(name) has tipped ($amount)
(Message)

Anything else?: I apologize if I am too vague or picky. This is just off the top of my head. If you need any more details, please let me know.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 14, 2015, 12:52:43 PM

Make sure the fonts are installed on your computer. I also edited the image to be transparent.

Requested by: CherokeeGuy

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 900
Height: 1000

CSS Code:

Code: [Select]

@font-face {
font-family: 'GrilledCheese BTN';
src:local('GrilledCheese BTN Toasted'),
    local('GrilledCheese BTN Toasted.ttf'),
    local('GrilledCheese'),
    url('GrilledCheese BTN Toasted.ttf');
}

@font-face {
font-family: 'GrilledCheese BTN Cn';
src:local('GrilledCheese BTN Cn'),
    local('GrilledCheese BTN Cn.ttf'),
    local('GrilledCheese BTN'),
    url('GrilledCheese BTN Cn.ttf');
}

#follow-notification {
display: none;
position: absolute;
top: 200px !important;
width: 800px !important;
height: 800px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/itdOTLp.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: -180px !important;
margin-left: 200px !important;
width: 400px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN Cn !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: White;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: 'New Follower ' !important;
font-family: GrilledCheese BTN !important;
}

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

(http://puu.sh/kJCI5/4689d4527d.png)


Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'GrilledCheese BTN';
src:local('GrilledCheese BTN Toasted'),
    local('GrilledCheese BTN Toasted.ttf'),
    local('GrilledCheese'),
    url('GrilledCheese BTN Toasted.ttf');
}

@font-face {
font-family: 'GrilledCheese BTN Cn';
src:local('GrilledCheese BTN Cn'),
    local('GrilledCheese BTN Cn.ttf'),
    local('GrilledCheese BTN'),
    url('GrilledCheese BTN Cn.ttf');
}

#donor-notification {
position: absolute;
left: 0px !important;
top: 200px !important;
width: 800px !important;
height: 800px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/itdOTLp.png') !important;
background-repeat: no-repeat;
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 {
position: absolute !important;
margin-top: -100px !important;
margin-left: 110px !important;
width: 600px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN Cn !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -200px !important;
margin-left: 40px !important;
width: 200px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -200px !important;
margin-left: -150px !important;
width: 400px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}

.donor:after {
content: ' has tipped ' !important;
}

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

(http://puu.sh/kJD2a/d03cfe5bde.png)

Title: Re: Custom Notification WorkShop
Post by: CptFive3oh on October 16, 2015, 01:12:39 PM

@RepentGamingTV If you wouldn't mind and do what you did on this donation notification on mine.
http://i.imgur.com/P7nsqrE.png
Thanks for the help with the new follower notification too! Awesome.

Quote from: RepentGamingTV on September 25, 2015, 01:54:37 PM

Requested by: Frexie

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 1920px !important;
height: 1080px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/tBUQddc.png?1') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 480px !important;
margin-left: 780px !important;
width: 300px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: Impact !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.)

(http://puu.sh/knmb7/f2793ff879.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/TalpYOd.png?1') !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: 520px !important;
margin-left: 600px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !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: 450px !important;
margin-left: -150px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 450px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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

(http://puu.sh/knmai/50f688e564.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 16, 2015, 01:39:22 PM

Requested by: CptFive3oh

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 300

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 264px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/P7nsqrE.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: 150px !important;
margin-left: 600px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !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: 60px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 60px !important;
margin-left: -150px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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

(http://puu.sh/kM0o8/81965456aa.png)

Title: Re: Custom Notification WorkShop
Post by: linkbreit on October 17, 2015, 03:41:50 AM

Hi! i'm more than willing to pay for the alerts since i know you are probably busy, i need a teemo themed alert if u could contact me Via PM i'll give u the details u need :)

Title: Re: Custom Notification WorkShop
Post by: WaKe_BiGReD on October 18, 2015, 09:04:15 AM

Hey Yall,
Do yall know anyone good with css i need so cool alerts made for twitch? My computer crashed and i lost all my streaming stuff!!! It sucks so i'm trying to get back up and going...
   Thanks BigRed

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 19, 2015, 02:41:51 AM

Quote from: WaKe_BiGReD on October 18, 2015, 09:04:15 AM

Hey Yall,
Do yall know anyone good with css i need so cool alerts made for twitch? My computer crashed and i lost all my streaming stuff!!! It sucks so i'm trying to get back up and going...
   Thanks BigRed

Just need images, and I can do the css

Title: Re: Custom Notification WorkShop
Post by: WaKe_BiGReD on October 22, 2015, 03:29:47 AM

Ok... so I'm new to this want format do u want them in and i was looking for something like my layout

Title: Re: Custom Notification WorkShop
Post by: WaKe_BiGReD on October 22, 2015, 04:03:36 AM

http://i.giphy.com/nNxT5qXR02FOM.gif Donation alert
http://i.giphy.com/2alKkyRFPKRSU.gif Follower alert

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 22, 2015, 04:15:55 AM

Requested by: WaKe_BiGReD

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
width: 237px !important;
height: 185px !important;
border-radius: 00px !important;
background-image: url('http://i.giphy.com/2alKkyRFPKRSU.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 155px !important;
margin-left: -40px !important;
font-size: 24px !important;
font-weight: normal !important;
font-family: impact !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}

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

(http://puu.sh/kSEb7/5664e42bff.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 250px !important;
height: 208px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.giphy.com/nNxT5qXR02FOM.gif') !important;
overflow: ahidden !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;
margin-top: 200px !important;
margin-left: -220px !important;
width: 250px !important;
padding-top: 0px !important;
text-align: center !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: black
}
#donor-notification .donor {
position: absolute;
margin-top: 170px !important;
margin-left: -60px !important;
width: 300px !important;
text-align: center !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: black
}

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

(http://puu.sh/kSEdt/c93b399583.png)

Title: Re: Custom Notification WorkShop
Post by: WaKe_BiGReD on October 22, 2015, 07:41:56 AM

omg That is BA thank u so much man

Title: Re: Custom Notification WorkShop
Post by: stahhh on October 23, 2015, 03:20:01 AM

Follower Alert

Image Link: http://imgur.com/M470W9c
Font Style/Link: https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Dhurjati *** Or if you can find it (I couldn't), a Duke Nukem similar font
Font Color: Faded Orange (like the Duke Nukem logo)
Any text fill/boarder?:
Where do you want text located? (Follower Name): To the right of the image, just the follower's name. You can shrink the image down a little bit if you'd like, it doesn't have to be at the given size.
Example (If applicable): As already requested, just making the font as close to the Duke Nukem logo as possible
Anything else?:

Donation Alert

Image Link: http://imgur.com/9LrBTPx
Font Style/Link: https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Dhurjati *** Or if you can find it (I couldn't), a Duke Nukem similar font
Font Color: Donator Name, same as the Follower Alert.. as close to Duke Nukem logo as possible. The donate message can just be plain white text with black shadow/border for easy reading on any background
Any text fill/boarder?:
Currency Type: USD$
Where do you want text located?(Donator Name, Donation Amount, Message): To the right of the image. Donator Name / Amount on top, Message (centered) below it. Same as the follower alert, You can shrink down the image a little bit if you'd like.
Example (If applicable):
Anything else?: Also if you could, now that I look at the image.. could you crop the image down to just the stripper and hand/money?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 23, 2015, 06:42:55 AM

Download and install this font on your pc: http://www.mediafire.com/download/ld390jv4y83v2gj/Dhurjati-Regular.ttf

If you need anything adjusted, let me know.

Requested by: stahhh

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 250

CSS Code:

Code: [Select]

@font-face {
font-family: 'Dhurjati';
src:local('Dhurjati-Regular'),
    local('Dhurjati-Regular'),
    local('Dhurjati-Regular.ttf'),
    url('Dhurjati-Regular.ttf');
}

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
width: 200px !important;
height: 200px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/M470W9c.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: 230px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: Dhurjati !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: orange;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

(http://puu.sh/kTZpN/1b169e61d9.png)


Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Dhurjati';
src:local('Dhurjati-Regular'),
    local('Dhurjati-Regular'),
    local('Dhurjati-Regular.ttf'),
    url('Dhurjati-Regular.ttf');
}

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

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

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

#donor-notification .message {
position: absolute;
margin-top: 90px !important;
margin-left: 350px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
text-transform: capitalize;
line-height: 70% !important;
font-size: 30px !important;
font-family: Dhurjati !important;
color: white !important;
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: black
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: 270px !important;
width: 250px !important;
padding-top: 0px !important;
text-align: center !important;
font-size: 30px !important;
font-family: Dhurjati !important;
color: orange !important;
-webkit-text-stroke: 0px;
-webkit-text-stroke-color: black
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: 260px !important;
width: 300px !important;
text-align: center !important;
text-transform: capitalize;
font-size: 30px !important;
font-family: Dhurjati !important;
color: orange !important;
-webkit-text-stroke: 0px;
-webkit-text-stroke-color: black
}

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

(http://puu.sh/kU09u/3335322285.png)

Title: Re: Custom Notification WorkShop
Post by: Geneth on October 31, 2015, 10:37:13 PM

Follower Alert

Image Link: http://www.directupload.net/file/d/4157/7ekult4r_png.htm
Font Style/Link: Lucida Console (Or something similar)
Font Color:orange
Any text fill/boarder?: none
Where do you want text located? (Follower Name): under the Picture
Example (If applicable):
Anything else?:


Subscriber Alert

Image Link: http://www.directupload.net/file/d/4157/5ohbk8nb_png.htm
Font Style/Link: Lucida Console (Or something similar)
Font Color:orange
Any text fill/boarder?: none
Where do you want text located? (Subscriber Name) In the say Text under the Picture
Example (If applicable):
Anything else?: Can you make it say, "Willkommen bei den flauschigen Waakie's @user@!'' under the Picture

Thanks and keep the good work up :D

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on November 01, 2015, 01:10:33 AM

Requested by: Geneth

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 50px !important;
width: 224px !important;
height: 224px !important;
border-radius: 00px !important;
background-image: url('http://fs5.directupload.net/images/151031/7ekult4r.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 210px !important;
margin-left: -40px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Lucida Console !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: orange;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 1px !important;
}

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

(http://puu.sh/l4uLl/bc204a1fcc.png)


Subscriber:

Link: http://deepbot.tv/notifications/subnotification3.htm
Width: 600
Height: 400

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 80px !important;
  width: 224px !important;
  height: 224px !important;
  background-repeat: no-repeat;
  background-image: url('http://fs5.directupload.net/images/151031/5ohbk8nb.png') !important;
  background-position-y: 0px;
}
#resub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 80px !important;
  width: 224px !important;
  height: 224px !important;
  background-repeat: no-repeat;
  background-image: url('http://fs5.directupload.net/images/151031/5ohbk8nb.png') !important;
  background-position-y: 0px;;
}
.subname {
margin-left: -70px !important;
  margin-top: 230px !important;
  padding-top: 0px !important;
  width: 400px !important;
  text-align: center !important;
  line-height: 25px !important;
  font-size: 30px !important;
  font-weight: bold !important;
  font-family: Lucida Console !important;
  color: Orange !important;
  -webkit-text-stroke: 0.0px;
  -webkit-text-stroke-color: #8a0823;
}

.subname:before {
content: 'Willkommen bei den flauschigen Waakies ' !important;
}

.months {
visibility: hidden !important;
}

.months:after {
visibility: hidden !important;
}

.badge {
visibility: hidden !important;
}

@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

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

(http://puu.sh/l4uMW/cb07d2f4ac.png)

Title: Re: Custom Notification WorkShop
Post by: nielsene90 on December 15, 2015, 01:43:19 PM

Follower Alert

Image Link: http://i.imgur.com/IWtlM61.png
Font Style/Link: Eras Bold ITC
Font Color: Same as text in image (Darkblue)
Any text fill/boarder?: Instructions via Arctomian: Beveled with a 2pt Black Stroke
Where do you want text located? (Follower Name): In the steel part
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://i.imgur.com/w0qkBly.png
Font Style/Link: Eras Bold ITC
Font Color: Same as text in image (Dark Blue)
Any text fill/boarder?: Instructions via Arctomian: Beveled with a 2pt Black Stroke
Currency Type: USD
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) In the Steel section with Donator Name and Donation Amount
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: grrlgeek42 on December 27, 2015, 06:29:10 PM

Follower Alert

Image Link: http://imgur.com/Vx3qSUw
Font Style/Link: Century Gothic
Font Color: White
Any text fill/boarder?:
Where do you want text located? (Follower Name): in the gray bar in the center
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/QAwsk1J
Font Style/Link: Century Gothic
Font Color: White
Any text fill/boarder?:
Currency Type: USD
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) In the gray area with just name and amount
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: StampedAurean on December 31, 2015, 05:57:52 PM

I will be using these in XSplit if that matters at all.

Follower Alert

Image Link: http://imgur.com/J0R3U01
Font Style/Link: Something bold and heavy
Font Color: White
Where do you want text located? (Follower Name): Name below image

Donation Alert

Image Link: http://imgur.com/14Em5qp
Font Style/Link: Something bold and heavy
Font Color: White
Currency Type: USD$
Where do you want text located?(Donator Name, Donation Amount, Message): Name above Amount on top of image - Message below image

Thank You!

Title: Re: Custom Notification WorkShop
Post by: maracineanu on January 13, 2016, 04:21:29 AM

Hello, I am Russian, I would like the tape that you added the ability to alert through the site http://www.donationalerts.ru/ What would the viewer at pozhartvovany extradited balls or VIP. automatically using this function http://c2n.me/3sPOG3D

Title: Re: Custom Notification WorkShop
Post by: maracineanu on January 13, 2016, 04:22:34 AM

Hello, I am Russian, I would like the tape that you added the ability to alert through the site http://www.donationalerts.ru/ Whatever donations were issued at the viewer balls or VIP. automatically using this function http://c2n.me/3sPOG3D

Title: Re: Custom Notification WorkShop
Post by: SilreV on January 15, 2016, 06:19:07 PM

alright had posted this in the wrong topic

Hello!

can I have some notification from you!

follower link : http://imgur.com/OTDRjro
Donations link : http://imgur.com/EJxjGrd

300x150 is possible (if the ratio allows it ofcourse)

Text for the follow in the lower part of the picture.
text for the donations in below the picture.

looking forward to it!

Title: Re: Custom Notification WorkShop
Post by: wes187inc on January 21, 2016, 01:53:40 AM

Image Link: http://i.imgur.com/xucxDWZ.png
Font Style/Link: Any font works
Font Color: White
Any text fill/boarder?: no
Currency Type: USD
Where do you want text located? Donator Name located on the line where it says "FROM, Donation Amount located on the line next to the "$", Message located on the lines above, starting from the first line, wrapping down.
Example (If applicable): used #9 as my example http://deepbot.deep.sg/forums/index.php?topic=1652.0 but I was unable to get the text right (have never worked with CSS before lol)
Anything else?: You are the best for this! Ty so much

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 26, 2016, 07:08:23 AM

Quote from: nielsene90 on December 15, 2015, 01:43:19 PM

Follower Alert

Image Link: http://i.imgur.com/IWtlM61.png
Font Style/Link: Eras Bold ITC
Font Color: Same as text in image (Darkblue)
Any text fill/boarder?: Instructions via Arctomian: Beveled with a 2pt Black Stroke
Where do you want text located? (Follower Name): In the steel part
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://i.imgur.com/w0qkBly.png
Font Style/Link: Eras Bold ITC
Font Color: Same as text in image (Dark Blue)
Any text fill/boarder?: Instructions via Arctomian: Beveled with a 2pt Black Stroke
Currency Type: USD
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) In the Steel section with Donator Name and Donation Amount
Example (If applicable):
Anything else?:

I am not sure what is wrong with the font, but it seems to not take or work. The font closely resembles impact. You can change it and adjust it if needed.

Requested by: nielsene90

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 480px !important;
height: 200px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/IWtlM61.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 130px !important;
margin-left: -30px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Eras Bold ITC !important;
color: white !important;
text-transform: capitalize;
-webkit-text-fill-color: darkblue;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
overflow: ahidden !important;
}
 
.followname:after {
content: '' !important;
}

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

(http://puu.sh/mJE40/c1d3797c7c.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 630
Height: 250

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 480px !important;
height: 200px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/w0qkBly.png') !important;
overflow: ahidden !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;
margin-top: 90px !important;
margin-left: -140px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: impact !important;
color: darkblue !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 90px !important;
margin-left: -240px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family:impact !important;
color: darkblue !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

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

(http://puu.sh/mJEcT/c8036ab739.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 26, 2016, 07:22:13 AM

Quote from: grrlgeek42 on December 27, 2015, 06:29:10 PM

Follower Alert

Image Link: http://imgur.com/Vx3qSUw
Font Style/Link: Century Gothic
Font Color: White
Any text fill/boarder?:
Where do you want text located? (Follower Name): in the gray bar in the center
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/QAwsk1J
Font Style/Link: Century Gothic
Font Color: White
Any text fill/boarder?:
Currency Type: USD
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) In the gray area with just name and amount
Example (If applicable):
Anything else?:

Requested by: grrlgeek42

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 650px !important;
height: 125px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/Vx3qSUw.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 5px !important;
margin-left: 10px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Century Gothic !important;
color: white !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
overflow: ahidden !important;
}
 
.followname:after {
content: '' !important;
}

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

(http://puu.sh/mJF22/5ab5c65491.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 650px !important;
height: 125px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/QAwsk1J.png') !important;
overflow: ahidden !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;
margin-top: 0px !important;
margin-left: -180px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Century Gothic !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -320px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Century Gothic !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

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

(http://puu.sh/mJF0V/aa98bea2fe.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 26, 2016, 07:32:35 AM

Quote from: StampedAurean on December 31, 2015, 05:57:52 PM

I will be using these in XSplit if that matters at all.

Follower Alert

Image Link: http://imgur.com/J0R3U01
Font Style/Link: Something bold and heavy
Font Color: White
Where do you want text located? (Follower Name): Name below image

Donation Alert

Image Link: http://imgur.com/14Em5qp
Font Style/Link: Something bold and heavy
Font Color: White
Currency Type: USD$
Where do you want text located?(Donator Name, Donation Amount, Message): Name above Amount on top of image - Message below image

Thank You!

Requested by: StampedAurean

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 399px !important;
height: 304px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/J0R3U01.gif') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 300px !important;
margin-left: 40px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
overflow: ahidden !important;
}
 
.followname:after {
content: '' !important;
}

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

(http://puu.sh/mJFj9/f8c6881025.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 50px !important;
left: 50px !important;
width: 347px !important;
height: 200px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/14Em5qp.gif') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 200px !important;
margin-left: -30px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: -70px !important;
margin-left: -130px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -70px !important;
margin-left: -250px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

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

(http://puu.sh/mJFHd/355a9af5a4.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 26, 2016, 07:33:38 AM

Quote from: maracineanu on January 13, 2016, 04:22:34 AM

Hello, I am Russian, I would like the tape that you added the ability to alert through the site http://www.donationalerts.ru/ Whatever donations were issued at the viewer balls or VIP. automatically using this function http://c2n.me/3sPOG3D

We do not support 3rd party donation systems currently.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 26, 2016, 07:38:59 AM

Quote from: SilreV on January 15, 2016, 06:19:07 PM

alright had posted this in the wrong topic

Hello!

can I have some notification from you!

follower link : http://imgur.com/OTDRjro
Donations link : http://imgur.com/EJxjGrd

300x150 is possible (if the ratio allows it ofcourse)

Text for the follow in the lower part of the picture.
text for the donations in below the picture.

looking forward to it!

Requested by: SilreV

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 350px !important;
height: 257px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/OTDRjro.gif') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 250px !important;
margin-left: 40px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
overflow: ahidden !important;
}
 
.followname:after {
content: '' !important;
}

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

(http://puu.sh/mJFUm/9440120ba3.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 50px !important;
left: 150px !important;
width: 300px !important;
height: 150px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/EJxjGrd.gif') !important;
overflow: ahidden !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;
margin-top: 160px !important;
margin-left: -300px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 120px !important;
margin-left: -230px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

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

(http://puu.sh/mJG5G/a1bae2c73e.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 26, 2016, 07:51:30 AM

Quote from: wes187inc on January 21, 2016, 01:53:40 AM

Image Link: http://i.imgur.com/xucxDWZ.png
Font Style/Link: Any font works
Font Color: White
Any text fill/boarder?: no
Currency Type: USD
Where do you want text located? Donator Name located on the line where it says "FROM, Donation Amount located on the line next to the "$", Message located on the lines above, starting from the first line, wrapping down.
Example (If applicable): used #9 as my example http://deepbot.deep.sg/forums/index.php?topic=1652.0 but I was unable to get the text right (have never worked with CSS before lol)
Anything else?: You are the best for this! Ty so much

Requested By: wes187inc

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 812px !important;
height: 273px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/xucxDWZ.png') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 70px !important;
margin-left: 50px !important;
width: 700px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 170px !important;
margin-left: -400px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 170px !important;
margin-left: 70px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

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

(http://puu.sh/mJGZ3/8b04549639.png)

Title: Re: Custom Notification WorkShop
Post by: WaKe_BiGReD on January 28, 2016, 07:48:51 AM

can any one do custom sounds

Title: Re: Custom Notification WorkShop
Post by: DessiBliss3 on January 28, 2016, 12:57:51 PM

Follower Alert

Image Link: no image just text
Font Style/Link: http://www.1001fonts.com/vtks-love-u-font.html
Font Color: message if write and name is green
Any text fill/boarder?: none
Where do you want text located? (Follower Name):
Example (If applicable): So for example itll be Welcome (name in green with font) To the BLS Nation
Anything else?: can the name of the follower and the BLSNation be in this font but the msg be in regular standard font?


Donation Alert

Image Link: none, just text
Font Style/Link: http://www.1001fonts.com/vtks-love-u-font.html
Font Color: name and amount green the other white
Any text fill/boarder?: none
Currency Type: US
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) yes, just like this
Example (If applicable): Can the Donator and the amount be in the font but the rest in regular standard font?
Anything else?: no background just text just like the follower notification

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 28, 2016, 04:50:32 PM

Quote from: DessiBliss3 on January 28, 2016, 12:57:51 PM

Follower Alert

Image Link: no image just text
Font Style/Link: http://www.1001fonts.com/vtks-love-u-font.html
Font Color: message if write and name is green
Any text fill/boarder?: none
Where do you want text located? (Follower Name):
Example (If applicable): So for example itll be Welcome (name in green with font) To the BLS Nation
Anything else?: can the name of the follower and the BLSNation be in this font but the msg be in regular standard font?


Donation Alert

Image Link: none, just text
Font Style/Link: http://www.1001fonts.com/vtks-love-u-font.html
Font Color: name and amount green the other white
Any text fill/boarder?: none
Currency Type: US
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) yes, just like this
Example (If applicable): Can the Donator and the amount be in the font but the rest in regular standard font?
Anything else?: no background just text just like the follower notification

Requested by: DessiBliss3

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 500px !important;
height: 200px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/qi4iTvV.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 100px !important;
margin-left: 150px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Vtks Love U !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: green;
-webkit-text-stroke-color: green;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
}
 
.followname:before {
content: 'Welcome ' !important;
}

.followname:after {
content: ' to the BLS Nation!' !important;
}

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

(http://puu.sh/mMClh/aac1fa7c19.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 500px !important;
height: 200px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/qi4iTvV.png') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 70px !important;
margin-left: 0px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Vtks Love U !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: grey;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: -150px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Vtks Love U !important;
color: green !important;
text-transform: capitalize;
-webkit-text-stroke-color: grey;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -250px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Vtks Love U !important;
color: green !important;
text-transform: capitalize;
-webkit-text-stroke-color: grey;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

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

(http://puu.sh/mMCkT/f5d1dcf763.png)

Title: Re: Custom Notification WorkShop
Post by: tfcarbon on February 02, 2016, 11:22:33 PM

~Follower Alert~

- Image Link: http://imgur.com/aqFKk1g

- Font Style/Link: Microsoft Sans Serif or Whichever You think will look Better

- Font Color: White

- Any text fill/boarder? No

- Where do you want text located? (Follower Name): Center of Image

- Example (If applicable): https://gyazo.com/ab948cb9c0b997a700004f9a60094e4b

- Anything else?: Nope

~Donation Alert~

- Image Link: http://imgur.com/gjxb5HO

- Font Style/Link: Microsoft Sans Serif or Whichever You think will look Better

- Font Color: White

- Any text fill/boarder? No

- Currency Type: USD

- Where do you want text located?(Text Options: Donator Name, Donation Amount, Message): Center Thank You (Donator Name) for (Donation Amount)

- Example (If applicable): https://gyazo.com/6510bfcf7b884378dd892fc6a65793cb

- Anything else?: Nope

~Subscriber Alert~

- Image Link: http://imgur.com/J1C2RoO

- Font Style/Link: Microsoft Sans Serif or Whichever You think will look Better

- Font Color: White

- Any text fill/boarder? No

- Where do you want text located? (Follower Name): Center of Image

- Example (If applicable): https://gyazo.com/7331e91a69fe8115d70065cef3402774

- Anything else?: Nope

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 03, 2016, 04:53:33 AM

Requested by: tfcarbon

Follower:

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

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 840px !important;
height: 125px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/aqFKk1g.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: 270px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: sans-serif !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: green;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
}
 
.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://puu.sh/mTt4O/7960d8203e.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 840px !important;
height: 78px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/gjxb5HO.png') !important;
overflow: ahidden !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;
margin-top: 0px !important;
margin-left: -50px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: sans-serif !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: grey;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -230px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: sans-serif !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: grey;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: 'Thank you ';
}

.donor:after {
content: ' for ';
}

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

(http://puu.sh/mTtA3/99ae2ce5c0.png)

Subscriber:

Link: http://deepbot.tv/notifications/subnotification3.htm
Width: 900
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 840px !important;
  height: 125px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/J1C2RoO.png') !important;
  background-position-y: 0px;
}
#resub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 840px !important;
  height: 125px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/J1C2RoO.png') !important;
  background-position-y: 0px;
}
.subname {
margin-left: 300px !important;
  margin-top: 80px !important;
  padding-top: 0px !important;
  width: 0px !important;
  text-align: center !important;
  font-size: 40px !important;
  font-weight: bold !important;
  font-family: sans-serif !important;
  color: white !important;
  -webkit-text-stroke: 0px;
  text-transform: capitalize;
  -webkit-text-stroke-color: black;
}

.months {
visibility: hidden !important;
}

.months:after {
visibility: hidden !important;
}

.badge {
visibility: hidden !important;
}

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

(http://puu.sh/mTtSm/ceae6bfa09.png)

Title: Re: Custom Notification WorkShop
Post by: Rookzer on February 04, 2016, 11:41:17 AM

Would it be possible to get CSS for follower and donation? I can do the images myself, or would you need them as well?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 04, 2016, 11:46:03 AM

Quote from: Rookzer on February 04, 2016, 11:41:17 AM

Would it be possible to get CSS for follower and donation? I can do the images myself, or would you need them as well?

Well I would need the images in order to place everything on the image. But you can get the CSS here: http://deepbot.deep.sg/wiki/Custom+CSS

Title: Re: Custom Notification WorkShop
Post by: bittenbytheblade on February 09, 2016, 02:14:52 AM

Follower Alert

Image Link: http://imgur.com/4bYKOsJ
Font Style/Link: Brittanic Bold
Font Color: Blue
Any text fill/border?: No
Where do you want text located? (Follower Name): Centered on image
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/50m7XsP
Font Style/Link: Brittanic Bold
Font Color: Blue
Any text fill/border?: No
Currency Type: USD
Where do you want text located?(Donator Name, Donation Amount, Message) all in center of image
Example (If applicable): Viewer_Name donated $20.00 thank you for a good stream!
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 09, 2016, 03:14:46 AM

Requested by: bittenbytheblade

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 1239px !important;
height: 270px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/4bYKOsJ.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 80px !important;
margin-left: 400px !important;
width: 400px !important;
font-size: 50px !important;
font-weight: bold !important;
font-family: Brittanic !important;
color: gold !important;
text-transform: capitalize;
-webkit-text-fill-color: Blue;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
}
 
.followname:before {
content: '' !important;
color: white !important;
-webkit-text-fill-color: white;
}

.followname:after {
content: '' !important;
color: white !important;
-webkit-text-fill-color: white;
}

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

(http://puu.sh/n0BJk/df6742788b.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1250
Height: 300

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1239px !important;
height: 300px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/50m7XsP.png') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 120px !important;
margin-left: 220px !important;
width: 800px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 24px !important;
font-family: Brittanic !important;
color: blue !important;
text-transform: capitalize;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 60px !important;
margin-left: -170px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Brittanic !important;
color: blue !important;
text-transform: capitalize;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 60px !important;
margin-left: -290px !important;
width: 600px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Brittanic !important;
color: blue !important;
text-transform: capitalize;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:after {
content: ' donated';
}

.amount:after {
content: '';
}

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

(http://puu.sh/n0BIr/8b0d802b0a.png)

Title: Re: Custom Notification WorkShop
Post by: Mak on February 19, 2016, 01:58:08 AM

Donation Alert: (You do not need to include all 3 text options, Just an FYI.)

Code: [Select]

Donation Alert

Image Link: http://imgur.com/64PXfRh
Font Style/Link: Segoe UI
Font Color: White
Any text fill/boarder?:
Currency Type: EUR (€)
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message)
Example (If applicable): @user@ - @amount@ : @message@
Anything else?: -


Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 19, 2016, 04:08:50 AM

Requested by: Mak

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1280
Height: 100

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1280px !important;
height: 50px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/64PXfRh.png') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: -5px !important;
margin-left: 520px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 20px !important;
font-family: Segoe UI !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: -30px !important;
margin-left: -500px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Segoe UI !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -30px !important;
margin-left: -590px !important;
width: 600px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Segoe UI !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:after {
content: ' - ';
}

.amount:after {
content: ' : ';
}

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

(http://puu.sh/ncNjP/bbc6729fd1.png)

Title: Re: Custom Notification WorkShop
Post by: ShiroKoN on March 06, 2016, 03:07:11 AM

Follower Alert

Image Link: http://imgur.com/0z3oJb0 (http://imgur.com/0z3oJb0)
Font Style/Link: http://www.1001fonts.com/revolution-italic-font.html (http://www.1001fonts.com/revolution-italic-font.html)
Font Color:white
Any text fill/boarder?:none
Where do you want text located? (Follower Name):under the animation
Example (If applicable):
Anything else?:@user@ become a Pirate!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 06, 2016, 03:22:45 AM

Requested by: ShiroKoN

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Revo';
src: url('https://fs05n4.sendspace.com/dl/5e13335a3d4bee560bd790ceba498739/56ddecb33d4f6e25/slhoil/REVOLUTIONItalic.ttf');
}

#follow-notification {
display: none;
position: absolute;
left: 100px !important;
width: 150px !important;
height: 150px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/0z3oJb0.gif') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 120px !important;
margin-left: -80px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: italic !important;
font-family: Revo !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: green;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
}
 
.followname:before {
content: '' !important;
}

.followname:after {
content: ' became a Pirate!' !important;
}

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

(http://puu.sh/nvUqQ/243db8de21.png)

Title: Re: Custom Notification WorkShop
Post by: Wolfstreet Gaming on March 19, 2016, 05:14:15 AM

Donation Alert:

Image Link: My logo and Overlay so you can see my color scheme Logo: http://imgur.com/LEWLOQD Overlay: http://imgur.com/9wvNDZc
Font Style/Link: something that goes with my theme preferabbly
Font Color: white/red or either/or
Any text fill/boarder?:
Currency Type: $USD
Where do you want text located? (donator name) has donated (amount)! Thank you for supporting the Wolf Pack!
Example (If applicable):
Anything else?: minimalistic

Follower Alert:

Image Link: My logo and Overlay so you can see my color scheme Logo: http://imgur.com/LEWLOQD Overlay: http://imgur.com/9wvNDZc
Font Style/Link: something that goes with my theme preferably
Font Color: white/red or either/or
Any text fill/boarder?:
Where do you want text located? (follower name) has joined the Wolf Pack!
Example (If applicable):
Anything else?: minimalistic

Thank you very much for all that you do! I looked through all of your custom notifications and they all are great! Mad respect!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 20, 2016, 10:40:34 AM

Let me know if you want anything changed. The Font I used and you need to install: http://www.dafont.com/coalition.font

Requested by: Wolfstreet Gaming

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 250px !important;
height: 250px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/dzmRup2.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 250px !important;
width: 500px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Coalition !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.1px;
text-shadow: 10px white !important;
}
 
.followname:before {
content: '' !important;
}

.followname:after {
content: ' has joined the Wolf Pack!' !important;
}

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

(http://puu.sh/nPb7X/364609980c.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 250px !important;
height: 250px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/dzmRup2.png') !important;
overflow: ahidden !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;
margin-top: 80px !important;
margin-left: 50px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Coalition !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: 220px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Coalition !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}

.donor:after {
content: ' has donated ' !important;
}

.amount:after {
content: ' ! Thank you for supporting the Wolf Pack!' !important;
}

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

(http://puu.sh/nPb8m/caca99e71f.png)

Title: Re: Custom Notification WorkShop
Post by: Wolfstreet Gaming on March 21, 2016, 12:26:38 AM

Quote from: RepentGamingTV on March 20, 2016, 10:40:34 AM

Let me know if you want anything changed. The Font I used and you need to install: http://www.dafont.com/coalition.font

Requested by: Wolfstreet Gaming

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 250px !important;
height: 250px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/LEWLOQD.png') !important;
background-repeat: no-repeat;

}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 250px !important;
width: 500px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Coalition !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.1px;
text-shadow: 10px white !important;
}
 
.followname:before {
content: '' !important;
}

.followname:after {
content: ' has joined the Wolf Pack!' !important;
}

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

(http://puu.sh/nMQYL/7673025fe3.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 250px !important;
height: 250px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/LEWLOQD.png') !important;
overflow: ahidden !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;
margin-top: 80px !important;
margin-left: 50px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Coalition !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: 220px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Coalition !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}

.donor:after {
content: ' has donated ' !important;
}

.amount:after {
content: ' ! Thank you for supporting the Wolf Pack!' !important;
}

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

(http://puu.sh/nMQYj/1862bd4b2a.png)

I should have done this prior but is there anyway to crop my logo to just the circle emblem? I really appreciate this and thank you very much!!! The font is exactly the one I use and I am stoked you found it because I could not find it on DA fonts again the other day! Awesome work:)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 21, 2016, 02:14:38 AM

I may be able to photoshop it. Do you want the background in the circle, or just WSG and the circle?

Title: Re: Custom Notification WorkShop
Post by: Wolfstreet Gaming on March 22, 2016, 12:07:49 AM

Quote from: RepentGamingTV on March 21, 2016, 02:14:38 AM

I may be able to photoshop it. Do you want the background in the circle, or just WSG and the circle?

Still want the circle if possible just don't want the excess background around the circle. Thanks in advance!

Title: Re: Custom Notification WorkShop
Post by: SunshineKid on March 26, 2016, 09:48:56 AM

Follower Alert

Image Link: https://antdagamer.files.wordpress.com/2015/06/wwe_super_card_kevin_owens.jpg
Font Style/Link: Any is fine
Font Color: Relative to whats on the Card
Any text fill/boarder?: what you think best
Where do you want text located? (Follower Name): where the name kevin owens would be a great place for follower name
Example (If applicable):
Anything else?: where say pop up powerbomb say Thank you for following. And where it says +68 power and +68 Toughness  says Non_Stop_Sport. Also under POW TGH SPD CHA Says 9,999

Title: Re: Custom Notification WorkShop
Post by: Wolfstreet Gaming on March 30, 2016, 05:02:06 AM

Donation Alert

Image Link: http://wolfstgaming.imgur.com/all/
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?:with black outline (or shadowing)
Currency Type:$
Where do you want text located? Name in first black box, then amount and message in second black box
Example (If applicable): Wolfstreet, Donated $5, Thanks for Supporting the #Wolfpack!
Anything else?:


Follower Alert

Image Link: http://wolfstgaming.imgur.com/all/
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?:with black outline (or shadowing)
Where do you want text located? Name in first black box, then Welcome message in 2nd box
Example (If applicable): Wolfstreet, Welcome to the #WOLFPACK!
Anything else?: Thank you!

Title: Re: Custom Notification WorkShop
Post by: Wolfstreet Gaming on March 30, 2016, 05:09:14 AM

Also can you make this slide out from left to right? Thank you

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 30, 2016, 07:49:40 AM

Quote from: Wolfstreet Gaming on March 30, 2016, 05:09:14 AM

Also can you make this slide out from left to right? Thank you

The links to the images says it is not public to view. :/

Title: Re: Custom Notification WorkShop
Post by: fandehgo521 on March 30, 2016, 09:07:12 AM

Donation Alert

Image Link: http://i.imgur.com/qCe9YC6.gif
Font Style/Link: http://dl.dafont.com/dl/?f=strawberry_muffins
Font Color: Greyish Blue (if possible the background color of this -- http://imgur.com/IicvwLL)
Any text fill/boarder?:White thick outline
Currency Type:$
Where do you want text located? Above Vayne tumbling
Example (If applicable): Top Line: "Fandehgo521 has donated $5, Thanks for Supporting the #SellOutDream
                                   Next line: "Donation Message"
                                   *VAYNE TUMBLING*
Anything else?:


Follower Alert

Image Link: http://i.imgur.com/qCe9YC6.gif
Font Style/Link: http://dl.dafont.com/dl/?f=strawberry_muffins
Font Color: Font Color: Greyish Blue (if possible the background color of this -- http://imgur.com/IicvwLL)
Any text fill/boarder?:White thick outline
Where do you want text located? Above Vayne tumbling
Example (If applicable): Top Line: "Fandehgo521 has followed the channel. Thanks for the support!!
                                   *VAYNE TUMBLING*
Anything else?: Thank you so much <3

Title: Re: Custom Notification WorkShop
Post by: Wolfstreet Gaming on March 30, 2016, 09:55:26 AM

Quote from: RepentGamingTV on March 30, 2016, 07:49:40 AM

Quote from: Wolfstreet Gaming on March 30, 2016, 05:09:14 AM

Also can you make this slide out from left to right? Thank you

The links to the images says it is not public to view. :/

My bad!

http://imgur.com/UzGUPeP
http://imgur.com/r9FUnqJ

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 30, 2016, 11:42:33 AM

Can't make it slide in and out, only from top or bottom. :/ The donation one was a bit hard, since it was kind of limited on space. If you want to remove it coming from the top, just remove ?top=1 in the urls.

Requested by: WolfStreetGaming

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?top=1
Width: 1920
Height: 1080

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/r9FUnqJ.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 0px !important;
margin-left: -250px !important;
width: 700px !important;
font-size: 20px !important;
font-weight: normal !important;
font-family: Arial !important;
color: green !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 10px white !important;
}

.followname:after {
position: absolute !important;
content: 'Welcome to the #WOLFPACK!' !important;
margin-left: -50px !important;
width: 700px !important;
}

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

(http://puu.sh/nZ1nk/87597a5680.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/UzGUPeP.png') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 25px !important;
margin-left: 250px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 16px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: -1110px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 20px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -1070px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 20px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.1px;
text-shadow: 3px !important;
}

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

(http://puu.sh/nZ0Tm/baaa4f7625.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 30, 2016, 12:04:54 PM

Requested by: fandehgo521

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 150px !important;
left: 200px !important;
width: 399px !important;
height: 390px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/qCe9YC6.gif') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: -80px !important;
margin-left: -150px !important;
width: 700px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 10px white !important;
}

.followname:after {
content: ' has followed the channel. Thanks for the support!!' !important;
}

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

(http://puu.sh/nZ2LW/05624edef5.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 200px !important;
left: 200px !important;
width: 399px !important;
height: 390px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/qCe9YC6.gif') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: -50px !important;
margin-left: -100px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 24px !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: -130px !important;
margin-left: -500px !important;
width: 800px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -170px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Strawberry Muffins Demo !important;
color: #7076a1 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.5px;
text-shadow: 3px !important;
}

.donor:after {
content: ' has donated ' !important;
}

.amount:after {
content: ', Thanks for Supporting the #SellOutDream' !important;
}

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

(http://puu.sh/nZ2Aw/dc93ec6bbe.png)

Title: Re: Custom Notification WorkShop
Post by: fandehgo521 on March 30, 2016, 02:36:28 PM

Thank you so much repent <3

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 04, 2016, 03:32:41 AM

Requested by: SunshineKid 

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 399px !important;
height: 592px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/31q7EAA.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 25px !important;
margin-left: -85px !important;
width: 400px !important;
font-size: 24px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
-webkit-transform: rotate(-23deg) !important;
}

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

(http://puu.sh/o4RY9/df6adcab41.png)

Title: Re: Custom Notification WorkShop
Post by: SunshineKid on April 04, 2016, 12:10:53 PM

Thanks man looks absolutely great!

Title: Re: Custom Notification WorkShop
Post by: Spishak on April 10, 2016, 03:46:19 AM

Follower Alert

Image Link: No img
Font Style/Link: http://www.dafont.com/againts.font?text=Welcome+To++The+Madness&back=new
Font Color: Red plz.
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Above the Follwer Name
Example (If applicable):
Anything else?:

Donation Alert

Image Link: No
Font Style/Link: http://www.dafont.com/againts.font?text=Thank+you+for+the+Support%21&back=new
Font Color: Red plz
Any text fill/boarder?:no
Currency Type:$
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message) Above the Donation plz!
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 10, 2016, 04:11:01 AM

Requested by: Spishak

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 500px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url("http://i.imgur.com/HwoPBKJ.png") !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 50px !important;
margin-left: 80px !important;
width: 400px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 10px white !important;
}

.followname:before {
content: "Welcome to the Madness " !important;
}

.followname:after {
content: " !" !important;
}

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

(http://puu.sh/ocdZx/d2f538d55a.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 500px !important;
height: 200px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url("http://i.imgur.com/HwoPBKJ.png") !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-top: 130px !important;
margin-left: 60px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 24px !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 50px !important;
margin-left: -100px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 50px !important;
margin-left: -100px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: againts !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
position: absolute;
margin-top: -40px !important;
margin-left: 0px !important;
content: "Thank you for the Support! " !important;
}

.amount:after {
content: "" !important;
}

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

(http://puu.sh/ocdYJ/d41593f8f2.png)

Title: Re: Custom Notification WorkShop
Post by: TramikTV on April 10, 2016, 11:52:17 PM

I tried using some examples as templates, I'm just having a hard time getting this right. I would really appreciate it if someone gave me a hand. Thanks in advance.

Follower Alert

Image Link: http://i.imgur.com/XePEJtX.gif
Font Style/Link: Big Noodle Tilting (http://www.dafont.com/bignoodle-titling.font)
Font Color: FFA600 (bright orange)
Any text fill/boarder?: Black border around text
Where do you want text located? User (Follower Name): To left of the image, centered vertically.
Example (If applicable):
Anything else?: It'd like it to read "@user@ followed!" with a 60px font

Donation Alert

Image Link: http://i.imgur.com/hFyGn68.gif
Font Style/Link: same
Font Color: same
Any text fill/boarder?: same
Currency Type: USD
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message): same
Example (If applicable):
Anything else?: same as the follower just a different gif, please read as "@user@" donated @amt@!"

Subscriber Alert

Image Link: http://i.imgur.com/7PnAZi9.gif
Font Style/Link: same
Font Color: same
Any text fill/boarder?: same
Where do you want text located? (Subscriber Name) same
Example (If applicable):
Anything else?: read as "@user@ just subscribed!"

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 11, 2016, 04:24:01 AM

Let me know if you want anything adjusted. Also make sure you installed the font you linked on your pc.

Requested by: TramikTV

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 400px !important;
width: 258px !important;
height: 182px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/XePEJtX.gif') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 0px !important;
margin-left: -420px !important;
width: 400px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: BigNoodleTitling !important;
color: #FFA600 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.8px;
text-shadow: 10px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' followed!' !important;
}

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

(http://puu.sh/oeRQj/34fb62f222.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1000
Height: 450

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 200px !important;
left: 400px !important;
width: 264px !important;
height: 205px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/hFyGn68.gif') !important;
overflow: ahidden !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;
margin-top: 80px !important;
margin-left: -540px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 60px !important;
font-family: BigNoodleTitling !important;
color: FFA600 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -50px !important;
margin-left: -400px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 60px !important;
font-family: BigNoodleTitling !important;
color: FFA600 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}

.donor:after {
content: ' donated ' !important;
}

.amount:after {
content: '!' !important;
}

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

(http://puu.sh/oeRHL/42771d58c9.png)

Subscriber:

Link: http://deepbot.tv/notifications/subnotification3.htm
Width: 1000
Height: 600

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
  display: none;
  position: absolute;
  top: 150px !important;
  left: 500px !important;
  width: 116px !important;
  height: 136px !important;
  background-repeat: no-repeat;
  background-size: contain !important;
  background-image: url('http://i.imgur.com/7PnAZi9.gif') !important;
  background-position-y: 0px;
}
#resub-notification {
  display: none;
  position: absolute;
  top: 150px !important;
  left: 500px !important;
  width: 116px !important;
  height: 136px !important;
  background-repeat: no-repeat;
  background-size: contain !important;
  background-image: url('http://i.imgur.com/7PnAZi9.gif') !important;
  background-position-y: 0px;
}
.subname {
position: absolute !important;
margin-left: -450px !important;
  margin-top: 50px !important;
  padding-top: 0px !important;
  width: 400px !important;
  text-align: center !important;
  font-size: 60px !important;
  font-weight: normal !important;
  font-family: BigNoodleTitling !important;
  color: #FFA600 !important;
  -webkit-text-stroke: 2px;
  text-transform: capitalize;
  -webkit-text-stroke-color: black;
}

.months {
visibility: hidden !important;
}

.months:after {
visibility: hidden !important;
}

.badge {
visibility: hidden !important;
}

.subname:after {
position: absolute !important;
margin-left: -380px !important;
  margin-top: 50px !important;
  width: 500px !important;
content: ' just subscribed!' !important;
}

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

(http://puu.sh/oeRIg/112938fd0c.png)

Title: Re: Custom Notification WorkShop
Post by: TramikTV on April 11, 2016, 11:38:44 PM

Quote from: RepentGamingTV on April 11, 2016, 04:24:01 AM

Let me know if you want anything adjusted. Also make sure you installed the font you linked on your pc.

Dude - that's excellent. If possible could we make the gifs aboirt 50% smaller (basically the default size in the links)? They'd just take up too much room being that big. I think the text size is good. Thanks so much for your work.

Title: Re: Custom Notification WorkShop
Post by: SeanKushery423 on April 12, 2016, 12:09:28 AM

Donation Alert

Image Link: http://imgur.com/gallery/YQeWejH
Font Style/Link: Stencil
Font Color: Gray with Green outline
Any text fill/boarder?: I would like a clean boarder just to clean it up, maybe a Grey and Green line box
Currency Type: USD
Where do you want text located? In the middle of the GIF. It should say (name) just donated (amount)!
Example (If applicable):
Anything else?:

Follower Alert

Image Link: http://imgur.com/gallery/a03YMIc
Font Style/Link: Broadway
Font Color:  Gray with Blue outline
Any text fill/boarder?: Same Boarder as the donations alert
Where do you want text located? Just above the text in the GIF (Follower Name): (follower name) followed
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 12, 2016, 06:06:08 AM

Quote from: TramikTV on April 11, 2016, 11:38:44 PM

Quote from: RepentGamingTV on April 11, 2016, 04:24:01 AM

Let me know if you want anything adjusted. Also make sure you installed the font you linked on your pc.

Dude - that's excellent. If possible could we make the gifs aboirt 50% smaller (basically the default size in the links)? They'd just take up too much room being that big. I think the text size is good. Thanks so much for your work.

Updated post with new CSS.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 12, 2016, 06:11:56 AM

Quote from: SeanKushery423 on April 12, 2016, 12:09:28 AM

Donation Alert

Image Link: http://imgur.com/gallery/YQeWejH
Font Style/Link: Stencil
Font Color: Gray with Green outline
Any text fill/boarder?: I would like a clean boarder just to clean it up, maybe a Grey and Green line box
Currency Type: USD
Where do you want text located? In the middle of the GIF. It should say (name) just donated (amount)!
Example (If applicable):
Anything else?:

Follower Alert

Image Link: http://imgur.com/gallery/a03YMIc
Font Style/Link: Broadway
Font Color:  Gray with Blue outline
Any text fill/boarder?: Same Boarder as the donations alert
Where do you want text located? Just above the text in the GIF (Follower Name): (follower name) followed
Example (If applicable):
Anything else?:

Do you have links to the fonts you want?

Title: Re: Custom Notification WorkShop
Post by: mikefromhayward on April 12, 2016, 10:37:51 AM

Follower Alert

Image Link: http://imgur.com/gallery/h2KDSPx
Font Style/Link: Times New Roman
Font Color: Red
Any text fill/boarder?:  A thin white border
Where do you want text located? (Follower Name): centered underneath the image 
Example (If applicable): Thanks for the follow (follower name)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 12, 2016, 11:54:02 AM

Requested by: mikefromhayward

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1000
Height: 650

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 960px !important;
height: 540px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url("http://i.imgur.com/h2KDSPx.gif") !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 530px !important;
margin-left: 100px !important;
width: 800px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: Times New Roman !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
text-shadow: 10px white !important;
}

.followname:before {
content: "Thanks for the follow, " !important;
}

.followname:after {
content: "!" !important;
}

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

(http://puu.sh/ofbxX/41d2b4ed04.png)

Title: Re: Custom Notification WorkShop
Post by: mikefromhayward on April 12, 2016, 03:00:00 PM

I'm having some trouble adding this to Xsplit. I added the source, pasted in the css and it still shows the default notification. I'm not sure what to do.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 12, 2016, 03:22:32 PM

Quote from: mikefromhayward on April 12, 2016, 03:00:00 PM

I'm having some trouble adding this to Xsplit. I added the source, pasted in the css and it still shows the default notification. I'm not sure what to do.

It is the CSS, I fixed it in the post. Basically xSplit likes " while OBS likes '

Title: Re: Custom Notification WorkShop
Post by: mikefromhayward on April 12, 2016, 03:28:43 PM

It's working, thanks a bunch, it looks great!

Title: Re: Custom Notification WorkShop
Post by: SeanKushery423 on April 13, 2016, 01:16:30 AM

Follower Alert

Image Link: http://i.imgur.com/poRMnCK.png
Font Style/Link: Berlin Sans FB Demi   http://fontsgeek.com/fonts/Berlin-Sans-FB-Demi-Bold
Font Color: Grey, Green, Navy Blue (match logo)
Any text fill/boarder?: I would like a box with a designed edge. Clean is really all I need
Where do you want text located? (Follower Name): Center but to the right of the logo
Example (If applicable):
Anything else?: I would like it to say (Follower Name) has joined The Social Club!

Donation Alerts

Image Link: http://i.imgur.com/poRMnCK.png
Font Style/Link: Berlin Sans FB Demi http://fontsgeek.com/fonts/Berlin-Sans-FB-Demi-Bold
Font Color: Grey, Green, Navy Blue (match logo)
Any text fill/boarder?: Same as follower, Just a clean box
Currency Type: USD $$
Where do you want text located?(Text Options: Donator Name, Donated [dollar amount] you beautiful creature!
Example (If applicable):
Anything else?:

Sorry for the 2 posts, I realized I wanted it more professional looking, and noticed I forgot links in my first post :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 13, 2016, 05:36:38 AM

@SeanKushery423

I don't really photoshop to include things in the pic. If you want a box, I recommend editing the photo and putting the logo and box around it that you want. I can do the css with just the logo tho.

Title: Re: Custom Notification WorkShop
Post by: SeanKushery423 on April 14, 2016, 04:03:34 AM

Whatever works, I just wanted an alert with the Avatar near it

Title: Re: Custom Notification WorkShop
Post by: SeanKushery423 on April 14, 2016, 04:22:48 AM

Quote from: RepentGamingTV on April 13, 2016, 05:36:38 AM

@SeanKushery423

I don't really photoshop to include things in the pic. If you want a box, I recommend editing the photo and putting the logo and box around it that you want. I can do the css with just the logo tho.

Honestly, anything that matches the color scheme of my avatar will do. Sorry, if its a headache

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 14, 2016, 05:02:13 AM

Requested by: SeanKushery423

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 499px !important;
height: 499px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/poRMnCK.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 170px !important;
margin-left: 500px !important;
width: 700px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: Berlin Sans FB Demi Bold !important;
color: lightgrey !important;
text-transform: capitalize;
-webkit-text-stroke-color: limegreen;
-webkit-text-stroke-width: 1.5px;
text-shadow: 10px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' has joined The Social Club!' !important;
}

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

(http://puu.sh/oh86a/747eb4bb43.png)


Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 499px !important;
height: 499px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/poRMnCK.png') !important;
overflow: ahidden !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;
margin-top: 200px !important;
margin-left: 200px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 50px !important;
font-family: Berlin Sans FB Demi Bold !important;
color: lightgrey !important;
text-transform: capitalize;
-webkit-text-stroke-color: limegreen;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 150px !important;
margin-left: 400px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 50px !important;
font-family: Berlin Sans FB Demi Bold !important;
color: lightgrey !important;
text-transform: capitalize;
-webkit-text-stroke-color: limegreen;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}

.donor:after {
content: ', Donated ' !important;
}

.amount:after {
content: ' you beautiful creature!' !important;
}

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

(http://puu.sh/oh8nn/675c54f06c.png)

Title: Re: Custom Notification WorkShop
Post by: TinyxDestiny on April 22, 2016, 08:44:14 PM

Quote from: RepentGamingTV on February 02, 2015, 03:43:29 AM

I will be working on Custom Notifications for all DeepBot users. Don't expect your notifications to be done right away, since I am doing this for free. Expect up to 48 hour delay for your custom notifications to be done. (It all depends on how busy I am and how many requests I get.) If you want them done faster, you can donate to me, and I will move you to the top of the list. (PM me for details on that.)

Post Below with the following the notifications you need. Here are the layouts:

For image links use Imgur (http://imgur.com/).

Follower Alert:

Code: [Select]

Follower Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Follower Name):
Example (If applicable):
Anything else?:

Donation Alert: (You do not need to include all 3 text options, Just an FYI.)

Code: [Select]

Donation Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Currency Type:
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message)
Example (If applicable):
Anything else?:

Subscriber Alert:

Code: [Select]

Subscriber Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Subscriber Name)
Example (If applicable):
Anything else?:


Follower Alert

Image Link:  http://i.imgur.com/HfdAkqJ.png
Font Style/Link: http://www.dafont.com/lobster.font
Font Color: White
Any text fill/boarder?: Whatever just long it stands out  Maybe border like a twitter blue?
Where do you want text located? (Follower Name): Middle
Example (If applicable): http://i.imgur.com/TgNisYO.png
Anything else?: Thank you Repent!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 23, 2016, 03:10:46 AM

Not sure what is up with the font, but it doesn't seem to work for me. o.o

Requested by: TinyXDestiny

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/HfdAkqJ.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: -70px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Lobster 1.4 !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0.5px;
text-shadow: 10px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://puu.sh/orXEO/13a9aecff6.png)

Title: Re: Custom Notification WorkShop
Post by: TinyxDestiny on April 23, 2016, 03:34:09 AM

That works thank you so much! Going to put it in now!

Title: Re: Custom Notification WorkShop
Post by: TinyxDestiny on April 23, 2016, 03:35:18 AM

If for some reason later I wanted just swap for a gif can I swap the img link?

Title: Re: Custom Notification WorkShop
Post by: TinyxDestiny on April 23, 2016, 03:37:46 AM

I don't know why it comes up a squished. D:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on April 23, 2016, 07:58:06 AM

Quote from: TinyxDestiny on April 23, 2016, 03:37:46 AM

I don't know why it comes up a squished. D:

Yeah. Idk. If you have another font, I can input it, into the CSS.

Uhh yeah, you can switch it out technically, but might want to match sizes with the current image. I can always adjust it with a new image/gif.

Title: Re: Custom Notification WorkShop
Post by: IronPhoenix87 on May 02, 2016, 12:58:16 AM

GameWisp Sub Alert

Image Link: imgur.com/CgQ0CMd.png
Font Style/Link: Comic Sans MS BOLD
Font Color: White - or add any colour easy to read - surprise me if you want
Any text fill/boarder?: no
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): New Subscriber IronPhoenix87 on "Tier" and IronPhoenix87 Re-Subscribed for "sub months" on "tier"
Example (If applicable): N/A
Anything else?: I think that is about it, just the Sub and Re-Sub message

Title: Re: Custom Notification WorkShop
Post by: TheFieryPhoenixTV on May 02, 2016, 09:24:05 AM

Donation:
I am trying to switch my same Twitch Alerts notification for Deepbot to recognize

Image/Gif: https://media.giphy.com/media/amaS2ywWuJsXe/giphy.gif
Font Style: Open Sans
Font Color: Red
Text Fill: No
Alert To Say: User Just Added "Amount" Dollars to the Tip Jar!

Hopefully this is even possible.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 02, 2016, 09:40:24 AM

Requested by: TheFieryPhoenixTV

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 80px !important;
left: 0px !important;
width: 499px !important;
height: 439px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('https://media.giphy.com/media/amaS2ywWuJsXe/giphy.gif') !important;
overflow: ahidden !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;
margin-top: -50px !important;
margin-left: -300px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Open Sans !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -100px !important;
margin-left: -200px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Open Sans !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
 
.donor:after {
content: ' Just Added ';
}

.amount:after{
content: ' Dollars to the Tip Jar!';
}

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

(http://puu.sh/oD5wR/360b6ebd94.png)

Title: Re: Custom Notification WorkShop
Post by: Danetaff on May 11, 2016, 10:39:51 AM

Image Link: http://giphy.com/gifs/wolf-lZ6l2pBjRCmd2
Font Style/Link: Papyrus
Font Color: Red (Like a Burgundy)
Any text fill/boarder?: @user@ has joined the pack! Welcome to the family.
Where do you want text located? (Follower Name): Under image
Example (If applicable):
Anything else?: Would it be possible to have a soundbite of a wolf howl at all? Much appreciate it.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 11, 2016, 10:41:17 AM

Quote from: Danetaff on May 11, 2016, 10:39:51 AM

Image Link: http://giphy.com/gifs/wolf-lZ6l2pBjRCmd2
Font Style/Link: Papyrus
Font Color: Red (Like a Burgundy)
Any text fill/boarder?: @user@ has joined the pack! Welcome to the family.
Where do you want text located? (Follower Name): Under image
Example (If applicable):
Anything else?: Would it be possible to have a soundbite of a wolf howl at all? Much appreciate it.

Do you have a link to the font?

You can add the sound byte yourself. On deepbot go to config Tab > Follower Notification Settings

Title: Re: Custom Notification WorkShop
Post by: Danetaff on May 11, 2016, 08:42:14 PM

The one that I can find for the papyrus font is

http://psdbundle.com/2012/09/papyrus-font-download-free/

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 12, 2016, 04:59:25 AM

Requested by: Danetaff

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 650

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 500px !important;
height: 477px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('https://media.giphy.com/media/lZ6l2pBjRCmd2/giphy.gif') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 460px !important;
margin-left: 10px !important;
width: 500px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Papyrus Regular !important;
color: #900020 !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0px;
text-shadow: 0px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' has joined the pack! Welcome to the family.' !important;
}

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

(http://puu.sh/oOrLn/5e4b7f6dca.png)

Title: Re: Custom Notification WorkShop
Post by: Danetaff on May 12, 2016, 08:56:12 AM

Thank you so much!!! You are awesome!

Title: Re: Custom Notification WorkShop
Post by: Danetaff on May 12, 2016, 09:21:46 AM

Host Alert

Image Link: http://giphy.com/gifs/black-and-white-wolf-O0HhZMRum7ecU
Font Style/Link: http://psdbundle.com/2012/09/papyrus-font-download-free/
Font Color: Red (like Burgundy or maroon again)
Any text fill/boarder?: Has brought in more wolf cubs! Thanks for the host!
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Both Host name and viewers
Example (If applicable): @user@ has brought in (viewercount) wolf cubs! Thanks for the host!
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 12, 2016, 10:21:01 AM

Requested by: Danetaff

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=495&h=311 (Use this link to test it: http://deepbot.tv/notifications/hostnotification.htm?w=495&h=311&test=1 )
Width: 520
Height: 500

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border-radius: 0px !important;
    background-image: url(https://media.giphy.com/media/O0HhZMRum7ecU/giphy.gif) !important;
    background-repeat: no-repeat;
    overflow: visible !important;
}
#host-notification .hostname {
    margin-top: 280px !important;
    text-align: center;
    width: 500px !important;
    font-size: 36px !important;
    font-family: Papyrus Regular !important;
    text-shadow: none !important;
    color: #900020 !important;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 0px !important;
    margin-left: 2px;
    text-shadow: none !important;
    color: #900020 !important;
    border-radius: 50%;
    width: 500px !important;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 0px solid #F00 !important;
    font: 30px Papyrus Regular !important;
    -webkit-transform: rotate(0deg) !important;
}
.hostnumber {
    position: absolute !important;
    margin-top: 360px !important;
    margin-left: -250px !important;
    top: 0 !important;
    font-family: Papyrus Regular !important;
    font-size: 36px !important;
    color: #900020 !important;
    text-shadow: none !important;
    width: 500px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 36px !important;
    line-height: 26px;
    font-family: Papyrus Regular !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: #900020 !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' has brought in' !important;
}
.hostnumber:after {
    content: ' wolf cubs! Thanks for the host!' !important;
}

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

(http://puu.sh/oOJVE/2f6cccbe90.png)

Title: Re: Custom Notification WorkShop
Post by: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 13, 2016, 04:00:05 AM

Quote from: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

Title: Re: Custom Notification WorkShop
Post by: Charanor on May 13, 2016, 04:42:52 AM

Quote from: RepentGamingTV on May 13, 2016, 04:00:05 AM

Quote from: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 13, 2016, 04:55:56 AM

Quote from: Charanor on May 13, 2016, 04:42:52 AM

Quote from: RepentGamingTV on May 13, 2016, 04:00:05 AM

Quote from: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound :) with the message and the name insert the notification :D that will be great

ps: found it as gif :D https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread. :o

Title: Re: Custom Notification WorkShop
Post by: Charanor on May 13, 2016, 05:08:19 AM

Quote from: RepentGamingTV on May 13, 2016, 04:55:56 AM

Quote from: Charanor on May 13, 2016, 04:42:52 AM

Quote from: RepentGamingTV on May 13, 2016, 04:00:05 AM

Quote from: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound :) with the message and the name insert the notification :D that will be great

ps: found it as gif :D https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread. :o

i i see it and edit the post before, sorry haha :D its a donation notification ;D

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 13, 2016, 05:09:59 AM

Quote from: Charanor on May 13, 2016, 05:08:19 AM

Quote from: RepentGamingTV on May 13, 2016, 04:55:56 AM

Quote from: Charanor on May 13, 2016, 04:42:52 AM

Quote from: RepentGamingTV on May 13, 2016, 04:00:05 AM

Quote from: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound :) with the message and the name insert the notification :D that will be great

ps: found it as gif :D https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread. :o

i i see it and edit the post before, sorry haha :D

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

Do you have a link to the font?

Also what currency do you want?

Title: Re: Custom Notification WorkShop
Post by: Charanor on May 13, 2016, 05:15:45 AM

Quote from: RepentGamingTV on May 13, 2016, 05:09:59 AM

Quote from: Charanor on May 13, 2016, 05:08:19 AM

Quote from: RepentGamingTV on May 13, 2016, 04:55:56 AM

Quote from: Charanor on May 13, 2016, 04:42:52 AM

Quote from: RepentGamingTV on May 13, 2016, 04:00:05 AM

Quote from: Charanor on May 12, 2016, 09:08:39 PM

Heyhou,

i want a Notification for myself, have an Video what i want as Notification, what i need to do now? :D

Greetings Charanor

I don't think I can do videos, I can try. I can do a .gif if anything.

yea if you can make an gif thats perfect, https://www.youtube.com/watch?v=BBGEG21CGo0 this video and this sound :) with the message and the name insert the notification :D that will be great

ps: found it as gif :D https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif

Okay and which type of notification is this going to be? Would be easier to follow the format I have the very first post of this thread. :o

i i see it and edit the post before, sorry haha :D

Image/Gif: https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif
Font Style: Metric (German Metrisch)
Font Color: Neon Green (in your profil picture the green is the same)
Text Fill: yes under the picture
Alert To Say: Danke (Name) für deine Donation (Amount)!
 
thats my Stream style for colors or something: https://www.dropbox.com/s/m3acmpjlc3ghep7/Overlay%20world%20of%20tanks.png?dl=0

Do you have a link to the font?

Also what currency do you want?

https://www.microsoft.com/typography/fonts/family.aspx?FID=372

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 13, 2016, 05:27:01 AM

Requested by: Charanor

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 50px !important;
width: 700px !important;
height: 350px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif') !important;
overflow: ahidden !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;
margin-top: 340px !important;
margin-left: -310px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 310px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: 'Danke ';
}
 
.donor:after {
content: ' für deine Donation ';
}

.amount:after{
content: '!';
}

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

(http://puu.sh/oPFeS/6e3379fbcd.png)

Title: Re: Custom Notification WorkShop
Post by: Charanor on May 13, 2016, 06:04:00 AM

Quote from: RepentGamingTV on May 13, 2016, 05:27:01 AM

Requested by: Charanor

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 50px !important;
width: 700px !important;
height: 350px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('https://media.giphy.com/media/3o85xHHIuOXl0QzUWI/giphy.gif') !important;
overflow: ahidden !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;
margin-top: 340px !important;
margin-left: -310px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 310px !important;
margin-left: -220px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Gabriola !important;
color: #39ff14 !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: 'Danke ';
}
 
.donor:after {
content: ' für deine Donation ';
}

.amount:after{
content: '!';
}

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

(http://puu.sh/oPFeS/6e3379fbcd.png)

it is perfect thanx for your work and time! Big thanx! :D

Title: Re: Custom Notification WorkShop
Post by: Spiidermantv on June 05, 2016, 07:58:32 PM

1. Do you still do these custom donation notifications?
2. Can there be an animation besides a gif?
2a. If I can't get an animation besides a gif,
      what is the easiest way to do that?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 05, 2016, 11:40:51 PM

Quote from: Spiidermantv on June 05, 2016, 07:58:32 PM

1. Do you still do these custom donation notifications?
2. Can there be an animation besides a gif?
2a. If I can't get an animation besides a gif,
      what is the easiest way to do that?

1. Yes
2. Technically yes, but honestly depends on what you want. I am not that good with animations. Kind of some basic things here: http://www.w3schools.com/css/css3_animations.asp
2a. I am not really sure. o.o

Title: Re: Custom Notification WorkShop
Post by: Charanor on June 14, 2016, 06:13:49 PM

Follower Alert

Image Link: without text: https://www.dropbox.com/s/cj9v5o6q5s92b8y/follower%20banner.png?dl=0    with text: https://www.dropbox.com/s/y2u0awiqtwhb3k2/followerBanner.png?dl=0
Font Style/Link: http://www.cssfontstack.com/Arial-Black
Font Color: ff0000  Red if you can with an white shine
Any text fill/boarder?: Welcome to the Beard Club!
Where do you want text located? (Follower Name): under the "Welcome..."
Example (If applicable):
Anything else?:  :-*  ;D

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on June 15, 2016, 01:13:38 AM

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1050
Height: 800

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1024px !important;
height: 768px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/M2p6izX.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 300px !important;
margin-left: 300px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0px;
text-shadow: 0 0 5px #ffffff , 0 0 10px #ffffff , 0 0 15px #ffffff , 0 0 20px #ffffff , 0 0 25px #ffffff , 0 0 30px #ffffff , 0 0 35px #ffffff !important;
}

.followname:before {
content: 'WELCOME TO THE BEARD CLUB ' !important;
}

.followname:after {
content: '' !important;
}

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

(http://repentgamingtv.xyz/i/dcf7153c0c.png)

Title: Re: Custom Notification WorkShop
Post by: Charanor on June 15, 2016, 05:11:10 PM

Perfekt!! Thanx for the great work!  :D

Title: Re: Custom Notification WorkShop
Post by: WoodedCobra on July 16, 2016, 06:59:19 PM

Follower Alert

Image Link: http://imgur.com/sLpMtNF
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Center
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/tWVMPQG
Font Style/Link: Arial
Font Color: White
Any text fill/boarder?: No
Currency Type: £
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Donator Name and Amount
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on July 17, 2016, 03:41:38 AM

Requested by: Wooded Cobra

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/sLpMtNF.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 30px !important;
margin-left: 50px !important;
width: 500px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/Fw656qu.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?dur=10000&ccy=%C2%A3
Width: 620
Height: 150

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/tWVMPQG.png') !important;
overflow: ahidden !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;
margin-top: 30px !important;
margin-left: -190px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 34px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 30px !important;
margin-left: -290px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 34px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: 3px !important;
}

.donor:before {
content: '';
}
 
.donor:after {
content: ' - ';
}

.amount:after{
content: '';
}

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

(http://i.imgur.com/AwL60r4.png)

Title: Re: Custom Notification WorkShop
Post by: anthonydh88 on August 16, 2016, 09:22:41 PM

Host Alert
Image Link: http://i.imgur.com/Cv3jzwH.gif
Font Style/Link: http://www.dafont.com/rogue-hero.font?text=DEAD+POOL or anything is fine.
Font Color: white with black outline
What do you want the alert to say? Host Name
                                              Thanks for The Host

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 17, 2016, 03:20:53 AM

Requested by: anthonydh88

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=550&h=450
Width: 640
Height: 500

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}

#host-notification {
    top: 0px;
    left: 100px;
    width: 300px;
    height: 200px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/Cv3jzwH.gif) !important;
    background-repeat: no-repeat;
    overflow: hidden !important;
}
#host-notification .hostname {
    margin-top: 180px !important;
    margin-left: 40px !important;
    text-align: center;
    width: 500px !important;
    font-size: 36px !important;
    font-family: Rogue Hero !important;
    font-weight: regular !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 2px;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 0px !important;
    margin-left: 2px;
    text-shadow: none !important;
    color: #900020 !important;
    border-radius: 50%;
    width: 500px !important;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 0px solid #F00 !important;
    font: 30px Papyrus Regular !important;
    -webkit-transform: rotate(0deg) !important;
}
.hostnumber {
visibility: hidden !important;
    position: absolute !important;
    margin-top: 400px !important;
    margin-left: -250px !important;
    top: 0 !important;
    font-family: Arial !important;
    font-weight: bold !important;
    font-size: 36px !important;
    color: white !important;
    text-shadow: none !important;
    width: 500px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 36px !important;
    line-height: 26px;
    font-family: Arial !important;
    font-weight: bold !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    position: relative !important;
    top: 30px !important;
    margin-left: -330px !important;
    width: 500px !important;
    content: 'Thanks for the host!' !important;
}
.hostnumber:after {
    content: ' viewers!' !important;
}

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

(http://i.imgur.com/tzWnzqR.png)

Title: Re: Custom Notification WorkShop
Post by: tarantism on August 20, 2016, 04:56:30 AM

GameWisp Sub Alert

Image Link: http://i.imgur.com/tQE0nK5.png
Font Style/Link:  Open Sans, 22px
Font Color: #c6b817
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): Sub Name - TwitchUserName     Sub Months - TwitchUserName for NumberOfMonths months!
Example (If applicable): https://gyazo.com/6910c5762843080c49454e8c02670193   https://gyazo.com/b0f180e6fb29ac60d1ea9fe76cd86c7f
Anything else?: No

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 20, 2016, 05:56:37 AM

Requested by: tarantism

GameWisp Sub:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 800
Height: 90

CSS Code:

Code: [Select]

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 762px !important;
  height: 62px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/tQE0nK5.png) !important;
}
 
#sub-notification .subname {
  margin-left: 180px !important;
  padding-top: 2px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 22px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: #c6b817 !important;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 25px !important;
  margin-left: 180px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 22px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: #c6b817 !important;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: ' months!';
  color: white !important;
}
 
#sub-notification .newsubmsg::after {
  content: '' !important;
}

#sub-notification .submonths::before{
  content: ' for ';
  color: white !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/wbGiy5q.png)

Title: Re: Custom Notification WorkShop
Post by: tarantism on August 20, 2016, 08:25:52 AM

What if a user has a really long username, when testing it overlapped over the "For X Months" part. Also is there no way to get the user's name perfectly center?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 20, 2016, 11:32:59 AM

I can make the name centered for both subs/resubs. But for resubs, Idk where to put the for x months! I can throw it far right, but yeah.

Title: Re: Custom Notification WorkShop
Post by: tarantism on August 20, 2016, 11:49:56 AM

what about underneath?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 20, 2016, 11:34:22 PM

Like underneath the name? Or underneath the image?

Title: Re: Custom Notification WorkShop
Post by: tarantism on August 20, 2016, 11:43:33 PM

Underneath the name, both of the text centered.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 21, 2016, 12:21:17 AM

Quote from: tarantism on August 20, 2016, 11:43:33 PM

Underneath the name, both of the text centered.

Updated post with the CSS Code/Image: http://deepbot.deep.sg/forums/index.php?topic=2704.msg36292#msg36292

Title: Re: Custom Notification WorkShop
Post by: tarantism on August 21, 2016, 01:08:07 AM

I guess there would be no way to apply a completely different style for when someone subscribes and when someone resubs?

What I mean is it looks like the way it's setup is you have a style set up for when the sub, but when the resub you just sort of "append" a new style onto what you already have rather then having a new style altogether.

Does this sound right, or does it not make sense at all lol?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 21, 2016, 01:23:33 AM

What happens is it just "adds for x months!" for resubs. So it just gets everything for a sub, and for a resub, it just adds the words. :/

Title: Re: Custom Notification WorkShop
Post by: tarantism on August 21, 2016, 01:40:06 AM

Oh. Well what you did so far was awesome. The only thing I'm looking for at this point is for the style of the .subname to change from when to subscribe compared to when the resub

Title: Re: Custom Notification WorkShop
Post by: dommiers on August 21, 2016, 05:47:07 PM

GameWisp Sub Alert

Image Link: http://imgur.com/a/XbrHT
Font Style/Link: RuneScape UF (Link: http://www.dafont.com/runescape-uf.font )
Font Color: Yellow
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): "user Has just subscribed!" or "user Has just subscribed for x months!"
Anything else?: Text underneath pic, solid colour background so i can colour key it, thanks!


Follower alert

Image Link: http://imgur.com/a/XbrHT
Font Style/Link:  RuneScape UF (Link: http://www.dafont.com/runescape-uf.font )
Font Color: Yellow
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): "user followed!"
Anything else?: Text underneath pic, solid colour background so i can colour key it, thanks!


Donation Alert

Image Link: http://imgur.com/a/XbrHT
Font Style/Link:  RuneScape UF (Link: http://www.dafont.com/runescape-uf.font )
Font Color: Yellow
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): "user donated X! (Donation message)"
Anything else?: Text underneath pic, solid colour background so i can colour key it, thanks!
Modify message

Title: Re: Custom Notification WorkShop
Post by: TheRealAlixe on August 21, 2016, 11:09:57 PM

Dommiers   Here is the follower CSS

Code: [Select]

body {
                background-color: transparent ;
                font-family: 'RuneScape UF' ;
                font-weight: bold ;
                color: yellow ;
            }

            #follow-notification {
                display: none ;
                position: absolute ;
                top: 0px ;
                left: 0px ;
                width: 500px ;
                height: 500px ;
                border-radius: 10px ;
            }
            #follow-notification .image {
                background-image: url("http://i.imgur.com/bdKhASI.jpg") ;
                background-size: 250px 150px ;
                background-repeat: no-repeat ;
                background-position: center ;
                width: 500px ;
                height: 150px ;
            }
            #follow-notification .followname {
                text-align: center ;
            }

            #follow-notification .header {
                text-align: center ;
            }

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 22, 2016, 12:17:50 AM

Requested by:  dommiers

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 150px !important;
width: 500px !important;
height: 150px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/bdKhASI.jpg') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute;
margin-top: 210px !important;
margin-left: -130px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 32px !important;
font-family: Runescape UF !important;
color: yellow !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 150px !important;
margin-left: -420px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 32px !important;
font-family: Runescape UF !important;
color: yellow !important;
text-transform: capitalize;
-webkit-text-stroke-color: yellow;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 120px !important;
margin-left: -280px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 32px !important;
font-family: Runescape UF !important;
color: yellow !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

.donor:before {
content: '';
}
 
.donor:after {
content: ' donated ';
}

.amount:after{
content: '!';
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

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

(http://i.imgur.com/aJjnmFW.png)


GameWisp Sub:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 650
Height: 400

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 150px !important;
  width: 500px !important;
  height: 150px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/bdKhASI.jpg) !important;
  background-size: 250px 150px !important;
}
 
#sub-notification .subname {
  margin-left: -90px !important;
  padding-top: 160px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Runescape UF !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: yellow !important;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 190px !important;
  margin-left: -90px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Runescape UF !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: yellow !important;
}
 
#sub-notification .newsubmsg {
  position: absolute;
  top: 210px;
  margin-left: -90px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 32px !important;
  font-family: Runescape UF !important;
  font-weight: bold !important;
  text-shadow: none !important;
  color: yellow !important;
}
 
#sub-notification .submonths::after {
  content: ' months!';
}
 
#sub-notification .newsubmsg::after {
  content: ' has just subscribed!' !important;
}

#sub-notification .submonths::before{
  content: ' has just subscribed for ';
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/9OoWA6S.png)

Title: Re: Custom Notification WorkShop
Post by: skunkodor on August 24, 2016, 10:03:37 AM

GameWisp Sub Alert

Image Link: https://media.giphy.com/media/mFmuXkziY2RsQ/giphy.gif
Font Style/Link:arial styling
Font Color:white
Any text fill/boarder?:black border
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): Sub name and months/new sub
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on August 24, 2016, 11:55:07 AM

Requested by: skunkodor

GameWisp Sub:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 650
Height: 400

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 150px !important;
  width: 500px !important;
  height: 450px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(https://media.giphy.com/media/mFmuXkziY2RsQ/giphy.gif) !important;
  background-size: 350px 220px !important;
}
 
#sub-notification .subname {
  margin-left: -60px !important;
  padding-top: 230px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Arial !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 260px !important;
  margin-left: -60px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Arial !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
}
 
#sub-notification .newsubmsg {
  position: absolute;
  top: 280px;
  margin-left: -60px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 32px !important;
  font-family: Arial !important;
  font-weight: bold !important;
  text-shadow: none !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
}
 
#sub-notification .submonths::after {
  content: ' months!';
}
 
#sub-notification .newsubmsg::after {
  content: 'New Subscriber' !important;
}

#sub-notification .submonths::before{
  content: '';
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/ltZre5L.png)

Title: Re: Custom Notification WorkShop
Post by: skunkodor on September 03, 2016, 10:22:54 AM

Donation Alert

Image Link:http://i.makeagif.com/media/9-03-2016/_548Tn.gif
Font Style/Link:Generic Arial
Font Color:White
Any text fill/boarder?:
Currency Type:Tips $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount):
Example (If applicable): http://deepbot.tv/notifications/donationnotification2.htm for the font similarity
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 03, 2016, 11:36:40 AM

Quote from: skunkodor on September 03, 2016, 10:22:54 AM

Donation Alert

Image Link:http://i.makeagif.com/media/9-03-2016/_548Tn.gif
Font Style/Link:Generic Arial
Font Color:White
Any text fill/boarder?:
Currency Type:Tips $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount):
Example (If applicable): http://deepbot.tv/notifications/donationnotification2.htm for the font similarity
Anything else?:

What do you want on the notification? Like Donor's Name? Amount? Donation Message?

Title: Re: Custom Notification WorkShop
Post by: skunkodor on September 03, 2016, 01:09:01 PM

I'm sorry I thought I corrected it. I want just the name and amount. I have text to speech set up for the message portion.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 03, 2016, 01:17:35 PM

Requested by: skunkodor

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 60px !important;
width: 320px !important;
height: 240px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.makeagif.com/media/9-03-2016/_548Tn.gif') !important;
overflow: ahidden !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;
margin-top: 260px !important;
margin-left: -350px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 220px !important;
margin-left: -160px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

.donor:before {
content: '';
}
 
.donor:after {
content: '';
}

.amount:after{
content: '';
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

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

(http://i.imgur.com/fXklgu2.png)

Title: Re: Custom Notification WorkShop
Post by: skunkodor on September 03, 2016, 01:23:13 PM

The previous sub alert one made like this is working, but this particular one is not appearing in obs for me. I have deleted and created a new clr input.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 03, 2016, 01:24:53 PM

Using OBS Classic or Studio?

Also just noticed I messed up on the post putting the wrong info for the URL. xD

Title: Re: Custom Notification WorkShop
Post by: skunkodor on September 03, 2016, 01:31:00 PM

The change in url fixed it. Thanks!

Title: Re: Custom Notification WorkShop
Post by: FSHSchmo on September 05, 2016, 01:12:52 AM

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 05, 2016, 02:12:18 AM

Quote from: FSHSchmo on September 05, 2016, 01:12:52 AM

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Will work on it when I get back from work. What font do you want me to use? Any specific font color? I take it, you want all the names and things just right of the dice in the image?

Title: Re: Custom Notification WorkShop
Post by: FSHSchmo on September 05, 2016, 02:15:04 AM

Quote from: RepentGamingTV on September 05, 2016, 02:12:18 AM

Quote from: FSHSchmo on September 05, 2016, 01:12:52 AM

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Will work on it when I get back from work. What font do you want me to use? Any specific font color? I take it, you want all the names and things just right of the dice in the image?

Chiller font, and I leave the color up to you, whichever looks best and yes, to the right of the dice.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 05, 2016, 11:36:54 AM

Quote from: FSHSchmo on September 05, 2016, 02:15:04 AM

Quote from: RepentGamingTV on September 05, 2016, 02:12:18 AM

Quote from: FSHSchmo on September 05, 2016, 01:12:52 AM

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Will work on it when I get back from work. What font do you want me to use? Any specific font color? I take it, you want all the names and things just right of the dice in the image?

Chiller font, and I leave the color up to you, whichever looks best and yes, to the right of the dice.

Do you have a link to the font?

Title: Re: Custom Notification WorkShop
Post by: hossagno on September 29, 2016, 08:17:13 AM

Hello, first off I'd like to say to RepentGamingTV that he's an awesome guy for doing this custom css things for people. I'm giving you a heads up i'm gonna try make my own donation and follow image in photoshop, so i would like to know what to take in mind before starting so you have an easier job coding this?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on September 29, 2016, 10:32:47 AM

This is all you really should know. Dimensions do not matter, but it is whatever you want to fit your stream. I can't do animations (at least I am not good at them).

The image definitely needs to be .png if you want to avoid transparent areas going totally white if it was .jpg.

For uploading your images use Imgur (http://imgur.com/).

Follower Alert:

Code: [Select]

Follower Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Follower Name):
Example (If applicable):
Anything else?:

Donation Alert: (You do not need to include all 3 text options, Just an FYI.)

Code: [Select]

Donation Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Currency Type:
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message):
Example (If applicable):
Anything else?:


Title: Re: Custom Notification WorkShop
Post by: hossagno on October 03, 2016, 08:28:47 PM

Alright, had a busy weekend and will see what I can produce this week :) may I ask if you are also the guy who scripted some mini-games for the deepbot?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 04, 2016, 04:30:19 AM

The built in ones? No, that is the Dev.

The ones from the wiki, that was mostly iiNinetails, but if you need help I can help.

Title: Re: Custom Notification WorkShop
Post by: SurgeMMO on October 07, 2016, 12:56:25 AM

I was wondering if I can get a full set of custom Notifications? I was hoping a Red Dwarf style?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 08, 2016, 02:27:28 AM

Quote from: SurgeMMO on October 07, 2016, 12:56:25 AM

I was wondering if I can get a full set of custom Notifications? I was hoping a Red Dwarf style?

If you have the images, I can do the CSS. I am not a graphic artist, just here to do implement any images into notifications. :)

Title: Re: Custom Notification WorkShop
Post by: SanguineJackal on October 15, 2016, 10:47:10 AM

I'm sure you're super duper busy, but if you have a few minutes to do a Follow/Host/Gamewisp sub CSS I'd be very much appreciative.

I have two animations (sub and host are the same animation) as GIFs and a custom font. The links on that are strange so let me know if I need to do an alternative!

Code: [Select]

Follower Alert

Image Link: http://imgur.com/RcaJyyr
Font Style/Link: Hyper Light Drifter (Original DL: https://mega.nz/#!6FBmXQhK!ZReRAQmeNcuP7w3n_LJMcejDbb1t2-hISVeBqpvIJ2w    DropboxDL: https://www.dropbox.com/s/dtbppulkdbzpuxv/Hyper%20Light%20Drifter%20Menu%20Text.ttf?dl=0 )
Font Color: #FF69B4
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Centered
Example (If applicable):
Anything else?:

Code: [Select]

Host Alert

Image Link: http://imgur.com/Chs27GR
Font Style/Link: Hyper Light Drifter (Original DL: https://mega.nz/#!6FBmXQhK!ZReRAQmeNcuP7w3n_LJMcejDbb1t2-hISVeBqpvIJ2w    DropboxDL: https://www.dropbox.com/s/dtbppulkdbzpuxv/Hyper%20Light%20Drifter%20Menu%20Text.ttf?dl=0 )
Font Color:#FF69B4
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): (Host Name) has brought (Amount of Viewers) adventurers with them!
Example (If applicable):
Anything else?:

Code: [Select]

GameWisp Sub Alert

Image Link:  http://imgur.com/Chs27GR
Font Style/Link: Hyper Light Drifter (Original DL: https://mega.nz/#!6FBmXQhK!ZReRAQmeNcuP7w3n_LJMcejDbb1t2-hISVeBqpvIJ2w    DropboxDL: https://www.dropbox.com/s/dtbppulkdbzpuxv/Hyper%20Light%20Drifter%20Menu%20Text.ttf?dl=0 )
Font Color: #FF69B4
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): (Sub Name) has joined the core party for (Sub months) as a (Sub Tier)!
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on October 15, 2016, 01:35:13 PM

Requested by: SanguineJackal

Follower:

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

CSS Code:

Code: [Select]

body {
background-color: transparent;
color: white;
}

#follow-notification {
display: none;
position: absolute !important;
top: 0px !important;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-image: url(http://i.imgur.com/RcaJyyr.gif) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

#follow-notification .followname {
  margin-left: 500px !important;
  margin-top: 900px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 38px !important;
  font-family: Hyper Drifter Menu Text !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: #FF69B4 !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

#follow-notification .header {
display: none !important;
}

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

(http://i.imgur.com/tJaxdQ2.png)

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=1920&h=1080
Width: 1980
Height: 1120

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}

#host-notification {
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 1080px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/Chs27GR.gif) !important;
    background-repeat: no-repeat;
    overflow: hidden !important;
}
#host-notification .hostname {
    margin-top: 700px !important;
    margin-left: 520px !important;
    text-align: center;
    width: 500px !important;
    font-size: 26px !important;
    font-family: Hyper Drifter Menu Text !important;
    font-weight: bold !important;
    text-shadow: 2px 2px #000 !important;
    color: #FF69B4 !important;
    text-transform: capitalize !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 0px !important;
    margin-left: 2px;
    text-shadow: none !important;
    color: #900020 !important;
    border-radius: 50%;
    width: 500px !important;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 0px solid #F00 !important;
    font: 30px Papyrus Regular !important;
    -webkit-transform: rotate(0deg) !important;
}
.hostnumber {
    position: absolute !important;
    margin-top: 840px !important;
    margin-left: 180px !important;
    top: 0 !important;
    font-family: Hyper Drifter Menu Text !important;
    font-weight: normal !important;
    font-size: 26px !important;
    color: #FF69B4 !important;
    text-shadow: 1px 1px #000 !important;
    width: 700px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 36px !important;
    line-height: 26px;
    font-family: Arial !important;
    font-weight: bold !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' has brought ' !important;
}
.hostnumber:after {
    content: ' adventurers with them!' !important;
}

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

(http://i.imgur.com/foTEsCy.png)

Gamewisp Sub:

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

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden !important;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 1920px !important;
  height: 1080px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/Chs27GR.gif) !important;
}
 
#sub-notification .subname {
  margin-left: 400px !important;
  padding-top: 830px !important;
  width: 700px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 26px !important;
  font-family: Hyper Drifter Menu Text !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: #FF69B4 !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .subtier {
  position: absolute;
  top: 900px !important;
  margin-left: 630px !important;
  width: 455px;
  text-align: center;
  line-height: 42px !important;
  font-size: 26px !important;
  font-family: Hyper Drifter Menu Text !important;
  font-weight: normal !important;
  text-shadow: 1px 1px #000 !important;
  text-transform: capitalize !important;
  color: #FF69B4 !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 900px !important;
  margin-left: 420px !important;
  width: 455px;
  text-align: center;
  line-height: 42px !important;
  font-size: 26px !important;
  font-family: Hyper Drifter Menu Text !important;
  font-weight: normal !important;
  text-shadow: 1px 1px #000 !important;
  text-transform: capitalize !important;
  color: #FF69B4 !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: ' months ';
}
 
#sub-notification .newsubmsg::after {
  content: '' !important;
}

#sub-notification .submonths::before{
  content: '';
}

#sub-notification .subname::after {
  content: ' has joined the core party for ' !important;
}

#sub-notification .subtier::before {
  content: ' as a ' !important;
}

#sub-notification .subtier::after {
  content: '!' !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/DuguZAj.png)

Title: Re: Custom Notification WorkShop
Post by: SanguineJackal on October 16, 2016, 05:46:31 AM

You are AMAZEBALLS. Thank you so so so much!!!

Title: Re: Custom Notification WorkShop
Post by: grownathome on October 19, 2016, 06:28:30 AM

Hey! I was wondering if you could help me out with some CSS on a few notifications!

http://imgur.com/a/5r9Xo


There are all of my pictures and the questions you requested that we answer.

Title: Re: Custom Notification WorkShop
Post by: sentinel_infinitus on November 12, 2016, 12:19:04 PM

i know how busy you must be but i would like it if you could do up a notification for me

Follower Alert

Image Link: http://imgur.com/a/fyNGV
Font Style/Link:
Font Color:red
Any text fill/boarder?:border collor #00fff6
Where do you want text located? (Follower Name):under the image centered
Example (If applicable):
Anything else?:i want it centered

also it would be nice if you did all the alerts too they would use the same infermation

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on November 13, 2016, 01:38:11 AM

Requested by: sentinel_infinitus

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 450

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 100px !important;
width: 250px !important;
height: 250px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/1iexz4T.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 240px !important;
margin-left: -20px !important;
width: 300px !important;
font-size: 36px !important;
font-weight: normal !important;
font-family: Arial !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' is now following!' !important;
}

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

(http://i.imgur.com/LHTWD8n.png)


Donation:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 100px !important;
    width: 250px !important;
    height: 250px !important;
    background-image: url(http://i.imgur.com/1iexz4T.png) !important;
    background-repeat: no-repeat;
    background-size: cover;
}
#donor-notification .header {
visibility: hidden;
    color: #37b2e5;
    font-size: 38px;
    font-family: Algerian;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 250px !important;
margin-left: -250px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 36px !important;
font-family: Arial !important;
color: red !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 1px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 215px !important;
margin-left: -160px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 36px !important;
font-family: Arial !important;
color: red !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 1px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

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

(http://i.imgur.com/FTkoyWc.png)


Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=600&h=450
Width: 640
Height: 480

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/1iexz4T.png) !important;
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 220px !important;
    margin-left: -30px !important;
    text-align: center;
    width: 313px;
    font-size: 36px !important;
    font-family: Arial !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: #00fff6;
    -webkit-text-stroke-width: 1px;
    text-transform: capitalize !important;
}
.hostdiv {
visibility: hidden;
}
.hostnumber {
    position: relative;
    top: 11%;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Arial !important;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is now hosting!';
}
.hostnum:after {
    content: '';
}

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

(http://i.imgur.com/r7tEZmd.png)


GameWisp Sub:

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

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden !important;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 150px !important;
  width: 250px !important;
  height: 250px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/1iexz4T.png) !important;
}
 
#sub-notification .subname {
  margin-left: -70px !important;
  padding-top: 250px !important;
  width: 400px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 36px !important;
  font-family: Arial !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: red !important;
  -webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 285px !important;
  margin-left: -90px !important;
  width: 455px;
  text-align: center;
  line-height: 42px !important;
  font-size: 36px !important;
  font-family: Arial !important;
  font-weight: normal !important;
  text-shadow: 1px 1px #000 !important;
  text-transform: capitalize !important;
  color: red !important;
  -webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: ' months ';
}
 
#sub-notification .newsubmsg::after {
  content: '' !important;
}

#sub-notification .submonths::before{
  content: '';
}

#sub-notification .subname::after {
  content: '' !important;
}

#sub-notification .subtier::before {
  content: '' !important;
}

#sub-notification .subtier::after {
  content: '' !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/zCr4mF0.png)

Title: Re: Custom Notification WorkShop
Post by: sentinel_infinitus on November 13, 2016, 07:37:50 AM

thanks for the help

i would also like to note that the hosting one does not go away for some reason

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on November 13, 2016, 09:34:12 AM

Quote from: sentinel_infinitus on November 13, 2016, 07:37:50 AM

thanks for the help

i would also like to note that the hosting one does not go away for some reason

My bad, should have physically tested before giving you the code.

Here is the fixed code (which I fixed in my previous post as well):

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/1iexz4T.png) !important;
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 220px !important;
    margin-left: -30px !important;
    text-align: center;
    width: 313px;
    font-size: 36px !important;
    font-family: Arial !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: #00fff6;
    -webkit-text-stroke-width: 1px;
    text-transform: capitalize !important;
}
.hostdiv {
visibility: hidden;
}
.hostnumber {
    position: relative;
    top: 11%;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Arial !important;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is now hosting!';
}
.hostnum:after {
    content: '';
}


Title: Re: Custom Notification WorkShop
Post by: SpontaneousJ on December 05, 2016, 01:00:18 AM

I have some css code that works for my all my alerts through streamlabels, but I want to be able to have the same alert for gamewisp.  When I put the gamewisp link in url
(http://deepbot.tv/notifications/gwnotification.htm) and then my CSS below, it just brings up the deepbot webpage.  Is there something in the css that needs changed to work with this type of integration?

<b style="background: rgba(39,61,53, 0.8)" id="line"><b id="mainText">{name}</b><b id="subText">has just subscribed!</b></b>

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }html, body {  margin: 0;  padding: 0;}  #widget, #body, #alert-box, #wrap, #alert-text-wrap, #alert-text{  position: relative;  overflow: hidden;  width: 1920px;  height: 1080px;  top: 0;  left: 0;  opacity: 1;}#alert-box.hidden, .hidden {  opacity: 1;}#line {  width: 0;  height: 0;  position: absolute;  top: 400px;  left: 50%;  margin-left: 0;  display: block;  -webkit-transform: rotate(-5deg);          transform: rotate(-5deg);  opacity: 0;  -webkit-animation: lineIn 0.2s .6s forwards,              lineGrow 0.4s 1s forwards,             linehide 0.5s 6.7s forwards;          animation: lineIn 0.2s .6s forwards,              lineGrow 0.4s 1s forwards,             linehide 0.5s 6.7s forwards; }@-webkit-keyframes lineIn {  0% {width: 0; height: 0px;}  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}}@keyframes lineIn {  0% {width: 0; height: 0px;}  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}}@-webkit-keyframes lineGrow {  0% {}  100% {height: 200px; top: 300px;}}@keyframes lineGrow {  0% {}  100% {height: 200px; top: 300px;}}@-webkit-keyframes linehide {  0% {height: 200px;top: 300px;}  100% {height: 0px; top: 400px;}}@keyframes linehide {  0% {height: 200px;top: 300px;}  100% {height: 0px; top: 400px;}}#mainText {  text-align: center;  font-size: 100px;  width: 2200px;  display: block;  line-height: 100px;  text-indent: -3000px;  position: absolute;  top: 30px;  white-space: nowrap;  opacity: 0;  font-family: "BigNoodleTitling", sans-serif;  font-style: italic;  text-transform: uppercase;  display: block !important;  position: absolute !important;  -webkit-animation: textIn 0.4s 1.4s forwards,             textTravel 4.6s 1.8s linear forwards;          animation: textIn 0.4s 1.4s forwards,             textTravel 4.6s 1.8s linear forwards;}@-webkit-keyframes textIn {  0% {text-indent: -3000px;opacity: 1;}  100% {text-indent: -20px;opacity: 1;} }@keyframes textIn {  0% {text-indent: -3000px;opacity: 1;}  100% {text-indent: -20px;opacity: 1;} }@-webkit-keyframes textTravel {  0% {text-indent: -20px;}  90% {text-indent: 20px;}  95% {text-indent: 3000px;}   100% {text-indent: 3000px;} }@keyframes textTravel {  0% {text-indent: -20px;}  90% {text-indent: 20px;}  95% {text-indent: 3000px;}   100% {text-indent: 3000px;} }#subText {  text-align: center;  font-size: 40px;  width: 2200px;  display: block;  line-height: 40px;  text-indent: 3000px;  position: absolute;  bottom: 30px;  white-space: nowrap;  opacity: 0;  font-family: "BigNoodleTitling", sans-serif;  font-style: italic;  text-transform: uppercase;  display: block !important;  position: absolute !important;  -webkit-animation: tagIn 0.4s 1.4s forwards,             tagTravel 4.6s 1.8s linear forwards;          animation: tagIn 0.4s 1.4s forwards,             tagTravel 4.6s 1.8s linear forwards;}@-webkit-keyframes tagIn {  0% {text-indent: 3000px;opacity: 1;}   100% {text-indent: 20px;opacity: 1;} }@keyframes tagIn {  0% {text-indent: 3000px;opacity: 1;}   100% {text-indent: 20px;opacity: 1;} }@-webkit-keyframes tagTravel {  0% {text-indent: 20px;}  90% {text-indent: -20px;}  95% {text-indent: -3000px;}   100% {text-indent: -3000px;}}@keyframes tagTravel {  0% {text-indent: 20px;}  90% {text-indent: -20px;}  95% {text-indent: -3000px;}   100% {text-indent: -3000px;} }

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on December 05, 2016, 01:16:18 AM

Well there is a layout/guide to follow. So you would have to put your CSS into the one below. May have to overwrite some of the lines and add !important; at the end so it takes effect.

http://wiki.deepbot.tv/widgets#gamewisp_notification

Code: [Select]

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 670px;
  height: 200px;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://deepbot.tv/notifications/images/gwnotice.png);
}
 
#sub-notification .subname {
  margin-left: 150px;
  padding-top: 30px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 32px;
  font-family: Verdana;
  text-shadow: 2px 2px 1px #FFF;
  text-transform: uppercase;
  color: ##FF0000;
}
 
#sub-notification .subtier {
  position: absolute;
  top: 53px;
  margin-left: 75px;
  width: 380px;
  text-align: left;
  line-height: 14px;
  font-size: 34px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #F00;
  color: ##FF0000;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 65px;
  margin-left: 150px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 30px;
  font-family: Calibri;
  text-shadow: 1px 1px 1px #000;
  color: ##FF0000;
}
 
#sub-notification .newsubmsg {
  position: absolute;
  top: 65px;
  margin-left: 150px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 30px;
  font-family: Calibri;
  text-shadow: 1px 1px 1px #000;
  color: ##FF0000;
}
 
#sub-notification .submonths::after {
  content: " Months!";
}
 
#sub-notification .newsubmsg::after {
  content: "New Sub!";
}
 
#sub-notification .subamount {
  font-family: 'Vollkorn', serif;
  font-size: 28px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: red;
  border: 7px solid rgba(255, 0, 0, 0.5);
  float: left;
  padding: 10px 7px;
  border-radius: 10px;
  opacity: 0.8;
  -webkit-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  position: absolute;
  top: 20%;
  left: 80%;
}


Title: Re: Custom Notification WorkShop
Post by: SpontaneousJ on December 05, 2016, 03:42:46 AM

Quote from: RepentGamingTV on December 05, 2016, 01:16:18 AM

Well there is a layout/guide to follow. So you would have to put your CSS into the one below. May have to overwrite some of the lines and add !important; at the end so it takes effect.

http://wiki.deepbot.tv/widgets#gamewisp_notification

Thanks for the reply, I will look into it!

Title: Re: Custom Notification WorkShop
Post by: hoenens on December 06, 2016, 12:14:25 AM

Hello, can you make myn also?


Donation:
Image link: http://i.imgur.com/9CRkCnI.png
Font Style/Link: Impact
Font Color:n White
Any text fill/boarder?:Black
Currency Type: €
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Name and amount in the gray area centered
Example (If applicable):
Anything else?: That's all.

This is what i use in my follow notification, maye you can make it so that it matches as good as possible?
#follow-notification {
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 500px !important;
   height: 100px !important;
   border-radius: 00px !important;
   background-image: url(URLURLURL) !important;
   background-repeat: no-repeat;
}
 
#follow-notification .followname {
   margin-top: 24px !important;
   margin-left: 0px !important;
   text-align: center !important;
   width: 450px !important;
   font-size: 40px !important;
   font-weight: bold !important;
   font-family: impact !important;
   color: #00cebb !important;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #000000;
   -webkit-text-fill-color: #FFFFFF;
}

Thanks allot!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on December 06, 2016, 12:45:21 AM

Requested by: hoenens


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?dur=10000&ccy=%C2%A3
Width: 500
Height: 170

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 434px !important;
    height: 154px !important;
    background-image: url(http://i.imgur.com/9CRkCnI.png) !important;
    background-repeat: no-repeat;
    background-size: cover;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 80px !important;
margin-left: -250px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 30px !important;
margin-left: -60px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
text-shadow: 2px 2px 1px #000 !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

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

(http://i.imgur.com/2Do84qA.png)

Title: Re: Custom Notification WorkShop
Post by: Backyardis on December 08, 2016, 02:18:17 PM

Hi Team

hoping to get some help with my host notification

Host Alert

Image Link: http://imgur.com/okgYnnw.png
Font Style/Link: Algerian
Font Color:#FFFFFF
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Thank You (Host Name) for bringing (Amount of Viewers) to the stream!
Example (If applicable):

This is the CSS for my follower notification which i want this to mimic as close as possible.

Code: [Select]

#follow-notification {
position: absolute !important;
width: 1100px !important;
height: 400px !important;
background-color: transparent !important;
background-image: url("http://i.imgur.com/SJ6PMNq.png") !important;
background-repeat: no-repeat !important;
}
#follow-notification .leftimage {
position: absolute !important;
}
#follow-notification .followname {
position: absolute !important;
margin-left: 180px  !important;
padding-top: 160px !important;
text-align: center !important;
width: 580px !important;
font-size: 32px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000 !important;
color: #ffffff !important;
}

#follow-notification .header {
}
Also using Xsplit (in case that makes a difference)

Thanks

Backyardis

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on December 09, 2016, 01:22:07 AM

Requested by: Backyardis

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=1100&h=400
Link to Test: http://deepbot.tv/notifications/hostnotification.htm?w=1100&h=400&test=1
Width: 1150
Height: 450

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/okgYnnw.png) !important;
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -50px !important;
    margin-left: 220px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: Algerian !important;
    text-shadow: none !important;
    color: #FFFFFF !important;
    -webkit-text-stroke-color: #00fff6;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 140px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: Algerian !important;
    text-shadow: none !important;
    color: #FFFFFF !important;
    -webkit-text-stroke-color: #00fff6;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
    position: relative;
    top: 70px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian !important;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' for bringing ';
}
.hostname:before {
    content: 'Thank you ';
}
.hostnumber:after {
    content: ' viewers to the stream!';
}

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

(http://i.imgur.com/IwaCVz8.png)

Title: Re: Custom Notification WorkShop
Post by: Backyardis on December 09, 2016, 10:10:20 AM

Thanks so much!

Title: Re: Custom Notification WorkShop
Post by: anthonydh88 on December 11, 2016, 06:33:25 AM

Follow Notification
Image Link: Image Link: http://imgur.com/gallery/L8nT7
What do you want the alert to say? Followers Name
Font Color : Orange/yellow
Font Outline: Black
Transparent Background

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on December 11, 2016, 06:59:24 AM

Requested by: anthonydh88

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 720
Height: 480

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 720px !important;
height: 480px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/PvPwm5t.gif) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 190px !important;
margin-left: 300px !important;
width: 300px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: Impact !important;
color: orange !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/2zm4atn.png)

Title: Re: Custom Notification WorkShop
Post by: YBpoor69 on January 12, 2017, 03:42:13 PM

ALL IMAGES ARE 600 X 200 LANDSCAPE

Follower Alert

Image Link: http://imgur.com/rM5DK7Z
Font Style/Link: Gill San MT http://fontsforweb.com/font/show?id=1416
Font Color: White
Any text fill/boarder?: NO
Where do you want text located? (Follower Name): Centered in the black box
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/afLVlgV
Font Style/Link: Gills Sans MT http://fontsforweb.com/font/show?id=1416
Font Color: White
Any text fill/boarder?: NO
Currency Type: Gill Sans MT
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Donator Name: $donation amount (centered in black box)
Example (If applicable):
Anything else?:

GameWisp Sub Alert

Image Link: http://imgur.com/esCdlAU
Font Style/Link: Gill Sans MT
Font Color: White
Any text fill/boarder?:NO
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): Sub Name for Sub Months (centered in black box)
Example (If applicable):
Anything else?:

Host Alert

Image Link: http://imgur.com/e1d7jXL
Font Style/Link: Gill Sans MT
Font Color: White
Any text fill/boarder?: NO
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Host name with amount of veiwers (centered in the black box)
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 13, 2017, 01:44:33 AM

Requested by: YBpoor69

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 650
Height: 250

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 600px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/rM5DK7Z.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 80px !important;
margin-left: 230px !important;
width: 300px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: 33535gillsansmt !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/Asf4uiA.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?dur=10000
Width: 650
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 600px !important;
    height: 200px !important;
    background-image: url(http://i.imgur.com/afLVlgV.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 90px !important;
margin-left: -210px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: 33535gillsansmt !important;
color: white !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 60px !important;
margin-left: -20px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: 33535gillsansmt !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: '' ;
}

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

(http://i.imgur.com/x7pKiPm.png)

Gamewisp:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 650
Height: 250

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden !important;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 600px !important;
  height: 200px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/esCdlAU.png) !important;
  background-size: contain !important;
}
 
#sub-notification .subname {
  margin-left: 220px !important;
  padding-top: 80px !important;
  width: 300px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: 33535gillsansmt !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  margin-left: 220px !important;
  padding-top: 50px !important;
  width: 300px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: 33535gillsansmt !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: #00fff6;
-webkit-text-stroke-width: 0px;
}
 
#sub-notification .newsubmsg {
 position: absolute;
  top: 120px !important;
  margin-left: 150px;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: 33535gillsansmt !important;
  text-shadow: none !important;
  color: white !important;
}
 
#sub-notification .submonths::after {
  content: ' months!' !important;
}
 
#sub-notification .newsubmsg::after {
  content: ' New Sub! ' !important;
}

#sub-notification .submonths::before{
  content: ' for ';
}

#sub-notification .subname::after {
  content: '' !important;
}

#sub-notification .subtier::before {
  content: '' !important;
}

#sub-notification .subtier::after {
  content: '' !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/P0DvVcP.png)
(http://i.imgur.com/qxu6Vbj.png)

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200
Width: 650
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/e1d7jXL.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 50px !important;
    margin-left: 120px !important;
    text-align: center;
    width: 450px !important;
    font-size: 28px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 0px !important;
    margin-left: 150px !important;
    text-align: center;
    width: 450px !important;
    font-size: 28px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
    position: relative;
    top: 120px !important;
    left: -30px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' with ';
}
.hostname:before {
    content: '';
}
.hostnumber:after {
    content: ' viewers!';
}

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

(http://i.imgur.com/cdzYhM0.png)

Title: Re: Custom Notification WorkShop
Post by: OldRustyBones on January 16, 2017, 12:01:20 PM

Host Alert

Image Link: http://i.imgur.com/N7Afema.gif
Width: 1280px
Height: 720px
Font Style/Link: BigNoodleTitling    (  @import url(http://db.onlinewebfonts.com/c/52629e481c4d4df7a9783ed08bdecdef?family=BigNoodleTitling);  )
Font Color: #FFFEE7
Any text fill/boarder?: None
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): @user@ is summoning more skeletons for us! @numviewers@
Example (If applicable): exact layout as this one. http://i.imgur.com/vU56LtV.jpg
Anything else?:

After getting every other notification to work properly the host notification has stumped me and I've run out of patience. The issue I was running into was that the actual alert wouldn't show, but chat messages and audio would play perfectly fine. !important tags didn't even get it to show. Tried resizing and it still wouldn't show, so please, please, handle this one for me! Thanks in advance.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 17, 2017, 10:11:11 AM

Requested by: OldRustyBones

[b[Host:[/b]

Link: http://deepbot.tv/notifications/hostnotification.htm?w=1280&h=720
Width: 1300
Height: 740

CSS Code:

Code: [Select]

@font-face {font-family: 'BigNoodleTitling);';
    src: url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.eot');
    src: url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.eot?#iefix') format('embedded-opentype'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.woff2') format('woff2'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.woff') format('woff'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.ttf') format('truetype'),
    url(http://db.onlinewebfonts.com/t/52629e481c4d4df7a9783ed08bdecdef.svg#BigNoodleTitling);') format('svg');
}

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/N7Afema.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 300px !important;
    margin-left: 620px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: BigNoodleTitling !important;
    text-shadow: none !important;
    color: #FFFEE7 !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 0px !important;
    margin-left: 150px !important;
    text-align: center;
    width: 450px !important;
    font-size: 36px !important;
    font-family: BigNoodleTitling !important;
    text-shadow: none !important;
    color: #FFFEE7 !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
    position: relative;
    top: 420px !important;
    left: 480px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 36px !important;
    line-height: 26px;
    font-family: BigNoodleTitling !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: #FFFEE7 !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is summoning more skeletons for us! ';
}
.hostname:before {
    content: '';
}
.hostnumber:after {
    content: '';
}

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

(http://i.imgur.com/jAscV89.png)

Title: Re: Custom Notification WorkShop
Post by: OldRustyBones on January 17, 2017, 11:27:14 AM

Terribly sorry Repentgamingtv, but would you mind using this animation for the icon above? I tried adding it in and using !important to override the animation that's set on the image but it's not working. As I can't find the animation anywhere I cannot edit it out myself. Thank you.

-webkit-keyframes slide {
        0% {top: 600px;}
        10% {top: 600px;}
        25% {top: 0px;}
        75% {top: 0px;}
        100% {top: 600px;}
      }

-webkit-animation: slide 10s;

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 17, 2017, 11:34:03 AM

I don't think the default animation can be removed since it is built into the URL. :/

Title: Re: Custom Notification WorkShop
Post by: OldRustyBones on January 17, 2017, 11:39:49 AM

thanks for the quick reply. I'll see if I can work around it. Thanks again for getting it to work RepentGamingtv

Title: Re: Custom Notification WorkShop
Post by: Blindleader on January 19, 2017, 02:15:26 AM

I'd like follower, donations and gamewisp subs CSS. Nothing fancy, use the following image on all 3.

Follower Alert

Image Link: (http://i.imgur.com/AhWxLCH.png)
Font Style: Artist choice
Font Color: Black
Any text fill/boarder?: white boarder
Where do you want text located? above (Follower Name):
Welcome to the Nuthouse!


GameWisp Sub Alert

Image Link: (http://i.imgur.com/AhWxLCH.png)
Font Style: Artists choice
Font Color: Black
Any text fill/boarder?: white boarder
What do you want the alert to say? Sub Name has subscribed to Sub Tier

Donation Alert

Image Link:(http://i.imgur.com/AhWxLCH.png)
Font Style/Link: You decide, your choice
Font Color: Black
Any text fill/boarder?: white
Currency Type: USD
What do you want the alert to say? Donator Name has added Donation Amount to the stash

Alternate image if the primary isn't working.
(http://i.imgur.com/eyLdP3g.png)

Thank you so much!
Regards,
Blindleader_3AC

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 19, 2017, 02:50:51 AM

Quote from: Blindleader on January 19, 2017, 02:15:26 AM

I'd like follower, donations and gamewisp subs CSS. Nothing fancy, use the following image on all 3.

Follower Alert

Image Link: (http://i.imgur.com/AhWxLCH.png)
Font Style: Artist choice
Font Color: Black
Any text fill/boarder?: white boarder
Where do you want text located? above (Follower Name):
Welcome to the Nuthouse!


GameWisp Sub Alert

Image Link: (http://i.imgur.com/AhWxLCH.png)
Font Style: Artists choice
Font Color: Black
Any text fill/boarder?: white boarder
What do you want the alert to say? Sub Name has subscribed to Sub Tier

Donation Alert

Image Link:(http://i.imgur.com/AhWxLCH.png)
Font Style/Link: You decide, your choice
Font Color: Black
Any text fill/boarder?: white
Currency Type: USD
What do you want the alert to say? Donator Name has added Donation Amount to the stash

Alternate image if the primary isn't working.
(http://i.imgur.com/eyLdP3g.png)

Thank you so much!
Regards,
Blindleader_3AC

Where do you want the text located? To the side of the image? Or above it? Or somewhere else? This is what I have so far:

(http://i.imgur.com/A0S1tRB.png)

(http://i.imgur.com/hfZM6Jw.png)

Title: Re: Custom Notification WorkShop
Post by: Blindleader on January 19, 2017, 03:02:22 AM

Looks great as it is

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 19, 2017, 03:46:38 AM

Requested by: Blindleader

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/AhWxLCH.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 0px !important;
margin-left: 180px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Impact !important;
color: black !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' is now following!' !important;
}

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

(http://i.imgur.com/e9Uyhjk.png)

Donation:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 580px !important;
    height: 110px !important;
    background-image: url(http://i.imgur.com/AhWxLCH.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 30px !important;
margin-left: -160px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: black !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -20px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Impact !important;
color: black !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: ' has added ' ;
}

.amount:after {
content: ' to the stash!' ;
}

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

(http://i.imgur.com/mMXeJ5M.png)

GameWisp:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 600
Height: 150

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden !important;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 580px !important;
  height: 110px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/AhWxLCH.png) !important;
  background-size: contain !important;
}
 
#sub-notification .subname {
  margin-left: 220px !important;
  padding-top: 20px !important;
  width: 300px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 28px !important;
  font-family: Impact !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: black !important;
  -webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .subtier {
 position: absolute;
  top: 50px !important;
  margin-left: 150px;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 28px !important;
  font-family: Impact !important;
  text-shadow: none !important;
  color: black !important;
    -webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .submonths {
visibility: hidden !important;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: '' !important;
}
 
#sub-notification .newsubmsg::after {
  content: '' !important;
}

#sub-notification .submonths::before{
  content: '';
}

#sub-notification .subname::after {
  content: '' !important;
}

#sub-notification .subtier::before {
  content: ' has subscribed to sub tier ' !important;
}

#sub-notification .subtier::after {
  content: '!' !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/WLUgxLs.png)

Title: Re: Custom Notification WorkShop
Post by: Blindleader on January 19, 2017, 04:33:21 AM

Wonderful, thank you so much!

Title: Re: Custom Notification WorkShop
Post by: n008down on January 19, 2017, 10:46:02 PM

request by: n008down

I need your help! I just started streaming again and now wanna use the DeepBot. But my alert is not working fine because i want my own picture in it :/
Thank u so much!!


Follower Alert

Image Link: http://imgur.com/a/BNBQb
Font Style/Link: Arial Bolt
Font Color: red
Any text fill/boarder?: no, just the name
Where do you want text located? (Follower Name): centered under the "new follower"
Example (If applicable):
Anything else?:




Donation Alert

Image Link: http://imgur.com/a/84DNl
Font Style/Link: Arial Bolt
Font Color: Green
Any text fill/boarder?: no
Currency Type: EUR
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): just name and amount. both centered under the "new donator".
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 20, 2017, 12:43:22 AM

Requested by: n008down

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/SgxIzNq.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 135px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Arial !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/3qWw1Fh.png)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%E2%82%AC (You must use this URL if you want it to show in Euros)
Width: 600
Height: 150

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 580px !important;
    height: 110px !important;
    background-image: url(http://i.imgur.com/SR3UXEt.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 40px !important;
margin-left: -260px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: green !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 5px !important;
margin-left: -120px !important;
width: 400px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: green !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: '' ;
}

.amount:after {
content: '' ;
}

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

(http://i.imgur.com/n5HdtgK.png)

Title: Re: Custom Notification WorkShop
Post by: n008down on January 20, 2017, 04:22:47 AM

Thank you so much! :)

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 27, 2017, 06:08:05 AM

i have two pictures that i want animated text of follower and donation in the middle of the pictures is it possible for you to add the cool animation :D like any cool animation would do :D

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 27, 2017, 07:47:00 AM

Quote from: YoungAndDangerous on January 27, 2017, 06:08:05 AM

i have two pictures that i want animated text of follower and donation in the middle of the pictures is it possible for you to add the cool animation :D like any cool animation would do :D

I really don't mess with animations because I am not good at them, but I can try.

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 27, 2017, 11:14:22 PM

im posting the css code i have and if you could implement it with the pictures i want it would be epic :D and i only need the css text to show the name of the guy who followed or donated :D nothing more then the name since the pictures have New Follower & New Donation.

THE CSS CODE BELOW!

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }html, body {  margin: 0;  padding: 0;}  #widget, #body, #alert-box, #wrap, #alert-text-wrap, #alert-text{  position: relative;  overflow: hidden;  width: 1920px;  height: 1080px;  top: 0;  left: 0;  opacity: 1;}#alert-box.hidden, .hidden {  opacity: 1;}#line {  width: 0;  height: 0;  position: absolute;  top: 400px;  left: 50%;  margin-left: 0;  display: block;  -webkit-transform: rotate(-5deg);          transform: rotate(-5deg);  opacity: 0;  -webkit-animation: lineIn 0.2s .6s forwards,              lineGrow 0.4s 1s forwards,             linehide 0.5s 6.7s forwards;          animation: lineIn 0.2s .6s forwards,              lineGrow 0.4s 1s forwards,             linehide 0.5s 6.7s forwards; }@-webkit-keyframes lineIn {  0% {width: 0; height: 0px;}  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}}@keyframes lineIn {  0% {width: 0; height: 0px;}  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}}@-webkit-keyframes lineGrow {  0% {}  100% {height: 200px; top: 300px;}}@keyframes lineGrow {  0% {}  100% {height: 200px; top: 300px;}}@-webkit-keyframes linehide {  0% {height: 200px;top: 300px;}  100% {height: 0px; top: 400px;}}@keyframes linehide {  0% {height: 200px;top: 300px;}  100% {height: 0px; top: 400px;}}#mainText {  text-align: center;  font-size: 100px;  width: 2200px;  display: block;  line-height: 100px;  text-indent: -3000px;  position: absolute;  top: 30px;  white-space: nowrap;  opacity: 0;  font-family: "BigNoodleTitling", sans-serif;  font-style: italic;  text-transform: uppercase;  display: block !important;  position: absolute !important;  -webkit-animation: textIn 0.4s 1.4s forwards,             textTravel 4.6s 1.8s linear forwards;          animation: textIn 0.4s 1.4s forwards,             textTravel 4.6s 1.8s linear forwards;}@-webkit-keyframes textIn {  0% {text-indent: -3000px;opacity: 1;}  100% {text-indent: -20px;opacity: 1;} }@keyframes textIn {  0% {text-indent: -3000px;opacity: 1;}  100% {text-indent: -20px;opacity: 1;} }@-webkit-keyframes textTravel {  0% {text-indent: -20px;}  90% {text-indent: 20px;}  95% {text-indent: 3000px;}   100% {text-indent: 3000px;} }@keyframes textTravel {  0% {text-indent: -20px;}  90% {text-indent: 20px;}  95% {text-indent: 3000px;}   100% {text-indent: 3000px;} }#subText {  text-align: center;  font-size: 40px;  width: 2200px;  display: block;  line-height: 40px;  text-indent: 3000px;  position: absolute;  bottom: 30px;  white-space: nowrap;  opacity: 0;  font-family: "BigNoodleTitling", sans-serif;  font-style: italic;  text-transform: uppercase;  display: block !important;  position: absolute !important;  -webkit-animation: tagIn 0.4s 1.4s forwards,             tagTravel 4.6s 1.8s linear forwards;          animation: tagIn 0.4s 1.4s forwards,             tagTravel 4.6s 1.8s linear forwards;}@-webkit-keyframes tagIn {  0% {text-indent: 3000px;opacity: 1;}   100% {text-indent: 20px;opacity: 1;} }@keyframes tagIn {  0% {text-indent: 3000px;opacity: 1;}   100% {text-indent: 20px;opacity: 1;} }@-webkit-keyframes tagTravel {  0% {text-indent: 20px;}  90% {text-indent: -20px;}  95% {text-indent: -3000px;}   100% {text-indent: -3000px;}}@keyframes tagTravel {  0% {text-indent: 20px;}  90% {text-indent: -20px;}  95% {text-indent: -3000px;}   100% {text-indent: -3000px;} }

http://imgur.com/Ku31JmQ picture 1
http://imgur.com/zP3dSoe picture 2

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 28, 2017, 09:14:31 AM

I am confused on the CSS code, does that have both the follower and donation CSS?

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 28, 2017, 05:05:32 PM

yeah it should have both in there. But you know what, if you can make any type of cool animation that you know u can il be happy. I'm not going to ask for to much :) i'm just happy to get some help so if you could do that it would be wonderful :D

but i found this animation that maybe you could implement. il drop the link to it in here: http://codepen.io/anon/pen/bgYaRr

if you can't do that, any animations will be cool

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 29, 2017, 12:36:52 AM

I could not figure out the CSS animation here: http://codepen.io/anon/pen/bgYaRr but I got the ones in the CSS Code to work.

Requested by: YoungAndDangerous

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=8000 (I recommend setting duration in the Config Tab > Follower Notifications to 8 Seconds near the bottom)
Width: 1100
Height: 450

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1000px !important;
height: 394px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url("http://i.imgur.com/zP3dSoe.png") !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
    width: 0;
    height: 0;
    position: absolute;
    top: 400px;
    left: 50%;
    margin-left: 0;
    display: block;
    font-family: "BigNoodleTitling", sans-serif;
    font-size: 100px;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    opacity: 0;
    -webkit-animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 7.0s forwards;
    animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 7.0s forwards;
}

.followname:before {
content: "" !important;
}

.followname:after {
content: "" !important;
}

@-webkit-keyframes lineIn {
    0% {
        width: 0;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        margin-top: -120px;
        opacity: 1;
        height: 3px;
    }
}
@keyframes lineIn {
    0% {
        width: 0;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        margin-top: -120px;       
        opacity: 1;
        height: 3px;
    }
}
@-webkit-keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@-webkit-keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 800px;
    }
}
@keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 800px;
    }
}

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

I don't really do gifs, so no pic here.


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1100
Height: 450

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 1000px !important;
    height: 394px !important;
    background-image: url("http://i.imgur.com/Ku31JmQ.png") !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
text-align: center;
font-size: 90px;
width: 1000px;
display: block;
line-height: 40px;
text-indent: 800px;
position: absolute;
margin-top: 200px !important;
margin-left: 1250px !important;
white-space: nowrap;
opacity: 0;
font-family: "BigNoodleTitling", sans-serif;
font-style: italic;
text-transform: uppercase;
display: block !important;
position: absolute !important;
-webkit-animation: tagIn 0.4s 0.6s forwards, tagTravel 3.0s 1.9s linear forwards;
animation: tagIn 0.4s 0.6s forwards, tagTravel 3.0s 1.9s linear forwards;
}
#donor-notification .donor {
text-align: center;
font-size: 90px;
width: 1000px;
display: block;
line-height: 40px;
text-indent: 800px;
position: absolute;
margin-top: 150px !important;
margin-left: 1250px !important;
white-space: nowrap;
opacity: 0;
font-family: "BigNoodleTitling", sans-serif;
font-style: italic;
text-transform: uppercase;
display: block !important;
position: absolute !important;
-webkit-animation: tagIn 0.4s 0.6s forwards, tagTravel 1.8s 1.0s linear forwards;
animation: tagIn 0.4s 0.6s forwards, tagTravel 1.8s 1.0s linear forwards;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: "" ;
}

.amount:after {
content: "" ;
}

@-webkit-keyframes tagIn {
    0% {
        text-indent: 500px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@keyframes tagIn {
    0% {
        text-indent: 1000px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@-webkit-keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -2400px;
    }
    100% {
        text-indent: -2500px;
    }
}
@keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -2400px;
    }
    100% {
        text-indent: -2500px;
    }
}

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

I don't really do gifs, so no pic here.

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 29, 2017, 01:25:54 AM

thanks will try it out now :D

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 29, 2017, 06:21:34 AM

its showing other images when i hit the preview button on both donation & follower? i dont get it when i check my image links its the right ones but for some reason it shows a xbox loading follower notification and a crappy donations background picture. nothing like mine? am i doing something wrong or?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 29, 2017, 06:27:16 AM

What URLS are you using in the CLR Browser? ;)

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 29, 2017, 06:30:34 AM

im using the ones you posted
deepbot.tv/notifications/follownotification1.htm?dur=8000
deepbot.tv/notifications/donationnotification2.htm
and i implemented the css codes in each one.

but everytime i hit preview it gives me something thats not mine :D so wondering if the preview is sett to default images ?

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 29, 2017, 06:38:44 AM

And you are putting the CSS into the CSS tab?

Using OBS Classic, Studio, or xSplit?

This is with the same CSS and URLs I posted:

(http://i.imgur.com/amjTBBS.png)

(http://i.imgur.com/gUu2fSU.png)

Title: Re: Custom Notification WorkShop
Post by: YoungAndDangerous on January 29, 2017, 06:41:06 AM

im using Xsplit :D is there a diffrent way there because that looked so cool :D u are amazing :O

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on January 29, 2017, 06:42:06 AM

Quote from: YoungAndDangerous on January 29, 2017, 06:41:06 AM

im using Xsplit :D is there a diffrent way there because that looked so cool :D u are amazing :O

Yeah xSplit hates a few things compared to CSS code for OBS. One sec.

Title: Re: Custom Notification WorkShop
Post by: killakestrelgaming on February 16, 2017, 01:04:40 AM

GameWisp Sub Alert

Image Link:http://i.imgur.com/AL62XVh.gif
Font Style/Link:Diablo heavy
Font Color:red
Any text fill/boarder?:white outline
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): New TeamTGW sub
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: killakestrelgaming on February 16, 2017, 01:10:44 AM

Follower Alert

Image Link: http://imgur.com/6uDnxCm
Font Style/Link: http://fontzone.net/font-details/diablo-heavy
Font Color: Red
Any text fill/boarder?: outline white
Where do you want text located? (Follower Name): just under the head
Example (If applicable): New Team TGW Follower
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 17, 2017, 09:02:48 AM

Will work on this, this weekend.

Title: Re: Custom Notification WorkShop
Post by: kleinkiko on February 21, 2017, 03:59:04 AM

Donation Alert

Image Link: http://imgur.com/a/ktIVm
Font Style/Link: telegrafico
Font Color: Green ( #006738 )
Any text fill/boarder?: No
Currency Type:
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Donator Name, Donation Amount, Message
Example (If applicable): The Text for Name , Amount and Message please under the Pic ( Background transparent by the Text^^)
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 26, 2017, 01:37:25 AM

Requested by: killakestrelgaming

Make sure you have the diablo font installed on your PC.

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 640
Height: 250

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 640px !important;
height: 198px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/6uDnxCm.gif) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 90px !important;
margin-left: 70px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Diablo !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: 'New Team TGW Follower ' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/qOkwO45.png)


Gamewisp:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 650
Height: 450

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden !important;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 512px !important;
  height: 300px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/AL62XVh.gif) !important;
  background-size: contain !important;
}
 
#sub-notification .subname {
  margin-left: 70px !important;
  padding-top: 300px !important;
  width: 400px !important;
  text-align: center;
  line-height: 36px !important;
  font-size: 28px !important;
  font-family: Diablo !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 0px #000 !important;
  text-transform: capitalize !important;
  color: red !important;
  -webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
visibility: hidden !important;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: '' !important;
}
 
#sub-notification .newsubmsg::before {
  content: 'New TeamTGW Sub' !important;
}

#sub-notification .submonths::before{
  content: '';
}

#sub-notification .subname::before {
  content: 'New TeamTGW Sub ' !important;
}

#sub-notification .subtier::before {
  content: '' !important;
}

#sub-notification .subtier::after {
  content: '!' !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

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

(http://i.imgur.com/UVO8D5m.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on February 26, 2017, 01:47:56 AM

Requested by: kleinkiko

I installed the font you want from here: http://www.dafont.com/telegrafico.font

Donation:

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

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

@font-face {
    font-family: Diablo Heavy;
    src: url(diablo_h.ttf),    !important;
}

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 500px !important;
    height: 222px !important;
    background-image: url(http://i.imgur.com/r5FLgR4.gif) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
position: absolute;
margin-top: 300px !important;
margin-left: 10px !important;
width: 500px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 36px !important;
font-family: Telegrafico !important;
color: #006738 !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 235px !important;
margin-left: -280px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 38px !important;
font-family: Telegrafico !important;
color: #006738 !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: white !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 200px !important;
margin-left: -80px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Telegrafico !important;
color: #006738 !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: '' ;
}

.amount:after {
content: '' ;
}

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

(http://i.imgur.com/2955uTY.png)

Title: Custom Notification WorkShop - Follower Notification
Post by: special on March 14, 2017, 06:51:20 AM

Follower Alert

Background Color: transparent
Image Link: http://i.imgur.com/YDfWBaI.gif (repeat)
Font Style/Link: Arial
Font Color: #ffffff
Font Weight: Bold
Font Size: 93px
Font Outline Size: 1px
Font Outline Color: #6441a5
Any text fill/boarder?:
Where do you want text located? (Follower Name): center, exactly over the wood
Example (If applicable): http://imgur.com/7qTUGyG

Thanks in advance

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 14, 2017, 07:14:08 AM

Requested by: special

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 550
Height: 250

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 200px !important;
width: 400px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/YDfWBaI.gif) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 70px !important;
margin-left: 0px !important;
width: 400px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Arial !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-stroke-color: #6441a5;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/oReQHSx.png)

Title: Re: Custom Notification WorkShop
Post by: dr_sim on March 24, 2017, 01:53:37 AM

Follower Alert

Image Link: http://imgur.com/vcNVhVO
Font Style/Link: Courgette (bold)
Font Color: Red
Any text fill/boarder?: No
Where do you want text located? (Follower Name): To the right of the image: Name    Thanks for the follow! (see example)
Example (If applicable): http://imgur.com/Bdcmal5
Anything else?: Image animated. Rounded corners would be cool but no sweat if it is not possible.

Donation Alert

Image Link: http://imgur.com/vcNVhVO
Font Style/Link: Courgette (bold)
Font Color: Red
Any text fill/boarder?: No
Currency Type: $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): Name   Thanks for the $$$ donation! (see example)
Example (If applicable): http://imgur.com/Ze4BABY
Anything else?: Image animated. Rounded corners would be cool but no sweat if it is not possible.

Host Alert

Image Link: http://imgur.com/vcNVhVO
Font Style/Link: Courgette (bold)
Font Color: Red
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): Name    Thanks for hosting the stream! (see example)
Example (If applicable): http://imgur.com/ewGL1Ez
Anything else?: Image animated. Rounded corners would be cool but no sweat if it is not possible.

Thank you!

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 25, 2017, 11:19:28 PM

Do you have a link to the courgette font?

Title: Re: Custom Notification WorkShop
Post by: dr_sim on March 26, 2017, 06:38:54 AM

Here it is on google fonts: https://fonts.google.com/specimen/Courgette

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 26, 2017, 09:10:29 AM

Download/Install the font from this link: http://www.1001freefonts.com/courgette.font

Requested by: dr_sim

Follower:

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

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 160px !important;
height: 160px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 180px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Courgette !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: #6441a5;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' Thanks for the follow!' !important;
}

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

(http://i.imgur.com/GezlFoq.png)


Donation:

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

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    display: none;
}

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 160px !important;
    height: 160px !important;
    background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: 150px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 38px !important;
font-family: Courgette !important;
color: red !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: 150px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 40px !important;
font-family: Courgette !important;
color: red !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: ' Thanks for the ' ;
}

.amount:after {
content: ' donation!' ;
}

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

(http://i.imgur.com/dOvLhdq.png)

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=160&h=160
Width: 600
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -20px !important;
    margin-left: 180px !important;
    text-align: center;
    width: 420px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 34px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: hidden !important;
    position: relative;
    top: 120px !important;
    left: -30px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: '';
}
.hostname:before {
    content: '';
}
.hostdiv:after {
    position: absolute !important;
    content: ' Thanks for hosting the stream!';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}

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

(http://i.imgur.com/aXR6kOU.png)

Title: Re: Custom Notification WorkShop
Post by: dr_sim on March 27, 2017, 01:18:30 AM

Thanks TheNumbLock,

They all look great.

I must have done something funky though with the host css. When I put it into OBS and click OK, "Thanks for hosting the stream" appears and stays on my preview.

With the follow and the donation nothing is visible unless I do a preview.

What am I doing wrong?

Also, is there a preview button somewhere for a host alert that I'm missing? I can't seem to find it.

Thanks

Title: Re: Custom Notification WorkShop
Post by: YBpoor69 on March 27, 2017, 02:00:38 PM

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 28, 2017, 06:48:04 AM

Quote from: dr_sim on March 27, 2017, 01:18:30 AM

Thanks TheNumbLock,

They all look great.

I must have done something funky though with the host css. When I put it into OBS and click OK, "Thanks for hosting the stream" appears and stays on my preview.

With the follow and the donation nothing is visible unless I do a preview.

What am I doing wrong?

Also, is there a preview button somewhere for a host alert that I'm missing? I can't seem to find it.

Thanks

It is something with the CSS. I will have to look into it.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 28, 2017, 06:51:13 AM

Quote from: YBpoor69 on March 27, 2017, 02:00:38 PM

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

Title: Re: Custom Notification WorkShop
Post by: YBpoor69 on March 28, 2017, 11:35:30 AM

Quote from: TheNumbLock on March 28, 2017, 06:51:13 AM

Quote from: YBpoor69 on March 27, 2017, 02:00:38 PM

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

The sub, host, and the donation links aren't working and with the sub alert you posted the wrong link to make it pop out. In deepbot you have preview but thats not working even when I tried putting them in the obs css tab

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 29, 2017, 02:53:44 AM

Quote from: YBpoor69 on March 28, 2017, 11:35:30 AM

Quote from: TheNumbLock on March 28, 2017, 06:51:13 AM

Quote from: YBpoor69 on March 27, 2017, 02:00:38 PM

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

The sub, host, and the donation links aren't working and with the sub alert you posted the wrong link to make it pop out. In deepbot you have preview but thats not working even when I tried putting them in the obs css tab

I will test them again when I get home from work.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 29, 2017, 06:49:43 AM

Quote from: YBpoor69 on March 28, 2017, 11:35:30 AM

Quote from: TheNumbLock on March 28, 2017, 06:51:13 AM

Quote from: YBpoor69 on March 27, 2017, 02:00:38 PM

Hi, Expert
You've made me a alerts already but the sub, host, and the donation alerts links doesn't work for some reason, I was if you can repost them for me. My name is YBpoor69 and my other alerts are on page 26 if you wanted to check out the other ones. Thanks

What links don't work? These are the notifications and they work perfectly for me: http://deepbot.deep.sg/forums/index.php?topic=2704.msg38193#msg38193

The sub, host, and the donation links aren't working and with the sub alert you posted the wrong link to make it pop out. In deepbot you have preview but thats not working even when I tried putting them in the obs css tab

What streaming software are you using? Just tested these in OBS Classic, and works perfectly for me with preview:

Donation:

(http://i.imgur.com/SnaHf4D.png)

Sub:

(http://i.imgur.com/0gJbMym.png)

Host:

(http://i.imgur.com/9ATPkQf.png)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on March 29, 2017, 07:03:59 AM

Quote from: dr_sim on March 27, 2017, 01:18:30 AM

Thanks TheNumbLock,

They all look great.

I must have done something funky though with the host css. When I put it into OBS and click OK, "Thanks for hosting the stream" appears and stays on my preview.

With the follow and the donation nothing is visible unless I do a preview.

What am I doing wrong?

Also, is there a preview button somewhere for a host alert that I'm missing? I can't seem to find it.

Thanks

Fixed the Host notification CSS in the post.

New CSS for Host Notification:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/vcNVhVO.gif) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -20px !important;
    margin-left: 180px !important;
    text-align: center;
    width: 420px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 34px !important;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: hidden !important;
    position: relative;
    top: 120px !important;
    left: -30px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: 33535gillsansmt !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: '';
}
.hostname:before {
    content: '';
}
.hostdiv:after {
    position: absolute !important;
    content: ' Thanks for hosting the stream!';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}


Title: Re: Custom Notification WorkShop
Post by: YBpoor69 on March 31, 2017, 12:53:03 PM

I was using obs classic and it didnt work but now im using studio and its working. Not sure what was going with obs classic, thatnks.

Title: Re: Custom Notification WorkShop
Post by: Father_Bill on May 03, 2017, 03:41:49 PM

Thanks in advance for your assistance and expertise!
Also could you please point me if you can in the direction of instructions on how to install these notifications.

Follower Notification

Image Link: http://imgur.com/Pq2CP9c
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Donation Notification

Image Link: http://imgur.com/K86uDBH
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Cheer Notification

Image Link: http://imgur.com/hBMQshz
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Host Notification

Image Link: http://imgur.com/Ihdy7r8
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Follower Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Peace,

Father Bill Kessler

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 04, 2017, 10:02:08 AM

Will get to these tomorrow afternoon.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 06, 2017, 12:05:24 AM

Requested by: Father_Bill

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 250

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 550px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/Pq2CP9c.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 30px !important;
margin-left: 120px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: normal !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/s1CB3Wm.png)


Donation:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 550px !important;
    height: 200px !important;
    background-image: url(http://i.imgur.com/K86uDBH.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 30px !important;
margin-left: -180px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 30px !important;
margin-left: -120px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

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

(http://i.imgur.com/FQyiaOE.png)

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=550&h=200
Width: 650
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/Ihdy7r8.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -30px !important;
    margin-left: 0px !important;
    text-align: center;
    width: 420px !important;
    font-size: 30px !important;
    font-family: Arial !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 30px !important;
    font-family: Arial !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: visible !important;
    position: relative;
    top: 10px !important;
    left: -100px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Norwester !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: '';
}
.hostnumber:before {
    content: '';
}
.hostnumber:after {
    content: '';
}
.hostdiv:after {
    position: absolute !important;
    content: '';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}

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

(http://i.imgur.com/ldV6VuA.png)


Cheer:

Link: http://deepbot.tv/notifications/cheernotification.htm
Width: 1000
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 50px !important;
    width: 920px !important;
    height: 200px;
    background: url(http://i.imgur.com/hBMQshz.png);
    background-repeat: no-repeat !important !important;
}
.cheerleftimg {
visibility: hidden !important;
}
.cheerleftamount {
visibility: hidden !important;
}
.cheerrightamount {
visibility: hidden !important;
}
.cheerrightimg {
visibility: hidden !important;
}
#header {
    position: absolute;
    top: 100px !important;
    left: 170px !important;
    width: 560px;
    height: 60px;
    text-align: center;
    font-family: Arial !important;
    font-weight: normal !important;
    font-size: 36px !important;
    opacity: 0;
    color: white !important;
    text-transform: capitalize !important;
}
.cheername {} .cheerheaderamount {} .cheermsg {
visibility: hidden !important;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' cheered';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

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

(http://i.imgur.com/pDkxniV.png)

Title: Re: Custom Notification WorkShop
Post by: puuhbear on May 07, 2017, 09:51:57 PM

Hi,
 
I have a special request and don't even know if it's possible. I'd like to switch my notifications from Tipeee to deepbot but am not shure if you can help me with that.

It's hard for me to tell what infos you need, as I don't know if it's even possible.

This is, how it should look like in the end: https://www.youtube.com/watch?v=2atebZqdLms (https://www.youtube.com/watch?v=2atebZqdLms)
I used the AGENCYB.TTF as font family

this is the code in the message box of Tipeee:

Quote

<b style="background: rgba(37, 48, 74, .8)" id="line"><b id="mainText">{name}</b><b id="subText"> is now following!</b></b>

and this is the CSS I have in my OBS browser source:

Quote

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

html, body {
  margin: 0;
  padding: 0;
} 

#widget, #body, #alert-box, #wrap, #alert-text-wrap, #alert-text{
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  top: 0;
  left: 0;
  opacity: 1;
}

#alert-box.hidden, .hidden {
  opacity: 1;
}

#line {
  width: 0;
  height: 0;
  position: absolute;
  top: 400px;
  left: 50%;
  margin-left: 0;
  display: block;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  opacity: 0;
  -webkit-animation: lineIn 0.2s .6s forwards,
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
          animation: lineIn 0.2s .6s forwards,
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
}

@-webkit-keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@-webkit-keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@-webkit-keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}

@keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}


#mainText {
  text-align: center;
  font-size: 100px;
  width: 2200px;
  display: block;
  line-height: 100px;
  text-indent: -3000px;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  opacity: 0;
  font-family: "AGENCY FB", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  display: block !important;
  position: absolute !important;
  -webkit-animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
          animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;}
}

@keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;}
}

@-webkit-keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;}
  100% {text-indent: 3000px;}
}

@keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;}
  100% {text-indent: 3000px;}
}

#subText {
  text-align: center;
  font-size: 40px;
  width: 2200px;
  display: block;
  line-height: 40px;
  text-indent: 3000px;
  position: absolute;
  bottom: 30px;
  white-space: nowrap;
  opacity: 0;
  font-family: "AGENCY FB", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  display: block !important;
  position: absolute !important;
  -webkit-animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
          animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;}
  100% {text-indent: 20px;opacity: 1;}
}

@keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;}
  100% {text-indent: 20px;opacity: 1;}
}

@-webkit-keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;}
  100% {text-indent: -3000px;}
}

@keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;}
  100% {text-indent: -3000px;}
}

PS: if it is possible, I will provide more infos on the texts for donation and cheer alerts :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 08, 2017, 01:39:23 AM

If it is the overwatch one for all three, I can give you the follow and donation one since I did this for a past user. Cheer may take some time, but if you have the info for the cheer one, feel free to send it my way.

Title: Re: Custom Notification WorkShop
Post by: puuhbear on May 08, 2017, 01:45:21 AM

oh cool...

indeed it is the overwatch one!


Edit OK full infos :

Code: [Select]

Follower Alert

Font Style/Link: https://dl.dropboxusercontent.com/s/9by7zjws454amsq/AGENCYB.TTF
Font Color: Name should be #48c3d9 and text should be #FFFFFF
What do you want the alert to say? {name} hat gefollowed!
Any text fill/boarder?: small boarder in black
Anything else?:

Code: [Select]

Donation Alert

Font Style/Link: https://dl.dropboxusercontent.com/s/9by7zjws454amsq/AGENCYB.TTF
Font Color: Name, amount and currency should be #48c3d9 and text should be #FFFFFF
Any text fill/boarder?: small boarder in black
Currency Type: Euros
What do you want the alert to say? {name} hat {amount currency} gespendet!
Anything else?:

Code: [Select]

Cheer Alert

Font Style/Link: https://dl.dropboxusercontent.com/s/9by7zjws454amsq/AGENCYB.TTF
Font Color: Name and amount should be #48c3d9 and text and "bits" should be #FFFFFF
Any text fill/boarder?: small boarder in black
Currency Type: Bits
What do you want the alert to say? {name} hat {amount} bits gespendet!
Example (If applicable):
Anything else?:
I hope you can do something whith that :)

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 08, 2017, 03:35:29 AM

I am having issues trying to get the cheer one to work. But follower/donation ones are below.

Follower:

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

CSS Code:

Code: [Select]

body,
html {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "BigNoodleTitling", sans-serif !important;
    font-style: italic !important;
    overflow: hidden !important;
}
#follow-notification {
    background: rgba(37, 48, 74, .8) !important;
    background-image: none !important;
}
#follow-name {} #notification-header {
    color: rgb(240, 242, 245) !important;
}
/* START OF FOLLOW-NOTIFICATIONS DEFINITIONS */

#follow-notification {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    top: 400px !important;
    left: 50% !important;
    margin-left: 0 !important;
    -webkit-transform: rotate(-5deg) !important;
    transform: rotate(-5deg) !important;
    opacity: 0 !important;
    -webkit-animation: linein 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    background-repeat: no-repeat;
}
@-webkit-keyframes lineIn {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        opacity: 1;
        height: 3px;
    }
}
@keyframes lineIn {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        opacity: 1;
        height: 3px;
    }
}
@-webkit-keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@-webkit-keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 400px;
    }
}
@keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 400px;
    }
}
/* END OF FOLLOW-NOTIFICATION DEFINITIONS */
/* START OF FOLLOW-NAME DEFINITIONS */

#follow-name {
    text-align: center !important;
    font-size: 100px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 100px !important;
    text-indent: -3000px !important;
    position: absolute !important;
    top: 30px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    margin-left: 0px !important;
    font-family: inherit !important;
    text-shadow: none !important;
    color: #14E6FD !important;
}
@-webkit-keyframes textIn {
    0% {
        text-indent: -3000px;
        opacity: 1;
    }
    100% {
        text-indent: -20px;
        opacity: 1;
    }
}
@keyframes textIn {
    0% {
        text-indent: -3000px;
        opacity: 1;
    }
    100% {
        text-indent: -20px;
        opacity: 1;
    }
}
@-webkit-keyframes textTravel {
    0% {
        text-indent: -20px;
    }
    90% {
        text-indent: 20px;
    }
    95% {
        text-indent: 3000px;
    }
    100% {
        text-indent: 3000px;
    }
}
@keyframes textTravel {
    0% {
        text-indent: -20px;
    }
    90% {
        text-indent: 20px;
    }
    95% {
        text-indent: 3000px;
    }
    100% {
        text-indent: 3000px;
    }
}
/* END OF FOLLOW-NAME DEFINITIONS */
/* START OF NOTIFICATION-HEADER DEFINITIONS */

#notification-header {
    text-align: center !important;
    font-size: 40px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 40px !important;
    text-indent: 3000px;
    position: absolute !important;
    bottom: 30px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    text-align: center;
    vertical-align: initial !important;
    font-family: inherit !important;
    text-shadow: none !important;
    text-decoration: none !important;
    color: rgb(240, 242, 245) !important;
    visibility: visible !important;
    padding-top: 0px !important;
    border-bottom: none !important;
}
@-webkit-keyframes tagIn {
    0% {
        text-indent: 3000px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@keyframes tagIn {
    0% {
        text-indent: 3000px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@-webkit-keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -3000px;
    }
    100% {
        text-indent: -3000px;
    }
}
@keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -3000px;
    }
    100% {
        text-indent: -3000px;
    }
}
/* END OF NOTIFICATION-HEADER DEFINITIONS */

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

(http://i.imgur.com/zhjlyRQ.png)


Donation:

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

CSS Code:

Code: [Select]

body,
html {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "BigNoodleTitling", sans-serif !important;
    font-style: italic !important;
    overflow: hidden !important;
}
#donor-notification {
    background: rgba(37, 48, 74, .8) !important;
    background-image: none !important;
}
#donor-notification .header {
    visibility: hidden !important;
}
#donor-notification .message {
    visibility: hidden !important;
}
#donor-notification .amount {
    visibility: visible !important;
}
/* START OF FOLLOW-NOTIFICATIONS DEFINITIONS */

#donor-notification {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    top: 400px !important;
    left: 50% !important;
    margin-left: 0 !important;
    -webkit-transform: rotate(-5deg) !important;
    transform: rotate(-5deg) !important;
    opacity: 0 !important;
    -webkit-animation: linein 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    animation: lineIn 0.2s .6s forwards, lineGrow 0.4s 1s forwards, linehide 0.5s 6.7s forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    background-repeat: no-repeat;
}
@-webkit-keyframes lineIn {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        opacity: 1;
        height: 3px;
    }
}
@keyframes lineIn {
    0% {
        width: 0px;
        height: 0px;
    }
    100% {
        width: 2200px;
        margin-left: -1100px;
        opacity: 1;
        height: 3px;
    }
}
@-webkit-keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@keyframes lineGrow {
    0% {} 100% {
        height: 200px;
        top: 300px;
    }
}
@-webkit-keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 400px;
    }
}
@keyframes linehide {
    0% {
        height: 200px;
        top: 300px;
    }
    100% {
        height: 0px;
        top: 400px;
    }
}
/* END OF FOLLOW-NOTIFICATION DEFINITIONS */
/* START OF FOLLOW-NAME DEFINITIONS */

#donor-notification .donor {
    text-align: center !important;
    font-size: 100px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 100px !important;
    text-indent: -3000px !important;
    position: absolute !important;
    top: 30px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    animation: textIn 0.4s 1.4s forwards, textTravel 4.6s 1.8s linear forwards !important;
    display: none;
    border-radius: 0px !important;
    background-image: none !important;
    margin-left: 0px !important;
    font-family: inherit !important;
    text-shadow: none !important;
    color: #14E6FD !important;
}
@-webkit-keyframes textIn {
    0% {
        text-indent: -3000px;
        opacity: 1;
    }
    100% {
        text-indent: -20px;
        opacity: 1;
    }
}
@keyframes textIn {
    0% {
        text-indent: -3000px;
        opacity: 1;
    }
    100% {
        text-indent: -20px;
        opacity: 1;
    }
}
@-webkit-keyframes textTravel {
    0% {
        text-indent: -20px;
    }
    90% {
        text-indent: 20px;
    }
    95% {
        text-indent: 3000px;
    }
    100% {
        text-indent: 3000px;
    }
}
@keyframes textTravel {
    0% {
        text-indent: -20px;
    }
    90% {
        text-indent: 20px;
    }
    95% {
        text-indent: 3000px;
    }
    100% {
        text-indent: 3000px;
    }
}
/* END OF FOLLOW-NAME DEFINITIONS */
/* START OF NOTIFICATION-HEADER DEFINITIONS */

#donor-notification .amount {
    text-align: center !important;
    font-size: 40px !important;
    width: 2200px !important;
    display: block !important;
    line-height: 40px !important;
    text-indent: 3000px;
    position: absolute !important;
    bottom: 40px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    -webkit-animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    animation: tagIn 0.4s 1.4s forwards, tagTravel 4.6s 1.8s linear forwards !important;
    text-align: center;
    vertical-align: initial !important;
    font-family: inherit !important;
    text-shadow: none !important;
    text-decoration: none !important;
    color: #14E6FD !important;
    visibility: visible !important;
    padding-top: 0px !important;
}
.amount:before {
    content: 'Just Donated ' !important;
    color: rgb(240, 242, 245) !important;
}
@-webkit-keyframes tagIn {
    0% {
        text-indent: 3000px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@keyframes tagIn {
    0% {
        text-indent: 3000px;
        opacity: 1;
    }
    100% {
        text-indent: 20px;
        opacity: 1;
    }
}
@-webkit-keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -3000px;
    }
    100% {
        text-indent: -3000px;
    }
}
@keyframes tagTravel {
    0% {
        text-indent: 20px;
    }
    90% {
        text-indent: -20px;
    }
    95% {
        text-indent: -3000px;
    }
    100% {
        text-indent: -3000px;
    }
}
/* END OF NOTIFICATION-HEADER DEFINITIONS */

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

(http://i.imgur.com/z84lAZr.png)

Title: Re: Custom Notification WorkShop
Post by: puuhbear on May 08, 2017, 04:39:13 AM

Works like a charm :) thanks a lot :)

Only thing, can I change the text from the followalert to "{name} hat gefolgt!" and the text from the donation to "{name} hat {amount}€ gespendet!" somewhere myself? because I'm a german streamer and my viewers usualy donate euros and not dollars.

Title: Re: Custom Notification WorkShop
Post by: puuhbear on May 10, 2017, 12:08:57 AM

OkOkOk :)

With the help of *best support ever* MercurY3rd I managed to figure out the changes for the followeralert (with a local html file) and the donationalert (found that in the css and wasn't aware of the &ccy=€ thing in the link) . :)

Now I would just need the cheers stuff, but I know you're allready on it ;)

MercurY3rd also informed me, that there is a hostalert too, wich I wasn't aware of. I would love to have that too if possible :)

Something in the same style with "*name* hostet mich mit *number* Zuschauern*" as a text.

I hope I'm not asking to much here :/

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 10, 2017, 12:19:47 AM

The host alert, I can try (I think I have that one setup, and should be able to change the words). The cheer one, I just can't figure out how to get it to work. Do you happen to have the CSS you were using for the cheer one?

Title: Re: Custom Notification WorkShop
Post by: puuhbear on May 10, 2017, 12:28:57 AM

shure... but don't know if it helps a lot...

I do it with Tipeee so far. The CSS is:

Code: [Select]

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

html, body {
  margin: 0;
  padding: 0;
} 

#widget, #body, #alert-box, #wrap, #alert-text-wrap, #alert-text{
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  top: 0;
  left: 0;
  opacity: 1;
}

#alert-box.hidden, .hidden {
  opacity: 1;
}

#line {
  width: 0;
  height: 0;
  position: absolute;
  top: 400px;
  left: 50%;
  margin-left: 0;
  display: block;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  opacity: 0;
  -webkit-animation: lineIn 0.2s .6s forwards,
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
          animation: lineIn 0.2s .6s forwards,
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
}

@-webkit-keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@-webkit-keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@-webkit-keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}

@keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}


#mainText {
  text-align: center;
  font-size: 100px;
  width: 2200px;
  display: block;
  line-height: 100px;
  text-indent: -3000px;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  opacity: 0;
  font-family: "AGENCY FB", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  display: block !important;
  position: absolute !important;
  -webkit-animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
          animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;}
}

@keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;}
}

@-webkit-keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;}
  100% {text-indent: 3000px;}
}

@keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;}
  100% {text-indent: 3000px;}
}

#subText {
  text-align: center;
  font-size: 40px;
  width: 2200px;
  display: block;
  line-height: 40px;
  text-indent: 3000px;
  position: absolute;
  bottom: 30px;
  white-space: nowrap;
  opacity: 0;
  font-family: "AGENCY FB", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  display: block !important;
  position: absolute !important;
  -webkit-animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
          animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;}
  100% {text-indent: 20px;opacity: 1;}
}

@keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;}
  100% {text-indent: 20px;opacity: 1;}
}

@-webkit-keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;}
  100% {text-indent: -3000px;}
}

@keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;}
  100% {text-indent: -3000px;}
}


and in the massagebox on Tipeee I entered:

Code: [Select]

<b style="background: rgba(37, 48, 74, .8)" id="line"><b id="mainText">{name}</b><b id="subText"> hat {amount} bits gespendet!</b></b>
I could also provide the HTML link if that helps.

Title: Custom Notification Request
Post by: RagingRedneck83 on May 10, 2017, 02:55:07 AM

Follower Alert

Image Link: http://imgur.com/nCKhaCn
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
Where do you want text located? (Follower Name): in the box on the image
Example (If applicable):
Anything else?:

Donation Alert

Image Link: http://imgur.com/U16oeY7
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
Currency Type: USD
What do you want the alert to say? (Text Options: Donator Name, Donation Amount): (name) Thanks for the (amount) Donation
Example (If applicable):
Anything else?:

Subscriber Alert

Image Link: http://imgur.com/JCCcMqM
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
What do you want the alert to say? (Text Options: Sub Name, Months): (name) has subbed for (months)
Example (If applicable):
Anything else?:

Host Alert

Image Link: http://imgur.com/ZLF8rsH
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
What do you want the alert to say? (Text Options: Host Name, Amount of Viewers): (name) hosted with (amount) viewers
Example (If applicable):
Anything else?:

Bits Alert

Image Link: http://imgur.com/IGGGZgk
Font Style/Link: http://www.dafont.com/abaddon-ll.font
Font Color: #3e3d40
Any text fill/boarder?: yes color is #b80000
What do you want the alert to say? (Text Options: Veiwers Name, Amount of bits): (name) thanks for the (amount) bits
Example (If applicable):
Anything else?:

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 10, 2017, 03:28:16 AM

Do you have a link to the font?

Title: Re: Custom Notification WorkShop
Post by: RagingRedneck83 on May 10, 2017, 05:14:05 AM

updated the request with the link.

Title: Re: Custom Notification WorkShop
Post by: TheNumbLock on May 12, 2017, 08:52:21 AM

Requested by: FatalOmen

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 638px !important;
height: 171px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/nCKhaCn.png) !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 30px !important;
margin-left: 170px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: normal !important;
font-family: Abaddon ll !important;
color: #3e3d40 !important;
text-transform: capitalize;
-webkit-text-stroke-color: #b80000;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

(http://i.imgur.com/vylhttb.png)


Donation:

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

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 638px !important;
    height: 171px !important;
    background-image: url(http://i.imgur.com/U16oeY7.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 35px !important;
margin-left: -120px !important;
width: 300px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 26px !important;
font-family: Abaddon ll !important;
color: #3e3d40 !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 35px !important;
margin-left: -150px !important;
width: 400px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 26px !important;
font-family: Abaddon ll !important;
color: #3e3d40 !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: #b80000;
-webkit-text-stroke-width: 1px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: ' Thanks for the ';
}

.amount:after {
content: ' Donation';
}

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

(http://i.imgur.com/yRTihPO.png)

Subscriber:

Link: http://deepbot.tv/notifications/subnotification3.htm
Width: 650
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 638px;
    height: 171px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url(http://i.imgur.com/JCCcMqM.png) !important;
}

#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 638px;
    height: 171px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url(http://i.imgur.com/JCCcMqM.png) !important;
}

.subname {
margin-left: 20px !important;
  padding-top: 75px !important;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
  font-family: Abaddon ll !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: #3e3d40 !important;
  -webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
}

.subname:after {
content: ' has subbed for '
}

.months {
  position: absolute;
  top: 75px !important;
  margin-left: 400px !important;
  width: 165px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
font-family: Abaddon ll !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: #3e3d40 !important;
  -webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
}

.months::after {
  content: ' Months!';
}
.badge {
    position: absolute;
    top: 50px;
    margin-left: 420px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    -webkit-animation: rot 3s infinite linear;
}
.msg {
    position: absolute;
    top: 20px;
    margin-left: 40px;
    width: 60%;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}


@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

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

(http://i.imgur.com/7a4MqxT.png)

Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=638&h=171
Width: 650
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 638px;
    height: 171px;
    border-radius: 0px !important;
    background-image: url(http://i.imgur.com/ZLF8rsH.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -30px !important;
    margin-left: 30px !important;
    text-align: center;
    width: 420px !important;
    font-size: 28px !important;
    font-family: Abaddon ll !important;
    text-shadow: none !important;
    color: #3e3d40 !important;
    -webkit-text-stroke-color: #b80000;
    -webkit-text-stroke-width: 1px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 55px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 28px !important;
    font-family: Abaddon ll !important;
    text-shadow: none !important;
    color: #3e3d40 !important;
    -webkit-text-stroke-color: #b80000;
    -webkit-text-stroke-width: 1px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: visible !important;
    position: relative;
    top: 10px !important;
    left: -20px !important;
    width: 300px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Norwester !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' hosted with ';
}
.hostnumber:before {
    content: '';
}
.hostnumber:after {
    content: ' viewers';
}
.hostdiv:after {
    position: absolute !important;
    content: '';
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}

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

(http://i.imgur.com/bhQMJTi.png)

Cheer:

Link: http://deepbot.tv/notifications/cheernotification.htm
Width: 800
Height: 200

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px !important;
    width: 638px !important;
    height: 171px !important;
    background: url(http://i.imgur.com/IGGGZgk.png);
    background-repeat: no-repeat !important !important;
}
.cheerleftimg {
visibility: hidden !important;
}
.cheerleftamount {
visibility: hidden !important;
}
.cheerrightamount {
visibility: hidden !important;
}
.cheerrightimg {
visibility: hidden !important;
}
#header {
    position: absolute;
    top: 60px !important;
    left: 70px !important;
    width: 500px !important;
    height: 60px;
    text-align: center;
    font-family: Abaddon ll !important;
    color: #3e3d40 !important;
    font-weight: normal !important;
    font-size: 28px !important;
    opacity: 0;
    text-transform: capitalize !important;
    -webkit-text-stroke-color: #b80000 !important;
-webkit-text-stroke-width: 1px;
}
.cheername {} .cheerheaderamount {} .cheermsg {
visibility: hidden !important;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' thanks for the ';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

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

(http://i.imgur.com/wye2P4N.png)

Title: Re: Custom Notification WorkShop
Post by: ChewieMelodies on May 12, 2017, 02:06:59 PM

Hi TheNumbLock

Was hoping you could help me with my notifications:

Subscriber Alert

Image Link: http://i.imgur.com/F7VIiJE.gif
Font Style/Link: Century Gothic
Font Color: White
Any text fill/border?: Black border
What do you want the alert to say? Thanks for the Sub twitchusername

Resub alert
Image Link: http://imgur.com/wTUSRqj
Font Style/Link: Century Gothic
Font Color: ADD8E6
Any text fill/border?: Black border
What do you want the alert to say? Thanks for the Resub twitchusername

Thanks in advance for your help!!
Chewie

Title: Re: Custom Notification WorkShop
Post by: anthonydh88 on June 29, 2017, 07:14:57 AM

http://imgur.com/Grrq9UP
Sub Notification And Resub Notification
Black Text Yellow Outline

Title: Re: Custom Notification WorkShop
Post by: Charanor on June 29, 2017, 05:00:00 PM

Heyhou, can you Switch my Follower Alert to an Sub Alert?

http://deepbot.tv/notifications/follownotification1.htm

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1024px !important;
height: 768px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/M2p6izX.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 300px !important;
margin-left: 300px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0px;
text-shadow: 0 0 5px #ffffff , 0 0 10px #ffffff , 0 0 15px #ffffff , 0 0 20px #ffffff , 0 0 25px #ffffff

Title: Re: Custom Notification WorkShop
Post by: Father_Bill on July 03, 2017, 06:03:09 AM

Hi,

Like many twitch streamers last week i got a sub button. Would it be possible to get the css for a sub button. the image for it can be found

Image Link: http://i.imgur.com/47nKI3m.png
Font Style/Link:Arial
Font Color: #white
Any text fill/boarder?: none
Marquee/Scroll Effect?: none
Where do you want text located? (Sub Name): in the middle of the blue field of the image
Example (If applicable):
Anything else?: transparent background

Thanks in advance for your assistance. The last group worked wonderfully!

Peace,

Father Bill Kessler