Author Topic: Custom Donation Request (Read 4700 times)

Grumbul · « **on:** August 14, 2015, 02:42:53 AM »

Would some kind soul be able to help me with this please:

#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;
}

This is really great apart from two requests:

1) Could someone please tweak it so the donation is in £ and not $
2) Actually have the text from the donation show up (for example: 'Hi there streamer, here have a buck')

Really appreciate any support someone can offer on this.

TheNumbLock · « **Reply #1 on:** August 14, 2015, 07:36:14 AM »

The message will be off since the notification is a bit too small, but here you go.

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=%C2%A3
Width: 580
Height: 150

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 {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 75px !important;
margin-left: 40px !important;
width: 500px !important;
font-size: 20px !important;
font-weight: bold !important;
font-family: Calbri !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 15px !important;
margin-left: -60px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Calbri !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 15px !important;
margin-left: -70px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: Calbri !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

Grumbul · « **Reply #2 on:** August 14, 2015, 12:39:24 PM »

Repent, that is great - at least I know it can be done now.

Would you mind doing a couple of things for me please (happy to PayPal some cash for the support by the way).

The original CLR Browser hook has the image as 600 x 150, could you please:

1) Do a link that is JUST for the donation thanks and donor name (so the normal thank you message and just the donor name and amount in £). In other words as it originally was but just £ instead of $.

2) Assuming the above is manageable I can work with this (using text to speech maybe for the message). However as a second question/request. How would I go about making it so that all the text shows in the red box? Do we need to extend the size of the original image somehow?

Grumbul · « **Reply #3 on:** August 14, 2015, 12:42:45 PM »

OK, figured out the first bit - I just changed the CLR browser link to this:

http://deepbot.tv/notifications/donationnotification2.htm?ccy=%C2%A3

from this:

http://deepbot.tv/notifications/donationnotification2.htm?

Thinking about it. I quite like the above, it is clean and simple. Though as per original request it would be nice to see how it would work with the larger image with text all centred. However since there is no option to limit characters on the message (I don't think - would be nice to know actually) then it might be problematic anyway.

Is there a way to keep the above pop-up but have an independent window open (transparent) that I could just have as a separate source in OBS which only showed the text? Maybe in that exact same font we are currently using for the donation message text?

Basically a donation would trigger two pop-ups, one with the main thanks and amount (and name) and the other just a transparent text box with plenty of room for messages.

TheNumbLock · « **Reply #4 on:** August 14, 2015, 12:52:56 PM »

Yes, if you can expand the redbox, then ya.

Grumbul · « **Reply #5 on:** August 14, 2015, 12:53:28 PM »

Sorry repent, just amended post

TheNumbLock · « **Reply #6 on:** August 14, 2015, 01:35:28 PM »

Quote from: Grumbul on August 14, 2015, 12:42:45 PM

OK, figured out the first bit - I just changed the CLR browser link to this:

http://deepbot.tv/notifications/donationnotification2.htm?ccy=%C2%A3

from this:

http://deepbot.tv/notifications/donationnotification2.htm?

Thinking about it. I quite like the above, it is clean and simple. Though as per original request it would be nice to see how it would work with the larger image with text all centred. However since there is no option to limit characters on the message (I don't think - would be nice to know actually) then it might be problematic anyway.

Is there a way to keep the above pop-up but have an independent window open (transparent) that I could just have as a separate source in OBS which only showed the text? Maybe in that exact same font we are currently using for the donation message text?

Basically a donation would trigger two pop-ups, one with the main thanks and amount (and name) and the other just a transparent text box with plenty of room for messages.

On the donation page, there is a max of 300 characters.

And ya it might be possible. So you want the above notifications with just name and amount. Then below that in it's own thing, just the message?

Grumbul · « **Reply #7 on:** August 14, 2015, 05:48:04 PM »

You have it Repent, perfect.

TheNumbLock · « **Reply #8 on:** August 14, 2015, 06:09:57 PM »

Ehh didn't work like we wanted, so I just photoshopped it.

Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 580px !important;
height: 200px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/x3YFkwF.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 90px !important;
margin-left: 40px !important;
width: 500px !important;
font-size: 24px !important;
font-weight: bold !important;
font-family: Calbri !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 20px !important;
margin-left: -60px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Calbri !important;
color: blue !important;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 20px !important;
margin-left: -70px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: bold !important;
font-family: Calbri !important;
color: blue !important;
text-transform: capitalize;
text-shadow: 2px 2px black;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

Grumbul · « **Reply #9 on:** August 15, 2015, 02:57:59 PM »

Repent, this is awesome thank you.

What happens if someone hits the 300 character limit? Will it do what happened with the original one?

TheNumbLock · « **Reply #10 on:** August 15, 2015, 03:03:25 PM »

There is a max width I set, so if anything it will go below the image. If you start getting donation messages longer than 300 characters, then you or I can increase the width under .message by a little. Might solve the problem.

Deep Bot - Twitch Streamer Assistant

News:

Author Topic: Custom Donation Request (Read 4700 times)

Grumbul

Custom Donation Request

TheNumbLock

Re: Custom Donation Request

Grumbul

Re: Custom Donation Request

Grumbul

Re: Custom Donation Request

TheNumbLock

Re: Custom Donation Request

Grumbul

Re: Custom Donation Request

TheNumbLock

Re: Custom Donation Request

Grumbul

Re: Custom Donation Request

TheNumbLock

Re: Custom Donation Request

Grumbul

Re: Custom Donation Request

TheNumbLock

Re: Custom Donation Request