« previous next »
Pages: [1]

Author Topic: Custom Donation and Follow Help.  (Read 4328 times)

0 Members and 2 Guests are viewing this topic.

Yawn_Gaming

  • Youngling
  • *
  • Posts: 13
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Yawn_Gaming
Custom Donation and Follow Help.
« 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
Logged

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom Donation and Follow Help.
« Reply #1 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:


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:
« Last Edit: August 22, 2014, 12:49:04 AM by ExpertsOnline »
Logged

Yawn_Gaming

  • Youngling
  • *
  • Posts: 13
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Yawn_Gaming
Re: Custom Donation and Follow Help.
« Reply #2 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
Logged

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom Donation and Follow Help.
« Reply #3 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;
}
Logged

Yawn_Gaming

  • Youngling
  • *
  • Posts: 13
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Yawn_Gaming
Re: Custom Donation and Follow Help.
« Reply #4 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
Logged

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom Donation and Follow Help.
« Reply #5 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..
Logged

Yawn_Gaming

  • Youngling
  • *
  • Posts: 13
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Yawn_Gaming
Re: Custom Donation and Follow Help.
« Reply #6 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?
Logged

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom Donation and Follow Help.
« Reply #7 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.
Logged

Yawn_Gaming

  • Youngling
  • *
  • Posts: 13
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Yawn_Gaming
Re: Custom Donation and Follow Help.
« Reply #8 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;
}
Logged

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom Donation and Follow Help.
« Reply #9 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;
}
Logged

Yawn_Gaming

  • Youngling
  • *
  • Posts: 13
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Yawn_Gaming
Re: Custom Donation and Follow Help.
« Reply #10 on: August 22, 2014, 03:19:55 AM »
Perfect! Thank you so much for all the help!
Logged
Pages: [1]
« previous next »