Custom Notification WorkShop

[TheNumbLock]

Donation Alert

Image Link: http://imgur.com/gallery/YQeWejH
Font Style/Link: Stencil
Font Color: Gray with Green outline
Any text fill/boarder?: I would like a clean boarder just to clean it up, maybe a Grey and Green line box
Currency Type: USD
Where do you want text located? In the middle of the GIF. It should say (name) just donated (amount)!
Example (If applicable):
Anything else?:

Follower Alert

Image Link: http://imgur.com/gallery/a03YMIc
Font Style/Link: Broadway
Font Color:  Gray with Blue outline
Any text fill/boarder?: Same Boarder as the donations alert
Where do you want text located? Just above the text in the GIF (Follower Name): (follower name) followed
Example (If applicable):
Anything else?:

Do you have links to the fonts you want?

[mikefromhayward]

Follower Alert

Image Link: http://imgur.com/gallery/h2KDSPx
Font Style/Link: Times New Roman
Font Color: Red
Any text fill/boarder?:  A thin white border
Where do you want text located? (Follower Name): centered underneath the image 
Example (If applicable): Thanks for the follow (follower name)

[TheNumbLock]

Requested by: mikefromhayward

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 960px !important;
height: 540px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url("http://i.imgur.com/h2KDSPx.gif") !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 530px !important;
margin-left: 100px !important;
width: 800px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: Times New Roman !important;
color: red !important;
text-transform: capitalize;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 1px;
text-shadow: 10px white !important;
}

.followname:before {
content: "Thanks for the follow, " !important;
}

.followname:after {
content: "!" !important;
}

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

[mikefromhayward]

I'm having some trouble adding this to Xsplit. I added the source, pasted in the css and it still shows the default notification. I'm not sure what to do.

[TheNumbLock]

I'm having some trouble adding this to Xsplit. I added the source, pasted in the css and it still shows the default notification. I'm not sure what to do.

It is the CSS, I fixed it in the post. Basically xSplit likes " while OBS likes '

[mikefromhayward]

It's working, thanks a bunch, it looks great!

[SeanKushery423]

Follower Alert

Image Link: http://i.imgur.com/poRMnCK.png
Font Style/Link: Berlin Sans FB Demi   http://fontsgeek.com/fonts/Berlin-Sans-FB-Demi-Bold
Font Color: Grey, Green, Navy Blue (match logo)
Any text fill/boarder?: I would like a box with a designed edge. Clean is really all I need
Where do you want text located? (Follower Name): Center but to the right of the logo
Example (If applicable):
Anything else?: I would like it to say (Follower Name) has joined The Social Club!

Donation Alerts

Image Link: http://i.imgur.com/poRMnCK.png
Font Style/Link: Berlin Sans FB Demi http://fontsgeek.com/fonts/Berlin-Sans-FB-Demi-Bold
Font Color: Grey, Green, Navy Blue (match logo)
Any text fill/boarder?: Same as follower, Just a clean box
Currency Type: USD $$
Where do you want text located?(Text Options: Donator Name, Donated [dollar amount] you beautiful creature!
Example (If applicable):
Anything else?:

Sorry for the 2 posts, I realized I wanted it more professional looking, and noticed I forgot links in my first post

[TheNumbLock]

@SeanKushery423

I don't really photoshop to include things in the pic. If you want a box, I recommend editing the photo and putting the logo and box around it that you want. I can do the css with just the logo tho.

[SeanKushery423]

Whatever works, I just wanted an alert with the Avatar near it

[SeanKushery423]

@SeanKushery423

I don't really photoshop to include things in the pic. If you want a box, I recommend editing the photo and putting the logo and box around it that you want. I can do the css with just the logo tho.

Honestly, anything that matches the color scheme of my avatar will do. Sorry, if its a headache

[TheNumbLock]

Requested by: SeanKushery423

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1500
Height: 500

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 499px !important;
height: 499px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/poRMnCK.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 170px !important;
margin-left: 500px !important;
width: 700px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: Berlin Sans FB Demi Bold !important;
color: lightgrey !important;
text-transform: capitalize;
-webkit-text-stroke-color: limegreen;
-webkit-text-stroke-width: 1.5px;
text-shadow: 10px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: ' has joined The Social Club!' !important;
}

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




Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 0px !important;
width: 499px !important;
height: 499px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/poRMnCK.png') !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: 200px !important;
margin-left: 200px !important;
width: 600px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 50px !important;
font-family: Berlin Sans FB Demi Bold !important;
color: lightgrey !important;
text-transform: capitalize;
-webkit-text-stroke-color: limegreen;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 150px !important;
margin-left: 400px !important;
width: 600px !important;
text-align: center !important;
font-weight: normal !important;
font-size: 50px !important;
font-family: Berlin Sans FB Demi Bold !important;
color: lightgrey !important;
text-transform: capitalize;
-webkit-text-stroke-color: limegreen;
-webkit-text-stroke-width: 2px;
text-shadow: 3px !important;
}

.donor:after {
content: ', Donated ' !important;
}

.amount:after {
content: ' you beautiful creature!' !important;
}

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

[TinyxDestiny]

I will be working on Custom Notifications for all DeepBot users. Don't expect your notifications to be done right away, since I am doing this for free. Expect up to 48 hour delay for your custom notifications to be done. (It all depends on how busy I am and how many requests I get.) If you want them done faster, you can donate to me, and I will move you to the top of the list. (PM me for details on that.)

Post Below with the following the notifications you need. Here are the layouts:

For image links use Imgur.

Follower Alert:

Code: [Select]

Follower Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Follower Name):
Example (If applicable):
Anything else?:

Donation Alert: (You do not need to include all 3 text options, Just an FYI.)

Code: [Select]

Donation Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Currency Type:
Where do you want text located?(Text Options: Donator Name, Donation Amount, Message)
Example (If applicable):
Anything else?:

Subscriber Alert:

Code: [Select]

Subscriber Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Subscriber Name)
Example (If applicable):
Anything else?:


Follower Alert

Image Link:  http://i.imgur.com/HfdAkqJ.png
Font Style/Link: http://www.dafont.com/lobster.font
Font Color: White
Any text fill/boarder?: Whatever just long it stands out  Maybe border like a twitter blue?
Where do you want text located? (Follower Name): Middle
Example (If applicable): http://i.imgur.com/TgNisYO.png
Anything else?: Thank you Repent!

[TheNumbLock]

Not sure what is up with the font, but it doesn't seem to work for me. o.o

Requested by: TinyXDestiny

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 580px !important;
height: 110px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url('http://i.imgur.com/HfdAkqJ.png') !important;
background-repeat: no-repeat;
}

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

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: -70px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Lobster 1.4 !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: #00aced;
-webkit-text-stroke-width: 0.5px;
text-shadow: 10px white !important;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}

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

[TinyxDestiny]

That works thank you so much! Going to put it in now!

[TinyxDestiny]

If for some reason later I wanted just swap for a gif can I swap the img link?