Custom Donation Notification Gallery

[emrerocky]

Hey folks, this is a little gallery of some different styles of CSS for you to choose from for your notification!

1.

Requested by: nexxx

Link : http://deepbot.tv/notifications/donationnotification4.htm?top=1&text=from
Width: 500
Height: 159

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 500px !important;
height: 159px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/AqArUrA.jpg') !important;
}

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

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

#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
width: 0px !important;
margin-top: 0px !important;
margin-left: 0px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: center !important;
font-size: 26px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 0px !important;
margin-top: 0px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: center !important;
font-size: 26px !important;
font-family: Verdana !important;
text-shadow: 0px 0px 0px #000 !important;
color: white !important;
}
#donor-notification .header {
color: white !important;
font-size: 28px !important;
font-family: Verdana !important;
font-size: 26px !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
#donor-notification .title {
color: white !important;
font-size: 28px !important;
margin-top: 30px !important;
margin-left: 89px !important;
text-align: left !important;
}
Preview:


2.

Requested by: andshelikedit

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

CSS Code:

Code: [Select]

#donor-notification {
width: 710px !important;
height: 510px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/gz6ckms.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;
margin-top: 180px !important;
margin-left: 510px !important;
font-size: 48px !important;
font-family: You Are Loved !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 290px !important;
margin-left: 200px !important;
font-size: 62px !important;
width: 450px;
text-align: left;
font-family: You Are Loved !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !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:


3.

Requested by: Bigguns

Link : http://deepbot.tv/notifications/donationnotification.htm
Width: 1920
Height: 748

CSS Code:

Code: [Select]

#donor-notification {
display: none;
position: absolute !important;
width: 1920px !important;
height: 748px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/Ij7AMXm.png') !important;
}


#donor-notification .date {
position: absolute !important;
margin-top: 135px !important;
margin-left: 890px !important;
padding-top: 43px !important;
width: 350px !important;
text-align: center !important;
line-height: 20px !important;
vertical-align: top !important;
font-size: 28px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}

#donor-notification .streamname {
position: absolute !important;
display: none !important;
margin-left: 34px !important;
padding-top: 28px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 24px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #FFF !important;
color: black !important;
}

#donor-notification .message {
position: absolute !important;
margin-left: 548px !important;
margin-top: 258px !important;
float: left !important;
padding-top: 9px !important;
width: 840px !important;
line-height: 95px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 32px !important;
font-family: Segoe UI !important;
color: white !important;
}
#donor-notification .amount {
position: absolute !important;
float: right !important;
margin-left: 1335px !important;
margin-top: 153px !important;
width: 160px !important;
padding-top: 15px !important;
text-align: center !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 48px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute !important;
margin-left: 430px !important;
padding-top: 165px !important;
width: 450px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: middle !important;
font-size: 38px !important;
font-family: Segoe UI !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
Preview:


4.

Requested by: Gridsquare

Link : http://deepbot.tv/notifications/donationnotification.htm
width: 910
height: 500

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 910px !important;
height: 500px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/Itm7Hd0.gif') !important;
overflow: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-left: 35px !important;
margin-top: 135px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 460px !important;
line-height: 24px !important;
text-align: center !important;
vertical-align: top !important;
font-size: 22px !important;
font-family: Earth Kid, Verdana !important;
color: white !important;
}
#donor-notification .amount {
position: absolute;
margin-top: -70px !important;
margin-left: 530px !important;
width: 350px !important;
padding-top: 0px !important;
text-align: center !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 52px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute;
margin-left: 35px !important;
padding-top: 0px !important;
margin-top: 73px !important;
width: 460px !important;
text-align: center !important;
line-height: 28px !important;
vertical-align: initial !important;
font-size: 32px !important;
font-family: Earth Kid, Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
Preview:


5.

Requested by: GzussavesTwitch

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

CSS Code:

Code: [Select]

