Header color/background

[tracyosrs]

Ok, well I am very rusty with coding and not sure what I can add to the coding for the header. The text looks fine, but it is difficult to read because it is bold and red on top of black. I thought about changing the background in this area only. I am just not quite sure how to implement it either with a background color change or even an img. I don't think I can do anything more from the Admin home> Structure>headers and footers page- only place the text in there and wrap it. When I go to the Advanced Styles and CSS, the only option under Header I see is for the Banner. So, I guess it will have to be changed in the Style sheet? I also want to the color of the text to be the same as the red in the rest of the forum. Not sure what to do...http://zeale.freeforums.net/

[Tumbleweed]

Hi tracyosrs,

What you could do is put that content in a div. Like this:

<div style="position:relative; margin:auto; background-color:#bbffbb; padding:8px;">

    Your content here

</div>

If you want to use an image then just change the background color to this:

<div style="position:relative; margin:auto; background-image:url(<a href="http://yourimagehere.png">http://yourimagehere.png</a>); padding:8px;">
    

</div>

I also wanted to mention your forum is so wide I have to scroll to see the whole thing.  I only see part of "of" on the text of your banner. The rest of the right side is cut off unless I use the bottom scroll bar to see it.

When you use a pixel width that is going to force everyone who has a screen resolution of less than 1700px to have that scroll bar might not be the best idea, but that said, I know that many people have huge screen resolutions today so if your members are fine with it then disregard this. (Mine screen res is 1366px by 768px)

But if you do want to fix it you might be better off with the default percentage width or maybe a bit more like 96%. Just a thought.

[tracyosrs]

Ty Tumbleweed! Do I put the div. in the Style sheet? If so, I am not sure where. It is the header under the banner I am trying to make more clear.
Also, I had my banner set to 1700px. When I had the forum at 100%, ppl were telling me that they could only see part of the banner. So, I looked at how to fix this thru the forums and it suggested to use px instead. If I make my banner smaller, it does not fit the whole top of the forum. So, when I changed it to px, I felt I had to make it the same size as the banner or ppl would not see it all again. Yes, I have a big monitor lol. It is hard to see what someone else is seeing :-) So, I could not find exactly what I should make the banner size to be except the 333px that is the preset in the settings. I kept resizing the banner before I placed it and it did not reach from side to side on the whole top until I got to 1700px lol. What is the standard size for this? I can resize to anything ofc. But, to me unless I set the banner to 1700, it does not look right :s

[Tumbleweed]

May 15, 2015 8:11:33 GMT -8 tracyosrs said:

Ty Tumbleweed! Do I put the div. in the Style sheet? If so, I am not sure where. It is the header under the banner I am trying to make more clear.
Also, I had my banner set to 1700px. When I had the forum at 100%, ppl were telling me that they could only see part of the banner. So, I looked at how to fix this thru the forums and it suggested to use px instead. If I make my banner smaller, it does not fit the whole top of the forum. So, when I changed it to px, I felt I had to make it the same size as the banner or ppl would not see it all again. Yes, I have a big monitor lol. It is hard to see what someone else is seeing :-) So, I could not find exactly what I should make the banner size to be except the 333px that is the preset in the settings. I kept resizing the banner before I placed it and it did not reach from side to side on the whole top until I got to 1700px lol. What is the standard size for this? I can resize to anything ofc. But, to me unless I set the banner to 1700, it does not look right :s

Where ever you added that text. (I can't tell if it is in the main header (header/footer) or your template)The first part this....

<div style="position:relative; margin:auto; background-color:#bbffbb; padding:8px;">

...will go above your text and then at the end of your text add the closing div...

</div>

As far as your banner, if you set your site width to 98% that will make your forum always be 98% on everyone's screen resolution. Then to get your banner to fit like it should on all screen resolutions, add this to the bottom of your style sheet.

/*resizes for all screen res*/
#banner{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Try that and see if it works for your giant screen and I'll check to see how it looks on mine.

[tracyosrs]

Well The background looks better. I was thinking of making it gold instead of blue on the header to pick up on the gold in the banner. What do you think?
When I set the forum width to 98%, the banner is now cut off at the bottom for me. So...not sure how to fix that lol. Can you see the whole thing now without scrolling?

[tracyosrs]

Hmm, I kinda like the black background :-) I have been playing with the colors. I need the red text to be the same color as the rest of the text though. I am not sure where I even entered that in the first place! So much to remember in all of this. I thank you so much for your help <3

[tracyosrs]

I changed the banner height to 350px. Now the bottom on the banner appears for me, but the top is kinda squished. Should I just resize the banner so it will fit better then upload it again? If so, what dimensions should I make it? Also, should I leave the banner height 333px?

[Tumbleweed]

May 15, 2015 10:24:46 GMT -8 tracyosrs said:

Hmm, I kinda like the black background :-) I have been playing with the colors. I need the red text to be the same color as the rest of the text though. I am not sure where I even entered that in the first place! So much to remember in all of this. I thank you so much for your help <3

I think it looks fine with the background. However, your banner is not doing what I expected, it's cut off and not sure why. Worked on my test site. Give me a minute to try to work out why.

[tracyosrs]

Thanks! I am still trying to figure out how to change the text color on the header below the banner too ;-)

[tracyosrs]

Got it :-) My banner is 1700px X 333px, perhaps if I make it a different size, it will look better? If you think so, what size should I make it?

[tracyosrs]

ok, I resized it as 1600 X 300 - it looks good to me :-) Does it look right to you?

[Tumbleweed]

May 15, 2015 11:20:23 GMT -8 tracyosrs said:

ok, I resized it as 1600 X 300 - it looks good to me :-) Does it look right to you?

It's still cut off for me since my screen res isn't that big.

But instead of that css I gave you, I altered the css a bit so replace what I gave you with this: (I only have IE to check this in so hopefully you have FF or Chrome and if it works for one of those then it should be good in all browsers assuming it works at all on your site.)

/*resizes for all screen res*/
#banner {
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

To change that text color then just add this in blue: (assuming we are still taking where you added the div and background)

<div style="position:relative; margin:auto; background-color:#bbffbb; padding:8px; color:#ff0000;">

[tracyosrs]

ok, well I already fixed the color on the header. The: /*resizes for all screen res*/
#banner {
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

Should be placed in the Style Sheet though, correct? Where should I place it?

[Tumbleweed]

At the very bottom and I believe you already added the other one I gave you so this replaces that.

[tracyosrs]

The other one you gave me was for the Header and I placed it in the Header section before the text. It looks fine now, right?
But, what you are having a problem seeing is the Banner if I understand correctly :s So, the new CSS you gave me will correct the Banner issues hopefully.
Ok, so I replaced the CSS that was originally there for #banner and replaced it with the:
#banner {
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}