Changing Sub Image

[clashwithvseven]

Wonder if i have to have "vertical align" and "horizontal align" activated at the same time....

[Feadern]

It looked pretty good using "margin-left: #px;" or was that not what you were in need of?

[clashwithvseven]

No response to answer my question yet.... 

[ExpertsOnline]

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.

[clashwithvseven]

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;

[clashwithvseven]

Heres an 2 pictures of what im talking about. These are actual subscribers 

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?

[Feadern]

Heres an 2 pictures of what im talking about. These are actual subscribers 

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:

Code: [Select]

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

[ExpertsOnline]

Use : http://deepbot.tv/notifications/subnotification1.htm

Code: [Select]

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

[clashwithvseven]

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

[Feadern]

Glad to hear you got it sorted! 

Sorry I couldn't help more, I'll have the bot myself soon I hope so may be able to help more in future