CSS For Custom Donation, Follow, and Sub Alerts

[MissyGotGame]

For some reason these Images came out huge... I guess this is a good thing as they can be scaled down and not look too pixelated. If you could help me resize these so they fit a 720p stream and still look good, that would be awesome! <3 Thank you in advance for all your help! Deepbot is amazing!

Donation Alert PNG:
http://i.imgur.com/kKl6wfT.png
Suber Name: in the the middle Under alert title.
Amount: Under suber name
Font: Hobo
Color and border: Match the alert font and border

Sub Alert PNG:
http://i.imgur.com/FnRcvxn.png
Suber Name: in the the middle Under alert title.
Font: Hobo
Color and border: Match the alert font and border


Follow Alert PNG:
http://i.imgur.com/o5EtWPK.png
Follower name: in the the middle Under alert title.
Font: Hobo
Color and border: Match the alert font and border

[TheNumbLock]

Do you have a link to this font?

[MissyGotGame]

Link for the font:
http://fontzone.net/font-details/hobostd

[TheNumbLock]

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

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Hobo";
src: url('InsertDownloadLinkHere');
}
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 2253px !important;
height: 750px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/o5EtWPK.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 350px !important;
margin-left: 900px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 132px !important;
font-weight: normal !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}

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





Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Hobo';
src: url('InsertDownloadLinkHere');
}
#donor-notification {
width: 2253px !important;
height: 750px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/kKl6wfT.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: 420px !important;
margin-left: 1100px !important;
margin-right: 250px !important;
width: 300px !important;
font-size: 128px !important;
font-weight: normal !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}
#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 250px !important;
margin-left: 870px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 128px !important;
font-weight: normal !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}

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



Subscriber:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Hobo";
src: url('InsertDownloadLinkHere');
}
#sub-notification {
  display: none;
  position: absolute;
  width: 2253px !important;
  height: 750px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/FnRcvxn.png') !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: 250px !important;
margin-left: 900px !important;
width: 300px !important;
font-size: 132px !important;
font-weight: bold !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}

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

[TinyxDestiny]

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

Follower:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Hobo";
src: url('InsertDownloadLinkHere');
}
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 2253px !important;
height: 750px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/o5EtWPK.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 350px !important;
margin-left: 900px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 132px !important;
font-weight: normal !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}

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





Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'Hobo';
src: url('InsertDownloadLinkHere');
}
#donor-notification {
width: 2253px !important;
height: 750px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/kKl6wfT.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: 420px !important;
margin-left: 1100px !important;
margin-right: 250px !important;
width: 300px !important;
font-size: 128px !important;
font-weight: normal !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}
#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 250px !important;
margin-left: 870px !important;
margin-right: 100px !important;
width: 600px !important;
font-size: 128px !important;
font-weight: normal !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 8px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}

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



Subscriber:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Hobo";
src: url('InsertDownloadLinkHere');
}
#sub-notification {
  display: none;
  position: absolute;
  width: 2253px !important;
  height: 750px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/FnRcvxn.png') !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: 250px !important;
margin-left: 900px !important;
width: 300px !important;
font-size: 132px !important;
font-weight: bold !important;
font-family: Hobo !important;
color: silver !important;
-webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: silver;
}

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

I need help with the same thing with a sub alert Repent! <3


http://www.dafont.com/authentic-hilton.font
http://i.imgur.com/WWGHZlv.png

Please and thank you!  Last time I tried it myself the photo would come up but no ones name would show up.

[TheNumbLock]

Requested by: TinyXDestiny

Subscriber:

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

CSS Code:

Code: [Select]

@font-face {
font-family: 'AH';
src: url('http://download1585.mediafire.com/glbk5dd62pxg/a511yvbbha4uy5w/Authentic+Hilton.ttf');
}

#sub-notification {
width: 580px !important;
height: 146px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/WWGHZlv.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: -90px !important;
margin-left: 220px !important;
width: 200px !important;
font-size: 55px !important;
text-transform: capitalize;
font-weight: normal !important;
font-family: AH !important;
color: blue !important;
  text-shadow: 2px 2px 1px #000;
  -webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

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

[TinyxDestiny]

You are the best thank you!

[TinyxDestiny]

It doesn't come up the same, i'll mess with it after stream though. <3

[TheNumbLock]

What doesn't come up the same?