Custom Images

[maelas]

Hello,

It seems there isnt a way to use custom images for follower notifications. For donations, there is a way to use custom images but when i set the filepath, it wont update to the new image. Just sticks with the check image.

Anyone else facing this?

[ExpertsOnline]

Follower, Sub and Donation notifications, can be fully customised to meet any layout using CSS. The Desktop notification image selection you see in the options is a legacy setting and not the recommended way to publish notifications.

To find out more about OBS Notifications, see the Wiki here : http://deepbot.deep.sg/wiki/OBS+CLR+Browser

Alternatively, Let me know what you are looking for (which image on what layout) and I can help you with the customisation CSS.

Regards,
Experts

[maelas]

Hey Experts,

Well for example I am trying to configure the donation notification to use the creditcard.png that is included with the install and ive chanaged this in the CSS and still it doesnt update. Not sure if i am overlooking something as i dont have much experience using CSS.

Thanks

Maelas

[maelas]

Hello again,

I guess my main problem is finding a way to test the notifications since the original way is not recommended. I cant donate to myself as paypal doesnt allow it.

thanks!

[ExpertsOnline]

There is a preview button on the bot. When you change the CSS, you can simply hit preview to test how it will look.

As for CSS, do post your css here and I can tell what is wrong.

[maelas]

This is what im using to try and get the CreditCard.png to show







#donor-notification {
              display: none;
              position: absolute;
              top: 0px;
              left: 0px;
              width: 800px;
              height: 365px;
                          background-repeat: no-repeat;
                          background-image: url("CreditCard.png");
            }
 
           
                        #donor-notification .date {
              margin-right: 40px;
              padding-top: 43px;
              text-align: right;
              line-height: 20px;
              vertical-align: top;
              font-size: 20px;
              font-family: Algerian;
              text-shadow: 2px 2px 1px #000;
                          color: white;
            }
                       
                        #donor-notification .streamname {
              margin-left: 34px;
              padding-top: 28px;
              text-align: left;
              line-height: 26px;
              vertical-align: top;
              font-size: 24px;
              font-family: Algerian;
              text-shadow: 2px 2px 1px #FFF;
                          color: black;
            }
                       
                        #donor-notification .message {
              margin-left: 38px;
                          float: left;
                          padding-top: 9px;
                          width: 70%;
                          line-height: 40px;
              text-align: left;
              vertical-align: top;
              font-size: 20px;
              font-family: Verdana;
                          color: black;
            }
                        #donor-notification .amount {
              float: right;
                          width: 21%;
              padding-top: 17px;
              text-align: left;
              line-height: 26px;
              vertical-align: top;
              font-size: 30px;
              font-family: Algerian;
              text-shadow: 2px 2px 1px #fff;
                          color: black;
            } 
                        #donor-notification .donor {
              margin-left: 520px;
              padding-top: 147px;
              text-align: left;
              line-height: 28px;
              vertical-align: middle;
              font-size: 28px;
              font-family: Comic Sans MS;
              text-shadow: 2px 2px 1px #fff;
              color: black;

[ExpertsOnline]

You need to change a number of things to align all the elements in the right place. And any attribute you change, you need to add "!important" towards the end.

Try the below if you want a credit card as the donation image.

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

CSS Code:

Code: [Select]

#donor-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 510px !important;
height: 370px !important;
background-repeat: no-repeat !important;
background-image: url('http://i.imgur.com/L8R0vTw.png') !important;
}


#donor-notification .date {
margin-right: 40px;
padding-top: 43px;
text-align: right;
line-height: 20px;
vertical-align: top;
font-size: 20px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: white;
visibility: hidden !important;
}

#donor-notification .streamname {
margin-left: 34px;
padding-top: 28px;
text-align: left;
line-height: 26px;
vertical-align: top;
font-size: 24px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: white;
visibility: hidden !important;
}

#donor-notification .message {
margin-left: 38px;
float: left;
padding-top: 9px;
width: 70%;
line-height: 40px;
text-align: left;
vertical-align: top;
font-size: 20px;
font-family: Verdana;
color: black;
visibility: hidden !important;
}
#donor-notification .amount {
float: left !important;
width: 0% !important;
padding-top: 0px !important;
margin-top: -10px !important;
margin-left: 140px !important;
text-align: left;
line-height: 26px;
vertical-align: top;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;

}
#donor-notification .donor {
margin-left: 53px !important;
padding-top: 0px !important;
margin-top: -120px !important;
text-align: left;
line-height: 28px;
vertical-align: middle;
font-size: 28px;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000 !important;
color: white !important;
float: left !important;
}

[maelas]

Oh wow, so for me to use any custom images, i have to change a number of things in CSS? Hmmm, It will take a while for me to get used to. Ill have to play around with the numbers to see what size is right for the image.

[ExpertsOnline]

Yeah - its a one time effort for customisation, but in return you can do whatever you want.

As always, if you need help, simply post your thoughts and layouts here, and a mod or I can help you with the CSS.

[maelas]

Oh! I understand now. I think i got it from here. I will need to just unhide the Donation message and all should be good!

Thanks!