1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Header Background

Discussion in 'Styling and Customization Questions' started by Amaury, Feb 16, 2014.

  1. Amaury

    Amaury Well-Known Member

    @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?

    Header.png
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    Thanks, Jake! I got close:
    Navigation 1.png

    Here's what I have set:
    Navigation 2.png

    Navigation 3.png
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    @Amaury

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

    Amaury Well-Known Member

    Thanks for the response, Jake.

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

    Jake Bunce XenForo Moderator Staff Member

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

    Amaury Well-Known Member

    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.

    Logo.png

    Thanks for the help!
     
  8. Amaury

    Amaury Well-Known Member

    @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?

    Responsive 1.png Responsive 2.png
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    Code:
    width: 100%;
    max-width: 1040px;
    
    That should do it.
     
    beduino and Amaury like this.
  10. Amaury

    Amaury Well-Known Member

    That did it!

    Thanks a lot for the help, Jake!
     
  11. Amaury

    Amaury Well-Known Member

    @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):

    Hover Overflow.png
     
    Last edited: Mar 14, 2014

Share This Page