#donor-notification {
width: 350px !important;
height: 270px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/O9UwW6M.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
overflow: hidden !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;
margin-top: 225px !important;
font-size: 32px !important;
width: 330px !important;
text-align: center !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 190px !important;
width: 330px !important;
text-align: center !important;
font-size: 32px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .title {
padding-top: 0px !important;
margin-left: 0px !important;
width: 76% !important;
float: left !important;
text-align: left !important;
}
Preview:


6.

Requested by: skylatron

Link : http://deepbot.tv/notifications/donationnotification.htm
width: 630
height: 520

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 630px !important;
height: 520px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/sk6AJHy.png') !important;
overflow: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-left: 5px !important;
margin-top: 155px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 264px !important;
line-height: 20px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
position: absolute;
width: 264px !important;
margin-top: 40px !important;
margin-left: 0px !important;
padding-top: 0px !important;
text-align: center !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute;
margin-left: 0px !important;
padding-top: 0px !important;
margin-top: 10px !important;
width: 264px !important;
text-align: center !important;
line-height: 28px !important;
vertical-align: initial !important;
font-size: 26px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
Preview:


7.

Requested by: Cuerdas

Link : http://deepbot.tv/notifications/donationnotification2.htm?top=1&ccy=%E2%82%AC
Width: 460
Height: 290

CSS Code:

Code: [Select]

#donor-notification {
 width: 460px !important;
 height: 290px !important;
 background-color: transparent !important;
 background-image:url('http://i.imgur.com/MkdeMUe.png') !important;
}

#donor-notification .title {
 padding-top: 0px !important;
}
#donor-notification .message {
  margin-top: 178px !important;
margin-left: 142px !important;
color: #FFF !important;
font-size: 21px !important;
width: 300px !important;
text-align: left !important;
}
#donor-notification .amount {
float: left !important;
margin-top: -83px !important;
margin-left: 198px !important;
font-family: Algerian;
color: #FFF !important;
font-size: 32px !important;
}
#donor-notification .donor {
font-family: Algerian;
color: #FFF !important;
margin-left: -40px !important;
font-size: 32px !important;
}
#donor-notification .header {
color: #FFF !important;
font-size: 1px !important;
font-family: Algerian !important;
visibility: hidden !important;
}
#donor-notification .title {
margin-top: 98px !important;
margin-left: 49px !important;
padding-left: 10px !important;
}
Preview:


8.

Requested by: PowerwalkXD

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

CSS Code:

Code: [Select]

#donor-notification {
width: 500px !important;
height: 125px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/D9jJ2ER.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 {
font-size: 32px !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 32px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 67px !important;
margin-left: 100px !important;
width: 76% !important;
float: left !important;
text-align: center !important;
}


Preview:


9.

Requested by: Yawn_Gaming

Link : http://deepbot.tv/notifications/donationnotification2.htm?top=1
Width: 812
Height: 273

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 812px !important;
height: 273px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/sSMbsb4.png') !important;
}

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

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

#donor-notification .message {
margin-left: 150px !important;
margin-top: -168px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 650px !important;
line-height: 40px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
float: left;
width: 100px !important;
margin-top: 88px !important;
margin-left: 150px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 520px !important;
padding-top: 85px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: middle !important;
font-size: 29px !important;
font-family: Comic Sans MS !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
Preview:


10.

Requested by: MrL3x

Link : http://deepbot.tv/notifications/donationnotification2.htm?top=1&ccy=%C2%A3
Width: 590
Height: 120

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/5nccBnr.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 {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 50px;
width: 100%;
float: left;
text-align: center;
}

Preview:


11.

Requested by: HayZ

Link : http://deepbot.tv/notifications/donationnotification2.htm?top=1
Width: 590
Height: 120

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/zYGD7I3.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 {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 34px !important;
font-family: Calbri !important;
font-weight: bold !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 50px;
width: 100%;
float: left;
text-align: center;
}

Preview:


12.

Requested by: Hanger84

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

CSS Code:

Code: [Select]

