Deep Bot - Twitch Streamer Assistant
Deep Bot => Custom Notifications => Topic started by: Druitt_streams on May 23, 2014, 08:26:28 AM
-
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
-
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.
-
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
-
Yes - .gif's are supported. Also, I don't think you linked the video.
-
My bad here we go https://www.youtube.com/watch?v=JDJplu96_6o
-
Link : http://deepbot.tv/notifications/follownotification2.htm?dur=8000
CSS
#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;
}
-
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?
-
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
-
You are awesome experts! Thank you so much.
-
Link : http://deepbot.tv/notifications/donationnotification2.htm
CSS
#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;
}
-
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.
-
also how do i change the text from yellow to blue? same for the follower.
-
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 :)
-
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:
#donor-notification .amount {
color: #DBDB1A !important;
}
#donor-notification .donor {
color: #DBDB1A !important;
}
-
swing by the stream? i'll be live for another 2 hours if you could help me get it all setup!
-
to change the red header on the follow notification, you can change the color on the below CSS
#follow-notification .header {
color: #FF0000 !important;
}
To increase the font size on the donation message, increase the number below from 20:
#donor-notification .message {
font-size: 20px;
}
-
There is a section of text "has donated" which code do I need to edit that? I got the rest all changed color and text size but that is the only pice I'm having trouble edditing.
-
To change that section, you can edit the font and color in the below CSS.
#donor-notification .header {
color: #37b2e5 !important;
font-size: 38px !important;
font-family: Algerian !important;
}
-
Are .swf files supported for notifications?
-
Currently I do not have any SWF files linked with DeepBot.
-
I Have a Question.
The follower notification is a drop down and the donation notification is a fade in. How can you get both to be a drop down or fade in?
Thanks for your time.
-
Just add &top=1 or &top=2 to the end of the URLs
-
Im sorry to bother you again,But can you give me an example with this url.
http://deepbot.tv/notifications/follownotification2.htm?dur=8000
Ive tried everything and can not get it to work for me.
Thanks again for your time and what you guys do for us.
-
Im sorry to bother you again,But can you give me an example with this url.
http://deepbot.tv/notifications/follownotification2.htm?dur=8000
Ive tried everything and can not get it to work for me.
Thanks again for your time and what you guys do for us.
http://deepbot.tv/notifications/follownotification2.htm?dur=8000&top=1 or http://deepbot.tv/notifications/follownotification2.htm?dur=8000&top=2
-
RepentGamingTV, Im so sorry to bother you again but can you do the code and test and post it here so both the Donation and Follow both do the drop down and not the fade Ive tried everything. and can not get this to work as a drop down on the follow alert. Also can you do a sub Alert for this also for me.
Thanks again so much.
Vinny
-
RepentGamingTV, Im so sorry to bother you again but can you do the code and test and post it here so both the Donation and Follow both do the drop down and not the fade Ive tried everything. and can not get this to work as a drop down on the follow alert. Also can you do a sub Alert for this also for me.
Thanks again so much.
Vinny
http://deepbot.tv/notifications/follownotification2.htm?dur=8000&top=1
http://deepbot.tv/notifications/donationnotification2.htm?top=1
http://deepbot.tv/notifications/subnotification3.htm?top=1
Just give me the image links/files you want to use, and I can do the code. The URLs above are for all notifications to drop down from the top.
-
Its the Same Image thats used on here
http://i.imgur.com/HiiQFWj.png I just need one thats a sub notification same size and drop down just like the other two.
Thanks
-
CSS:
body {
background-color: transparent;
color: white;
}
#sub-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 2560px !important;
height: 300px !important;
background-repeat: no-repeat;
background-image: url('http://i.imgur.com/HiiQFWj.png') !important;
background-position-y: 0px;
}
#resub-notification {
display: none;
position: absolute;
top: 0px;
left: 80px !important;
width: 2560px !important;
height: 300px !important;
background-repeat: no-repeat;
background-image: url('http://i.imgur.com/HiiQFWj.png') !important;
background-position-y: 0px;;
}
.subname {
margin-left: 1050px !important;
margin-top: 70px !important;
padding-top: 0px !important;
width: 400px !important;
text-align: center !important;
font-size: 50px !important;
font-weight: bold !important;
font-family: Algerian !important;
color: #37b2e5 !important;
-webkit-text-stroke: 0px;
-webkit-text-stroke-color: black;
}
.months {
margin-left: -500px !important;
margin-top: -30px !important;
padding-top: 0px !important;
width: 400px !important;
text-align: center !important;
font-size: 50px !important;
font-weight: bold !important;
font-family: Algerian !important;
color: #37b2e5 !important;
-webkit-text-stroke: 0px;
-webkit-text-stroke-color: black;
}
.months:after {
content: 'Subscriber' !important;
margin-left: 1600px !important;
margin-top: 180px !important;
padding-top: 0px !important;
width: 400px !important;
text-align: center !important;
font-size: 50px !important;
font-weight: bold !important;
font-family: Algerian !important;
color: #37b2e5 !important;
-webkit-text-stroke: 0px;
-webkit-text-stroke-color: black;
}
.badge {
visibility: hidden !important;
}
@-webkit-keyframes rot {
from {
-webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
}
}