Custom Notification WorkShop

[Electro_mc]

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!"?

[Electro_mc]

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?

[TheNumbLock]

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



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

[ran_neechan]

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

[TheNumbLock]

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





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

[Rosath]

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

[TheNumbLock]

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





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

[Rosath]

You're amazing! Thank you!

[TheNumbLock]

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.

[E60530d]

image

[TheNumbLock]

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

[Opt1kal]

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.

[TheNumbLock]

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

[hoodlumscrafty]

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

[TheNumbLock]

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




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