Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: Yawn_Gaming on August 21, 2014, 01:48:15 AM

Title: Custom Donation and Follow Help.
Post by: Yawn_Gaming on August 21, 2014, 01:48:15 AM

Trying to get some help with my Custom Donation and Follow. I have no clue how to use CSS. Thank you!!!

Follow - http://i.imgur.com/A9waiZn.png

Donation - http://i.imgur.com/sSMbsb4.png

Title: Re: Custom Donation and Follow Help.
Post by: ExpertsOnline on August 21, 2014, 11:57:04 PM

To use these, install the CLR Browser plugin for OBS. Then add CLR Browser source with the below link and dimensions. There should be a tab called CSS in which you past the CSS customisation script.

Follows

Link : http://deepbot.tv/notifications/follownotification1.htm?dur=10000
Width: 600
Height: 145

CSS Code

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 600px !important;
height: 145px !important;
border-radius: 10px;
background-image: url('http://i.imgur.com/A9waiZn.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 35px !important;
margin-left: 0px !important;
text-align: center !important;
width: 600px !important;
font-size: 38px !important;
font-weight: bold !important;
font-family: Verdana !important;
color: #FF0000 !important;
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: #000
}
Preview:
(http://puu.sh/b1UBZ/60fa8ea106.jpg)

Donations

Link : http://deepbot.tv/notifications/donationnotification2.htm?top=1

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 812px !important;
height: 273px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/sSMbsb4.png') !important;
}

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

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

#donor-notification .message {
margin-left: 150px !important;
margin-top: -168px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 650px !important;
line-height: 40px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
float: left;
width: 100px !important;
margin-top: 88px !important;
margin-left: 150px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 520px !important;
padding-top: 85px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: middle !important;
font-size: 29px !important;
font-family: Comic Sans MS !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}

Preview:
(http://puu.sh/b1Vl0/098147855e.jpg)

Title: Re: Custom Donation and Follow Help.
Post by: Yawn_Gaming on August 22, 2014, 01:31:52 AM

The follower came out perfect but the donations seems to be off a bit this is what I am getting http://puu.sh/b212j/9378afaee5.jpg

Title: Re: Custom Donation and Follow Help.
Post by: ExpertsOnline on August 22, 2014, 01:42:42 AM

Try this *note link has changed*

Link : http://deepbot.tv/notifications/donationnotification.htm

Code :

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 812px !important;
height: 273px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/sSMbsb4.png') !important;
overflow: hidden !important;
}

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

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

#donor-notification .message {
margin-left: 150px !important;
margin-top: -168px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 650px !important;
line-height: 40px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
float: left;
width: 100px !important;
margin-top: 88px !important;
margin-left: 150px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 520px !important;
padding-top: 85px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: middle !important;
font-size: 29px !important;
font-family: Comic Sans MS !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}

Title: Re: Custom Donation and Follow Help.
Post by: Yawn_Gaming on August 22, 2014, 01:45:51 AM

Better but it is still cut off a bit and I am still gettting the scroll bar http://puu.sh/b21Ya/3caba569ff.jpg and the donators name is low

Title: Re: Custom Donation and Follow Help.
Post by: ExpertsOnline on August 22, 2014, 01:47:28 AM

Set the width to 820 and height to 300 ... just tested on my OBS .. seems to look ok..

Title: Re: Custom Donation and Follow Help.
Post by: Yawn_Gaming on August 22, 2014, 01:52:06 AM

That seems to do it! Thank you so much for your great customer support!! One more question for you. Is there a way to move the amount text over to the left a bit?

Title: Re: Custom Donation and Follow Help.
Post by: ExpertsOnline on August 22, 2014, 01:53:37 AM

under the "#donor-notification .amount {" section, you can reduce the number corresponding to margin-left to move it.

Title: Re: Custom Donation and Follow Help.
Post by: Yawn_Gaming on August 22, 2014, 02:04:13 AM

I don't know where the issue is. I tried adjusting the Margin-left and it did move the name to where it should be but the amount stayed where it is at. http://puu.sh/b23cR/4f7861d5a7.jpg



#donor-notification {
position: absolute;
left: 0px !important;
width: 812px !important;
height: 273px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/sSMbsb4.png') !important;
overflow: hidden !important;
}

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

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

#donor-notification .message {
margin-left: 150px !important;
margin-top: -168px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 650px !important;
line-height: 40px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
float: left;
width: 100px !important;
margin-top: 88px !important;
margin-left: -750x !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 520px !important;
padding-top: 85px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: middle !important;
font-size: 29px !important;
font-family: Comic Sans MS !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}

Title: Re: Custom Donation and Follow Help.
Post by: ExpertsOnline on August 22, 2014, 02:26:11 AM

Try this? I think there may be an issue in rendering floating panels, so have switched to absolute positions

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 812px !important;
height: 273px !important;
background-repeat: no-repeat;
background-size: none !important;
background-image: url('http://i.imgur.com/sSMbsb4.png') !important;
overflow: hidden !important;
}

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

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

#donor-notification .message {
position: absolute;
margin-left: 150px !important;
margin-top: -55px !important;
float: left !important;
height: 120px !important;
padding-top: 0px !important;
width: 650px !important;
line-height: 40px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
position: absolute;
width: 20% !important;
margin-top: 88px !important;
margin-left: 145px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
position: absolute;
margin-left: 515px !important;
padding-top: 85px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: initial !important;
font-size: 29px !important;
font-family: Comic Sans MS !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}

Title: Re: Custom Donation and Follow Help.
Post by: Yawn_Gaming on August 22, 2014, 03:19:55 AM

Perfect! Thank you so much for all the help!