Changing Sub Image

[clashwithvseven]

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!

[clashwithvseven]

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 

[clashwithvseven]

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!

[clashwithvseven]

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.

[clashwithvseven]

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 

[ExpertsOnline]

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.

[clashwithvseven]

Experts is the MAN!

We went on teamviewer, and he showed me how to do what i wanted. For sure an A+ service!

[clashwithvseven]

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;
}

[clashwithvseven]

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

Thanks!

[Feadern]

Code: [Select]

#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

Thanks!

In these 2 areas I would recommend adding:

Code: [Select]

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:

Code: [Select]


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

[clashwithvseven]

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

[Feadern]

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

Code: [Select]

text-align: center;or possible even

Code: [Select]

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!

[clashwithvseven]

im going to try it right now! 

[Feadern]

I should mention, I think I did a little mistake.

Horizontal and Vertical-align are both :middle; rather than :center;

Source

But text-align is 100% :center;
(I use that code so so much lol)

[clashwithvseven]

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

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.