Deep Bot - Twitch Streamer Assistant
Deep Bot => Custom Notifications => Topic started by: clashwithvseven on May 16, 2014, 03:40:36 PM
-
So i understand that its possible to change the image for the sub notification.
I figured out how to change the image, but all i want is the Name of the subber to pop up. I dont want to have the "new subscriber" or "clashwithvseven" text there.
How can i change what texts show? How can i change the position the name of the subscriber pops up?
I thought this might be the whole "OBS CLR Browser" thing. So i do have it enabled in the bot. I actually followed your tutorial on Youtube to install the plugins (CLR plugin & Video Source plugin). I am also running the correct direct X.
I simply extracted the to rar files, and copied their contents over to the OBS plugins folder. Yet, when i open OBS and i look at the plugins... nothing shows! So of course right clicking to add the clr source doesn't show as well. I use the 64 bit version, and i downloaded both 64 bit versions.
I dont get it! I have the exact amount of folders you did, and files outside the folders in the Plugins Folder. Yet plugins dont show in OBS! Restarting the program didnt change anything, neither did restarting my computer.
Im running a new Laptop with dual GPU and has an i7. Windows 8.1
These things are soo complicated :-[
Any help appreciated!
-
So update.
I decided to download the 32 bit versions and finally i was able to add the source! So its interesting that it doesnt work for the 64 bit.
Now just to figure out the rest :-\
-
Now im 100% lost.
In the tutorial here:http://deepbot.deep.sg/wiki/OBS+CLR+Browser
I got to adding it. The Credit Card shows up within OBS.
But like i stated earlier, i made my own image. Heres the link to it: http://imgur.com/6e6H9ZZ
With that image, all i want is the name of the subscriber to pop up in Middle of the Badge where the flames are. How can i do this? I see the tutorial says: "Advanced Users
For users who wish to use CSS to customize their donation alert here is the stylesheet:"
Use CSS? How do i do this?
Do i even need to do that? All i want to pop up is the name of the Subscriber.
Would really appreciate the help!
-
Ive found the CSS part, but when it comes to that kind of code im lost lol.
Ive left my bot online. It would probably be so much faster for you to just add the image for me? And all im wanting is the name to appear in the middle, with the text slightly smaller than the "has subscribed" thats all. No other texts.
If not, ill be back on in about 8 or 9 hours. Hoping i can get this figured out before my stream 17 hours. (8pm Eastern)
Thanks again - spent 3 hours on this so far :-[ i gotta get some sleep now haha.
-
I see others questions were answered but mine isnt? If its too much work for me to figure out, thats ok you can tell me. I hope im not being ignored?
Im sure others at some point would like to know how to do this as well ::)
-
Sorry - Was just waiting for you to come online so I can understand exactly you want to do and explain the steps involved. Am in your stream chat now.
-
Experts is the MAN!
We went on teamviewer, and he showed me how to do what i wanted. For sure an A+ service!
-
Well,
First let me start by saying, the whole deal to simply get an image going for a new sub is more difficult than it should be.
Having it implemented into the bot program itself would be so much easier for the average user. Adding custom image, with an easy way to edit position as well. Adding font or text options as well.
But anyways to my real issue,
Ive decided to use a new sub image. So i replaced the URL for the image under css. I then changed the width/height size in css AND on the General Tab.
All i get is the name to pop up now... What have i missed lmao? I dont get why it cant be THAT easy, but apparently its not?
Heres what my css looks like:
body {
background-color: transparent;
color: white;
}
#sub-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
background-repeat: no-repeat;
background-image:url('http://hostmypicture.com/images/templanqn.png') !important;
background-position-y: 30px;
}
#sub-notification .subname {
margin-left: 279px !important;
padding-top: 260px !important;
width: 385px;
line-height: 45px;
vertical-align: middle;
font-size: 32px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: #ffffff;
}
#sub-notification .streamname {
margin-right: 40px;
padding-top: 20px;
text-align: right;
line-height: 45px;
vertical-align: top;
font-size: 55px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: transparent;
visibility: hidden !important;
text-shadow: 0 0 3px rgba(255,255,255,1);
}
#sub-notification .header {
margin-right: 0px;
padding-top: 10px;
text-align: center;
vertical-align: top;
font-size: 32px;
line-height: 26px;
font-family: Algerian;
text-shadow: 2px 2px 1px #CBC2FF;
color: black;
visibility: hidden !important;
}
-
After a very long time i was able to figure out what was going on. It had to do with the pixel placement of the image and the Name text. Atleast i got it.
1 thing that i havent been able to figure out, was the name that pops up does not stay centered.
So it will look like this for one name:
Thank You for Subscribing
randomname
Then on a short name it will look like
Thank you for Subscribing
name
Let me post my css log here incase anyone can see what the issue is.
body {
background-color: transparent;
color: white;
}
#sub-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
background-repeat: no-repeat;
background-image: url('http://hostmypicture.com/images/templanqn.png') !important;
background-position-y: 0px;
}
#sub-notification .subname {
margin-left: 168px !important;
padding-top: 0px !important;
width: 385px;
line-height: 14px !important;
vertical-align: center;
font-size: 28px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: ##FF0000;
}
#sub-notification .streamname {
margin-right: 40px;
padding-top: 20px;
text-align: right;
line-height: 45px;
vertical-align: top;
font-size: 55px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: transparent;
visibility: hidden !important;
text-shadow: 0 0 3px rgba(255,255,255,1);
}
#sub-notification .header {
margin-right: 0px;
padding-top: 10px;
text-align: center;
vertical-align: top;
font-size: 32px;
line-height: 26px;
font-family: Algerian;
text-shadow: 2px 2px 1px #CBC2FF;
color: black;
visibility: hidden !important;
}
Help appreciated :D
Thanks!
-
#sub-notification .subname {
margin-left: 168px !important;
padding-top: 0px !important;
width: 385px;
line-height: 14px !important;
vertical-align: center;
font-size: 28px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: ##FF0000;
}
#sub-notification .streamname {
margin-right: 40px;
padding-top: 20px;
text-align: right;
line-height: 45px;
vertical-align: top;
font-size: 55px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: transparent;
visibility: hidden !important;
text-shadow: 0 0 3px rgba(255,255,255,1);
}
Help appreciated :D
Thanks!
In these 2 areas I would recommend adding:
text-align: center;
this will center the text :)
(I've noticed the streamname already has text-align: right; this could be for a specific reason, so just add it to the bit that manages the viewers name)
Depending on how the HTML is built up, also using:
width: (set this to what you want the maximum width of text to be)px;
margin-left: auto;
margin-right: auto;
Sorry I can't help more, I don't have the bot myself to test out :) but based on my HTML/CSS knowledge, this is how it would be done :)
-
well the streamname part is hidden.
The text im speaking of is the "subname"
Ok i can try adding that under subname. but what does "vertical align" mean then....
Ill report back whether it works or not
-
As far as I can understand, verticle align centers in within the <div> tag vertically, so imagine a div is like this:
_______________________________
| ViewerName
|
|
|
|_______________________________
(terrible box im sorry!)
Then using vertical align it would move it down within the div like so:
_______________________________
|
|
| ViewerName
|
|_______________________________
Which is probably what you want also, so keep that in.
Now you can either use
text-align: center;or possible even
horizontal-align: center;
Again this is based on website design, not coding, however I imagine it's all the same :)
Sorry if that doesn't help, but hopefully it sorts it out!
-
im going to try it right now! :o
-
I should mention, I think I did a little mistake.
Horizontal and Vertical-align are both :middle; rather than :center;
Source (http://www.w3schools.com/cssref/pr_pos_vertical-align.asp)
But text-align is 100% :center;
(I use that code so so much lol)
-
So the line "Margin-left: 168px" is whats keeping the text away from the left side.
When activated it looks like this:
http://i.imgur.com/eoNMYGM.png
When i deactivate the line and insert "horizontal-align: center;"
This is what i get:
http://imgur.com/eoNMYGM,AOJmVp6#1
But i just saw you say middle. so let me quick try that. Problem is with "margin-left" it only works on name lengths that are that long. Shorter names go off center :P
Update: when i replace with "middle" instead of center it doesnt change the text placement at all >:(
Update 2: i used the line "text-align: center;" and it actually moved a bit from the right side. So it is doing something.
and just a side note adding "!important" is needed for the change to take effect.
-
Wonder if i have to have "vertical align" and "horizontal align" activated at the same time....
-
It looked pretty good using "margin-left: #px;" or was that not what you were in need of?
-
No response to answer my question yet.... >:(
-
Hey mate - can you link your sub image again? http://hostmypicture.com/images/templanqn.png does not work.
This is still new. Apologies for it being so hard to customize, I will have a better way of doing this in the future.
-
Image was changed : http://i.imgur.com/ZTgYpXu.png
Sorry.
Just looking how to keep names centered Experts. When i center your name on the "preview" it looks great. But if someone has a really short name its off center.
Here the current log:
body {
background-color: transparent;
color: white;
}
#sub-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
background-repeat: no-repeat;
background-image: url('http://i.imgur.com/ZTgYpXu.png') !important;
background-position-y: 0px;
}
#sub-notification .subname {
margin-left: 168px !important;
padding-top: 0px !important;
width: 385px;
line-height: 14px !important;
vertical-align: center;
font-size: 28px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: ##FF0000;
}
#sub-notification .streamname {
margin-right: 40px;
padding-top: 20px;
text-align: right;
line-height: 45px;
vertical-align: top;
font-size: 55px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
color: transparent;
visibility: hidden !important;
text-shadow: 0 0 3px rgba(255,255,255,1);
}
#sub-notification .header {
margin-right: 0px;
padding-top: 10px;
text-align: center;
vertical-align: top;
font-size: 32px;
line-height: 26px;
font-family: Algerian;
text-shadow: 2px 2px 1px #CBC2FF;
color: black;
visibility: hidden !important;
-
Heres an 2 pictures of what im talking about. These are actual subscribers :P
Picture 1: Longer type name fits quite well, its a TAD off. But def okay: http://i.imgur.com/HlwoGhr.jpg
Picture 2: Short Sub name, looks terrible and a bit unprofessional: http://imgur.com/mvsYHYp,HlwoGhr#0
I did see you mention an easier way of making this happen. I cant wait till then, as somebody who doesnt know ANYTHING about css. This is def a painfull process.
So, what can i do to fix this?
-
Heres an 2 pictures of what im talking about. These are actual subscribers :P
Picture 1: Longer type name fits quite well, its a TAD off. But def okay: http://i.imgur.com/HlwoGhr.jpg
Picture 2: Short Sub name, looks terrible and a bit unprofessional: http://imgur.com/mvsYHYp,HlwoGhr#0
I did see you mention an easier way of making this happen. I cant wait till then, as somebody who doesnt know ANYTHING about css. This is def a painfull process.
So, what can i do to fix this?
That looks like it's text-align: left; with possibly an added margin-left or padding-left to push it further right (as a false centering).
You need to find which CSS is the code, and try remove anything from it (keep a backup of the code!) that plays with the alignment, and then add something like I said before:
text-align: center !important;
This will center it to the actual <div> that it's in. However when it's centered, if the div isn't directly inside the body of it, it could be a little off-center, but once you have the text centered, then you can play around with the margin-left/padding-left (I wouldnt be sure which, I'd have to try it to know sorry) to push it into place, since it changes the (thinking of the best way to describe it here) 'creation point' to the middle of the text no matter how large or small.
However it would be nice to know the class/ID of the div that the text is inside of so you can play with the margins of the actual div rather than the text itself, or even center align the div also :)
Hope that helps, if not, hopefully Experts can help you out properly since I'm only an amateur web designer lol :)
-
Use : http://deepbot.tv/notifications/subnotification1.htm
#sub-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
background-repeat: no-repeat;
background-image: url('http://i.imgur.com/ZTgYpXu.png') !important;
background-position-y: 0px;
}
#sub-notification .subname {
margin-left: 100px !important;
padding-top: 68px !important;
width: 380px !important;
text-align: center !important;
line-height: 14px !important;
font-size: 28px !important;
font-family: Algerian !important;
text-shadow: 2px 2px 1px #000;
color: ##FF0000;
}
-
EDITED:
I didnt realize till after that i needed to change the URL Under the General Tab. After i changed that, then copied and pasted what you said it all aligned perfectly. Ill use it today and let you know how it goes.
Thank you Experts and Feadern for your assistance
-
Glad to hear you got it sorted! ;D
Sorry I couldn't help more, I'll have the bot myself soon I hope so may be able to help more in future ;)