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

XF 1.1 Adding an HTML/CSS made header to my board?

Discussion in 'Styling and Customization Questions' started by Slidefuse, Nov 23, 2013.

  1. Slidefuse

    Slidefuse Member

    Hello,
    I have been working on this header/navigation for my site... you can see it @
    " http://www.gentlemannsestate.com/ "

    But I'm not to sure on how I could replace the default XenForo header with that custom header.
    Please tell me its possible...

    I would also like the user info like there Name, inbox, Alerts, etc to be shown right under the navigation part in the upper right hand cover...

    Thanks for your time,
    -Felix
     
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

    I do this service for $30 if your interested.

    But basically you just customize the xenForo header to make it look like the HTML/css one, thats what I do.
     
  3. Slidefuse

    Slidefuse Member

    Well what template would I edit? editing the Header template did nothing...
    And couldn't I just copy my coder over to the right XenFor template?
     
  4. Matthew Hawley

    Matthew Hawley Well-Known Member

    I would edit the navigation template and css.
    Yes.
     
  5. Slidefuse

    Slidefuse Member

    This is what I got so far, and it looks like crap...
    http://www.gentlemannsestate.com/index.php

    Any other way to help?
    I want to pay you to do it... But I'm rather low on cash ATM.

    EDIT:
    The user info is what looks like crap.. but you must login to see that...(Name, log out, inbox, etc.)
    Its all smashed up to the left hand side right below the header.
    and the header is not the full width... idk man
     
  6. Matthew Hawley

    Matthew Hawley Well-Known Member

    Add this to EXTRA.css for the header.

    Code:
    #headerMover #headerProxy { background-color: #385464 !important; height: 122px !important; }
     
    Slidefuse likes this.
  7. Matthew Hawley

    Matthew Hawley Well-Known Member

  8. Slidefuse

    Slidefuse Member

    Still looks really bad, lol.
    Isn't there a way to just make the header full width? like it was the 1st time I showed you it?
     
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

    Actually scratch that do this:

    Code:
    #headerMover #headerProxy { 
    height: 122px !important;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#314b59),color-stop(5%,#385464),color-stop(94%,#334d5b),color-stop(100%,#2b414c)) !important; 
    }
    
    #header { background-color: transparent !important; }
    
    
     
    Slidefuse likes this.
  10. Slidefuse

    Slidefuse Member

    Well damn... That did it!
    Thank you VERY much for all the help.

    But I do want to ask one more thing...
    How can I move the navigation to the right, and the logo to the left... like the original was?

    Or should I just change my board width bad?

    (I also see you joined, lol. You can see that the post bit is being dumb too.. I'm not going to bug you about that really, because im asking for to much help, lol.
     
  11. Matthew Hawley

    Matthew Hawley Well-Known Member

    It's like that for me.

    [​IMG]
     
  12. Slidefuse

    Slidefuse Member

  13. Matthew Hawley

    Matthew Hawley Well-Known Member

    Well this works for my screen size:

    Code:
    div#Header div#Navigation { margin-right: -140px; }
    div#Header div#Logo a { margin-left: -145px !important; }
    
     
  14. Slidefuse

    Slidefuse Member

    Sadly this does not really do anything for me... but move the logo maybe 1in over to the left.
     

Share This Page