Author Topic: Changing Sub Image  (Read 7723 times)

0 Members and 1 Guest are viewing this topic.

clashwithvseven

  • Youngling
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
  • Twitch Name: ClashWithvSeven
Re: Changing Sub Image
« Reply #15 on: May 22, 2014, 04:33:42 AM »
Wonder if i have to have "vertical align" and "horizontal align" activated at the same time....

Feadern

  • Youngling
  • *
  • Posts: 19
  • Karma: +1/-0
    • View Profile
  • Twitch Name: Feadern
Re: Changing Sub Image
« Reply #16 on: May 22, 2014, 06:07:57 AM »
It looked pretty good using "margin-left: #px;" or was that not what you were in need of?

clashwithvseven

  • Youngling
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
  • Twitch Name: ClashWithvSeven
Re: Changing Sub Image
« Reply #17 on: May 23, 2014, 04:24:49 PM »
No response to answer my question yet....  >:(

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Changing Sub Image
« Reply #18 on: May 23, 2014, 11:08:25 PM »
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

  • Youngling
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
  • Twitch Name: ClashWithvSeven
Re: Changing Sub Image
« Reply #19 on: May 26, 2014, 05:10:34 AM »
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

  • Youngling
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
  • Twitch Name: ClashWithvSeven
Re: Changing Sub Image
« Reply #20 on: May 26, 2014, 05:17:20 PM »
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?

Feadern

  • Youngling
  • *
  • Posts: 19
  • Karma: +1/-0
    • View Profile
  • Twitch Name: Feadern
Re: Changing Sub Image
« Reply #21 on: May 26, 2014, 07:41:01 PM »
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:

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

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Changing Sub Image
« Reply #22 on: May 26, 2014, 11:53:19 PM »
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

  • Youngling
  • *
  • Posts: 29
  • Karma: +0/-0
    • View Profile
  • Twitch Name: ClashWithvSeven
Re: Changing Sub Image
« Reply #23 on: May 28, 2014, 03:28:03 AM »
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
« Last Edit: May 28, 2014, 03:36:15 AM by clashwithvseven »

Feadern

  • Youngling
  • *
  • Posts: 19
  • Karma: +1/-0
    • View Profile
  • Twitch Name: Feadern
Re: Changing Sub Image
« Reply #24 on: May 28, 2014, 07:49:55 AM »
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 ;)