Follow, Donation, and sub Notifications.

[Druitt_streams]

i've been using subalert for all my notifications. anyone out here good with css that could help me get all my notifications set up?
current overlay: http://i.imgur.com/ua2oMp1.png
Popup: http://i.imgur.com/HiiQFWj.png

as i have it now with subalert the popup slides down to just covers the "druitt" part of the overlay with blue text. would anyone out there help me get it all setup? clr browser plugin already installed and ready to go. css and the rest of the setup is what i need help with.

V/R Druitt

[ExpertsOnline]

Hey buddy - do you have a mock-up of where you want it all placed? Maybe create something on Photoshop or take a screenshot of your current one and talk through what needs to be changed.

[Druitt_streams]

Near the beginning of this video you can see someone follow. Donations had the exact same animation but with all the text over the popup. I'm iut of town till Tuesday so I hope this is enough information.  Also are .gif supported? I would love add some animation if that is supported

V/R Druitt

[ExpertsOnline]

Yes - .gif's are supported. Also, I don't think you linked the video.

[Druitt_streams]

My bad here we go https://www.youtube.com/watch?v=JDJplu96_6o

[ExpertsOnline]

Link : http://deepbot.tv/notifications/follownotification2.htm?dur=8000

CSS

Code: [Select]

#follow-notification .header {
padding-top: 5px !important;
visibility: visible !important;
width: 2560px !important;
font-size: 32px !important;
}
#follow-notification .followname {
  padding-top: 5px !important;
  font-family: Algerian !important;
  width: 2560px !important;
  color: #37b2e5 !important;
  font-size: 50px !important;
  margin-left: 0px !important;
}
#follow-notification {
 background-image: url('http://i.imgur.com/HiiQFWj.png') !important;
 width: 2560px !important;
 height: 300px !important;
}

[Druitt_streams]

Awesome! works amazing!  how do i get this to work with the donations as well? i copied and pasted in the same css into the donations as well and it's not working? what lines need to be changed?

[ExpertsOnline]

Donations is a little tricky as there is a lot of information to be moved around to fit your structure. Will work on it when I get some bandwidth.

Sent from my SM-N9005 using Tapatalk

[Druitt_streams]

You are awesome experts! Thank you so much.

[ExpertsOnline]

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

CSS

Code: [Select]

#donor-notification {
 width: 2560px !important;
 height: 250px !important;
 background-color: transparent !important;
 background-image:url('http://i.imgur.com/HiiQFWj.png') !important;
}

#donor-notification .title {
 padding-top: 0px !important;
}


[Druitt_streams]

awesome! one more question tho. how do i get the white to dissapear? there isnt a chroma key function. and i still see all of the white around the png.

[Druitt_streams]

also how do i change the text from yellow to blue? same for the follower.

[Feadern]

awesome! one more question tho. how do i get the white to dissapear? there isnt a chroma key function. and i still see all of the white around the png.

Is the white caused by the 'glow' (fade out) effect? If so, is there chance Deepbot compresses it to a JPEG, Chromakey's the white area, however due to the fade in with blue, it won't be perfect white where the white actually is; which would make it still appear.

I've seen this happen on something else, and the only thing was to get rid of any lower opacity colours as the white just shows through


Edit: because of how your images are, it would be easily possible to just have the centerpiece (marble effect area) drop down rather than the border, and stop it before the border glow, making it appear as though it's the same border (although it won't be the exact same effect)

Hopefully Experts can say for sure though, I'm just trying to help with ideas

[ExpertsOnline]

Are you using OBS? or XSplit? If OBS, you can simply load it into CLR Browser, and no chroma key is needed. Not sure what you mean by getting the white to disappear.

As for the colors, you can change them using the below CSS where the # code is the RGB hex value:

Code: [Select]

#donor-notification .amount {
  color: #DBDB1A !important;
}
#donor-notification .donor {
  color: #DBDB1A !important;
}


[Druitt_streams]

swing by the stream? i'll be live for another 2 hours if you could help me get it all setup!