Custom Notification WorkShop

[TheNumbLock]

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

[bittenbytheblade]

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?:

[TheNumbLock]

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




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

[Mak]

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?: -


[TheNumbLock]

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

[ShiroKoN]

Follower Alert

Image Link: http://imgur.com/0z3oJb0
Font Style/Link: 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!

[TheNumbLock]

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

[Wolfstreet Gaming]

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!

[TheNumbLock]

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




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

[Wolfstreet Gaming]

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




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

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

[TheNumbLock]

I may be able to photoshop it. Do you want the background in the circle, or just WSG and the circle?

[Wolfstreet Gaming]

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!

[SunshineKid]

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

[Wolfstreet Gaming]

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!

[Wolfstreet Gaming]

Also can you make this slide out from left to right? Thank you