Custom Notification WorkShop

[TheNumbLock]

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



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

[CalToxReaper]

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



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

That's awesome thanks bro!

[Uknowitbro]

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

[TheNumbLock]

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

[PerkPerky]

Hello, Using twitchalerts, their alert is transparent


but using my css, it always has a color background


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;
}


[TheNumbLock]

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

[Dodevrouw]

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

[TheNumbLock]

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



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



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

[AndreaBLN]

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

[TheNumbLock]

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

[jukeboxgamer]

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

[TheNumbLock]

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

[jukeboxgamer]

thanks bro

[jukeboxgamer]

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

[jukeboxgamer]

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!