XF 1.2 Header Background

[Amaury]

@mistypants has been assisting me with small styling edits, which is why I haven't posted here in this forum much lately. However, I shouldn't ask her for help on everything.

In any case, how can I get the header background graphic within the outlined area?

 

[Jake Bunce]

You can setup a fixed width body using Body and Page Width Controller as shown here:

http://xenforo.com/community/threads/wallpaper-size.22055/#post-277459

If both are the same width then it will effectively confine the header area like you want.

 

[Amaury]

You can setup a fixed width body using Body and Page Width Controller as shown here:

http://xenforo.com/community/threads/wallpaper-size.22055/#post-277459

If both are the same width then it will effectively confine the header area like you want.

Thanks, Jake! I got close:

Spoiler: Header

Here's what I have set:

Spoiler: Style Properties

 

[Jake Bunce]

@Amaury

Remove the individual margin and padding values from Page Width Controller.

 

[Amaury]

@Amaury

Remove the individual margin and padding values from Page Width Controller.

Thanks for the response, Jake.

I just blanked them all out, and it still looks the same.

 

[Jake Bunce]

Your Page Width Controller is 20px less wide than the Body. That's why.

 

[Amaury]

Your Page Width Controller is 20px less wide than the Body. That's why.

I've made it the same as Body, and that did it. I also removed the radius from the top and right borders of Navigation Tabs Container and added left and right borders to the #logo class in my EXTRA.css template to take care of the little "overflowing "edges. I think that looks better.

Spoiler: Logo

Thanks for the help!

 

[Amaury]

@Jake Bunce

The only problem I see is that it seems to make the forum not responsive. Some areas like the member card are better, but not by much -- text still gets hidden. Is it possible to re-add responsiveness while keeping the edits I made?

Spoiler: Screenshots

 

[Jake Bunce]

In that case you can remove the current "width" attributes and instead use:

width: 100%;
max-width: 1040px;

That should do it.

 

[Amaury]

In that case you can remove the current "width" attributes and instead use:

width: 100%;
max-width: 1040px;

That should do it.

That did it!

Thanks a lot for the help, Jake!

 

[Amaury]

@Jake Bunce

I noticed a small side effect of using this specific width. When I over the items on the edge on the moderator bar (Reports and Admin Control Panel, respectively), the hover background kind of overflows into the HTML background.

Is there any way to fix this? Here is a screenshot (it's the green):