#donor-notification {
width: 600px !important;
height: 500px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/jo9NKPy.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
background-position-x: center !important;

}


#donor-notification .header {
position: absolute !important;
visibility: hidden !important;
}

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

#donor-notification .message {
font-size: 20px !important;
font-family: Orbitron !important;
color: #ffffff !important;
max-width: 600px !important;
text-shadow: 3px 3px 1px #000 !important;
margin-left: auto !important;
margin-right: auto !important;
}
#donor-notification .amount {
font-size: 26px !important;
font-family: Orbitron !important;
font-weight: normal !important;
text-shadow: 3px 3px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 26px !important;
font-family: Orbitron !important;
font-weight: normal !important;
text-shadow: 3px 3px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' donated ';
}
#donor-notification .title {
padding-top: 314px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}

Preview:


13.

Requested by: bluemurdergaming

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

CSS Code:

Code: [Select]

#donor-notification {
width: 1920px !important;
height: 120px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/veSHUKP.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 {
font-size: 32px !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 32px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 44px !important;
margin-left: 55px !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}

Preview:


14.

Requested by: syndrome208

Link: http://deepbot.tv/notifications/donationnotification2.htm?top=1&ccy=$
Width: 633
Height: 75

CSS Code:

Code: [Select]

#donor-notification {
 width: 633px !important;
 height: 75px !important;
 background-color: transparent !important;
 background-image:url('http://i.imgur.com/agCJa30.png') !important;
}

#donor-notification .title {
 padding-top: 0px !important;
}
#donor-notification .message {
  visibility: hidden !important;
}
#donor-notification .amount {
font-family: troglodyte !important;
font-size: 26px !important;
font-family: troglodyte !important;
    color: #FFFFFF !important;
    -webkit-text-stroke: 0.5px;
    -webkit-text-stroke-color: #000;
}
#donor-notification .donor {
  font-size: 28px !important;
  font-weight: bold !important;
  font-family: troglodyte !important;
  color: #FFFFFF !important;
  -webkit-text-stroke: 0.5px;
  -webkit-text-stroke-color: #000;
}
#donor-notification .header {
color: #3FFA00 !important;
font-size: 1px !important;
visibility: hidden !important;

}
#donor-notification .title {
margin-top: 35px !important;
padding-left: 10px !important;
width: 610px !important;
}
Preview:


15.

Requested by: Taintedh

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

CSS Code:

Code: [Select]

#donor-notification {
width: 500px !important;
height: 100px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/J4AuzZN.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
overflow: hidden !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;
margin-top: 40px !important;
font-size: 23px !important;
width: 500px !important;
text-align: center !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 1px !important;
width: 500px !important;
text-align: center !important;
font-size: 26px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .title {
padding-top: 0px !important;
margin-left: 0px !important;
width: 76% !important;
float: left !important;
text-align: left !important;
}
Preview:


16.

Requested by: red78phoenix

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

CSS Code:

Code: [Select]

#donor-notification {
width: 500px !important;
height: 160px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/5xb4L0P.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 {
font-size: 32px !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 32px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 75px !important;
margin-left: 00px !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}

Preview:


17.

Requested by: NexusSin

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

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 200px !important;
background-color: transparent !important;
background-image:url('https://i.imgur.com/sasKi0r.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 {
font-size: 55px !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 55px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 95px !important;
margin-left: 00px !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}
Preview:


18.

Requested by: sodopestavi

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

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 110px !important;
background-color: transparent !important;
background-image:url('https://i.imgur.com/buw7afU.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;
margin-top: 0px !important;
}
#donor-notification .amount {
font-size: 35px !important;
font-family: Impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
font-size: 35px !important;
font-family: impact !important;
font-weight: normal !important;
text-shadow: 3px 4px 1px #000 !important;
color: white !important;
}
#donor-notification .donor:after {
content: ' - ';
}
#donor-notification .title {
padding-top: 50px !important;
margin-left: 70px !important;
width: 76% !important;
float: left !important;
text-align: center !important;
}
Preview: