Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: MuddUnders on February 19, 2015, 05:18:43 AM

Title: Custom Follow and Donation notification
Post by: MuddUnders on February 19, 2015, 05:18:43 AM

Follower Alert

Image Link: http://i.imgur.com/cVEuGCK.png
Font Style/Link: http://fontzone.net/font-details/aharoni-bold
Font Color: Light Gray
Any text fill/boarder?: No
Marquee/Scroll Effect?:No
Where do you want text located? (Follower Name):All text below the logo. Tex should say "Thank you following the Muddy Gaming Channel <user>"
Example (If applicable): NA
Anything else?:NA

Donation Alert

Image Link:http://i.imgur.com/cVEuGCK.png
Font Style/Link:http://fontzone.net/font-details/aharoni-bold
Font Color: Light Gray
Any text fill/boarder?:NO
Marquee/Scroll Effect?:No
Currency Type: $
Where do you want text located?(Donator Name, Donation Amount, Message): All text below the logo. Tex should say "Thank you for the donation <user>"
Example (If applicable):NA
Anything else?:No

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 19, 2015, 12:17:33 PM

Final Version

Requested by: MuddUnders

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1800
Height: 750

CSS Code:

Code: [Select]

@font-face {
font-family: "Ahronbd";
src: url("http://rgfonts.bugs3.com/Fonts/ahronbd.ttf");
}
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 750px !important;
height: 750px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/cVEuGCK.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 760px !important;
margin-right: 300px !important;
width: 1000px !important;
font-size: 100px !important;
font-weight: normal !important;
font-family: Ahronbd !important;
color: #909090  !important;
text-shadow: 0 1px 0 #000,
               0 2px 0 #000,
               0 3px 0 #000,
               0 4px 0 #000,
               0 5px 0 #000,
               0 6px 1px #000,
               0 0 5px #000,
               0 1px 3px #000,
               0 3px 5px #000,
               0 5px 10px #000,
               0 10px 10px #000,
               0 20px 20px #000;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.followname:before {

content: "Thank you following the Muddy Gaming Channel " ;

}

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

(http://puu.sh/g4xhR/e0e7a6753b.png)



Donation:

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

CSS Code:

Code: [Select]

@font-face {
font-family: "Ahronbd";
src: url("http://rgfonts.bugs3.com/Fonts/ahronbd.ttf");
}

#donor-notification {
width: 750px !important;
height: 750px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/cVEuGCK.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: 450px !important;
margin-left: 760px !important;
margin-right: 300px !important;
width: 1000px !important;
font-size: 100px !important;
font-weight: normal !important;
font-family: Ahronbd !important;
color: #909090 !important;
text-shadow: 0 1px 0 #000,
               0 2px 0 #000,
               0 3px 0 #000,
               0 4px 0 #000,
               0 5px 0 #000,
               0 6px 1px #000,
               0 0 5px #000,
               0 1px 3px #000,
               0 3px 5px #000,
               0 5px 10px #000,
               0 10px 10px #000,
               0 20px 20px #000;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 760px !important;
margin-right: 300px !important;
width: 1000px !important;
font-size: 100px !important;
font-weight: normal !important;
font-family: Ahronbd !important;
color: #909090 !important;
text-shadow: 0 1px 0 #000,
               0 2px 0 #000,
               0 3px 0 #000,
               0 4px 0 #000,
               0 5px 0 #000,
               0 6px 1px #000,
               0 0 5px #000,
               0 1px 3px #000,
               0 3px 5px #000,
               0 5px 10px #000,
               0 10px 10px #000,
               0 20px 20px #000;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.donor:before {

content: "Thanks for the donation " ;

}

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

(http://puu.sh/g4xj1/a94a70ccc8.png)

Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 19, 2015, 12:22:00 PM

Yes please include the donation amount

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 19, 2015, 12:26:48 PM

Updated. Hopefully that works.

Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 19, 2015, 12:35:15 PM

Can you increase the text size? Maybe add a white border so it will pop a bit more?

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 19, 2015, 12:53:43 PM

Quote from: MuddUnders on February 19, 2015, 12:35:15 PM

Can you increase the text size? Maybe add a white border so it will pop a bit more?

Increased it by 10, and added a white border.

Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 19, 2015, 12:59:53 PM

We are sooo close! I am liking it :)

One last edit: can you change the text border to black, increase it another 10 and that should do it!

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 19, 2015, 01:09:59 PM

Quote from: MuddUnders on February 19, 2015, 12:59:53 PM

We are sooo close! I am liking it :)

One last edit: can you change the text border to black, increase it another 10 and that should do it!

Okay edited, but didn't post pics. Try it out, and let me know.

Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 19, 2015, 01:16:49 PM

Looks good.

1 last thing, the background behind the text, can you make it solid black? I want the text to show up more. That should do it though :)

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 19, 2015, 01:59:13 PM

Try that, and let me know. :3

Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 20, 2015, 09:27:29 AM

I like it

Can you do one more? Can you take the Logo, put it to the side, then the message to the right of it?

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 20, 2015, 10:43:00 AM

Something like this?
Edit: Font size increased to 100 o.o

Follower Alert:

Code: [Select]

@font-face {
font-family: "Ahronbd";
src: url("http://rgfonts.bugs3.com/Fonts/ahronbd.ttf");
}
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 750px !important;
height: 750px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/cVEuGCK.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 760px !important;
margin-right: 300px !important;
width: 1000px !important;
font-size: 100px !important;
font-weight: normal !important;
font-family: Ahronbd !important;
color: #909090  !important;
text-shadow: 0 1px 0 #000,
               0 2px 0 #000,
               0 3px 0 #000,
               0 4px 0 #000,
               0 5px 0 #000,
               0 6px 1px #000,
               0 0 5px #000,
               0 1px 3px #000,
               0 3px 5px #000,
               0 5px 10px #000,
               0 10px 10px #000,
               0 20px 20px #000;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.followname:before {

content: "Thank you following the Muddy Gaming Channel " ;

}

Donation Alert:

Code: [Select]

@font-face {
font-family: "Ahronbd";
src: url("http://rgfonts.bugs3.com/Fonts/ahronbd.ttf");
}

#donor-notification {
width: 750px !important;
height: 750px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/cVEuGCK.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: 450px !important;
margin-left: 760px !important;
margin-right: 300px !important;
width: 1000px !important;
font-size: 100px !important;
font-weight: normal !important;
font-family: Ahronbd !important;
color: #909090 !important;
text-shadow: 0 1px 0 #000,
               0 2px 0 #000,
               0 3px 0 #000,
               0 4px 0 #000,
               0 5px 0 #000,
               0 6px 1px #000,
               0 0 5px #000,
               0 1px 3px #000,
               0 3px 5px #000,
               0 5px 10px #000,
               0 10px 10px #000,
               0 20px 20px #000;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 760px !important;
margin-right: 300px !important;
width: 1000px !important;
font-size: 100px !important;
font-weight: normal !important;
font-family: Ahronbd !important;
color: #909090 !important;
text-shadow: 0 1px 0 #000,
               0 2px 0 #000,
               0 3px 0 #000,
               0 4px 0 #000,
               0 5px 0 #000,
               0 6px 1px #000,
               0 0 5px #000,
               0 1px 3px #000,
               0 3px 5px #000,
               0 5px 10px #000,
               0 10px 10px #000,
               0 20px 20px #000;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

.donor:before {

content: "Thanks for the donation " ;

}

#donor-notification .title {
padding-top: 44px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: left !important;
}


Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 20, 2015, 10:48:15 AM

Yes!

But the text need to be bigger. Like 50x bigger :)

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 20, 2015, 10:53:00 AM

Quote from: MuddUnders on February 20, 2015, 10:48:15 AM

Yes!

But the text need to be bigger. Like 50x bigger :)

Increased the font size to 100. o.o It is really big, so the dimensions I used are 1800 x 750

Title: Re: Custom Follow and Donation notification
Post by: MuddUnders on February 20, 2015, 11:09:24 AM

Perfect

Throw up a donation one, and I think we are good :)

Title: Re: Custom Follow and Donation notification
Post by: TheNumbLock on February 20, 2015, 11:18:42 AM

There you go, in the one post above with the new follower alert, I will update the main post in a bit.