Custom donation and Subscriber Help

[nexxx]

Hello
1. Could you please tell me where i put the code once you complete it.
2. For the donation I added how i want the final outcome to look, as well as just the background img.
3. For the subscriber the only text i want is the username.

Thank you in advance!!

[ExpertsOnline]

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.

Sub

Link : http://deepbot.tv/notifications/subnotification1.htm
Width: 400
Height: 100

CSS Code

Code: [Select]

#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px !important;
  height: 100px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/UFgtYL6.jpg') !important;
  background-position-y: 0px;
}
#sub-notification .subname {
  margin-left: 100px !important;
  padding-top: 50px !important;
  width: 300px !important;
  text-align: center !important;
  line-height: 14px !important;
  font-size: 30px !important;
  font-family: Algerian !important;
  text-shadow: 1px 1px 1px #000 !important;
  color: #d7d7d7 !important;
}
Preview


Donation

Link : http://deepbot.tv/notifications/donationnotification4.htm?top=1&text=from

Code :

Code: [Select]

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

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

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

#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
width: 0px !important;
margin-top: 0px !important;
margin-left: 0px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: center !important;
font-size: 26px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 0px !important;
margin-top: 0px !important;
padding-top: 0px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: center !important;
font-size: 26px !important;
font-family: Verdana !important;
text-shadow: 0px 0px 0px #000 !important;
color: white !important;
}
#donor-notification .header {
color: white !important;
font-size: 28px !important;
font-family: Verdana !important;
font-size: 26px !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
#donor-notification .title {
color: white !important;
font-size: 28px !important;
margin-top: 30px !important;
margin-left: 89px !important;
text-align: left !important;
}

Preview