Custom Notification WorkShop

[jwhite8559]

Requested by: 8BitMom

Donation:

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

CSS Code:

Code: [Select]


#donor-notification {
position: center !important;
margin-left: 90px !important;
width: 364px !important;
height: 132px !important;
background-color: transparent !important;
background-image: url('http://i.imgur.com/bFINo7n.png') !important;
background-size: auto !important;
background-repeat: no-repeat !important;
}
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 125px !important;
margin-left: -20px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}
 
#donor-notification .amount {
position: absolute !important;
margin-top: 45px !important;
margin-left: -290px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}
 
#donor-notification .donor {
position: absolute !important;
margin-top: 20px !important;
margin-left: -80px !important;
width: 400px !important;
font-size: 25px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}

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

[8BitMom]

Thank you so much!! <3

[jwhite8559]

8BitMom you are very welcome just let me know if you need anything else.

[fanatics34]

Follower Alert

Image Link: http://i.imgur.com/NGK3YuG.png
Font Style/Link: bold ariel
Font Color: White
Any text fill/boarder?:No
Where do you want text located? (Follower Name): Centered, between wings and blue/black boarder
Example (If applicable):
Anything else?:

[jwhite8559]

Requested by: fanatics34

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1000
Height: 300

CSS Code:

Code: [Select]


#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 234px;
border-radius: 10px;
background-image: url('http://i.imgur.com/NGK3YuG.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 104px !important;
margin-left: 240px !important;
text-align: center;
width: 313px;
font-size: 32px;
font-weight: Bold;
text-transform: uppercase !important;
font-family: Arial !important;
text-shadow: 2px 2px 1px #000;
color: white;
}


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

[fanatics34]

Thank you  jwhite8559!!!

Also I was curious could I get the same thing for a donation notification with the name in the middle and text message below it?

[jwhite8559]

Requested By: fanatics34

Donation:

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

CSS Code:

Code: [Select]


#donor-notification {
position: center !important;
margin-left: 90px !important;
width: 800px !important;
height: 234px !important;
background-color: transparent !important;
background-image: url('http://i.imgur.com/NGK3YuG.png') !important;
background-size: auto !important;
background-repeat: no-repeat !important;
}

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 200px !important;
margin-left: 195px !important;
width: 400px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}

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

#donor-notification .donor {
position: absolute !important;
margin-top: 103px !important;
margin-left: -10px !important;
width: 400px !important;
font-size: 30px !important;
text-transform: uppercase;
font-weight: bold !important;
font-family: Arial !important;
color: white;
}


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

[anthonydh88]

Donation Alert

Image Link: http://i.imgur.com/hZyGIfJ.png
Font Style/Link: any
Font Color: red
Any text fill/boarder?:
Currency Type:
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable): http://i.imgur.com/7kju0Ii.png
Anything else?: it comes down from the top of the screen

From <http://deepbot.deep.sg/forums/index.php?topic=2704.0>
wight maybe 600 tks by the way man

[TheNumbLock]

Requested by: Anthonydh88

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 504px !important;
height: 360px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/hZyGIfJ.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: 140px !important;
        margin-left: 60px !important;
        margin-right: 10px !important;
        width: 300px !important;
        font-size: 14px !important;
        font-weight: normal !important;
        font-family: Arial !important;
        color: #ffffff !important;
    -webkit-text-fill-color: white;
}
#donor-notification .amount {
position: absolute !important;
        text-align: center !important;
        margin-top: 110px !important;
        margin-left: 200px !important;
        margin-right: 10px !important;
        width: 170px !important;
        font-size: 22px !important;
        font-weight: normal !important;
        font-family: Arial !important;
        color: #ffffff !important;
        text-shadow: 2px 2px 10px red;
        -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: red;
    -webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
        text-align: center !important;
        margin-top: 110px !important;
        margin-left: -40px !important;
        margin-right: 0px !important;
        width: 400px !important;
        font-size: 22px !important;
        font-weight: normal !important;
        font-family: Arial !important;
        color: #ffffff !important;
        text-shadow: 0 0 10px red;
        -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: red;
    -webkit-text-fill-color: white;
}
 
#donor-notification .title {
padding-top: 0px !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.)

[Seppuko]

Follower Alert:

Image Link: http://i.imgur.com/mOtkz5q.gif
Font Style: https://www.google.com/fonts (Limelight)
Font Color for Follower Name: #992727
Font Color for the other Text: white
Small black border around the Text:
Text Location: right next to the Gif
Anything Else : Can you add a text after the follower name like this : ExpertsOnline <br> joined the Order of the Samurai!



many thanks in advance =)

[TheNumbLock]

To get this custom font to work for you, you need to go here: http://www.mediafire.com/download/c7xkjhrm6j5jfi9/Limelight-Regular.ttf Don't download it but right click the download button and hit copy link. Then you will insert into the CSS where I put InsertDownloadLinkHere

Requested by: Seppuko

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 900
Height: 240

CSS Code:

Code: [Select]

@font-face {
font-family: 'LL';
src: url('InsertDownloadLinkHere');
}
#follow-notification {
display: none;
position: absolute;
width: 352px !important;
height: 240px !important;
border-radius: 10px;
background-image: url('http://i.imgur.com/mOtkz5q.gif') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 50px !important;
margin-left: 390px !important;
text-align: center !important;
width: 400px !important;
font-size: 30px !important;
font-weight: normal !important;
  font-weight: normal !important;
font-family: LL !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #992727;
}

.followname:after {
margin-left: -30px !important;
content: ' joined the Order of the Samurai!' !important;
-webkit-text-fill-color: white;
white-space: nowrap;
text-align: left !important;
}

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

[Seppuko]

Thank you very much =)

[TheManLtDan]

i would like something to go with this picture im going to link, id like it to say "Lt. Dan You have a new follower!" then have the new followers name pop up below that. just a normal text works for me at the moment, and what ever color of text you think will work best with the picture.


image link: http://sharethe.buzz/wp-content/uploads/2015/03/Tom-Hanks-Forrest-Gump-jpg.jpg

[TheNumbLock]

Requested by: TheManLtDan

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 538
Height: 320

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 538px !important;
height: 302px !important;
background-image: url('http://i.imgur.com/kne2zhr.jpg') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 200px !important;
margin-left: 100px !important;
text-align: center !important;
width: 350px !important;
font-size: 40px !important;
font-weight: normal !important;
  font-family: Impact !important;
  color: #ffffff !important;
-webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: white;
}

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

[TheManLtDan]

thanks so much! now i must ask where do i insert the code to make it work, still really new to all of this