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

Twenty Eleven WordPress theme For XenForo

Discussion in 'Styling and Customization Questions' started by LPH, Sep 14, 2012.

  1. LPH

    LPH Well-Known Member

    I've decided to try to build a XF style which will match the Twenty Eleven WordPress theme. I have the max-width set to 1000px and this works fine. Now I just want to get the header to look like the WP theme.

    Has anyone done this already?

    I don't want to recreate the wheel - so - if someone has already done an twenty-eleven theme for XF then please let me know.

    My biggest issue is getting the navigation bar hover correct.

    Completed so far:

    max-width: 1000px
    header background #f9f9f9
    height of header: 150px
    Header Tab Height: (Settings): 50px
    Removed 'Forums" "Members" and "Help"
    Remove secondary menu


    Tux Reports TwentyEleven XF Design.png

    You can see it in action here:


    Please let me know if you have any ideas on how to improve the look of the navigation links.

    Updated post to show the latest information
  2. Shelley

    Shelley Well-Known Member

    A quick bit of tinkering in firebug that might work.

    #headerMover #headerProxy {
        height: 205px;
    #navigation .pageContent {
        height: 55px;
    LPH likes this.
  3. MagnusB

    MagnusB Well-Known Member

    You shouldn't set a height for .pageContent, that might come back and bite you in the behind for users using some of the lesser browsers (IE). Besides, the height of the elements in navigation does not matter that much, cause they won't overlap anything as long as you set the height of headerProxy, which will basically control the height of the entire header.

    If you want to position the quick search below the navbar, correct the top rule of that instead:
    #QuickSearch {
    display: block;
    position: absolute;
    right: 20px;
    top: -18px;
    margin: 0;
    background-color: #FCFCFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    padding-top: 5px;
    _padding-top: 3px;
    z-index: 7500;
    Changing the top: -18px to top: 10px; seems to position it nicely.
  4. LPH

    LPH Well-Known Member

    This worked and closed the gap.
  5. LPH

    LPH Well-Known Member

    I'm sorry but you lost me in what code you are suggesting. Shelley's code worked. Just setting headerProxy did not work but maybe I'm just complete lost on your point.
  6. LPH

    LPH Well-Known Member

  7. ArnyVee

    ArnyVee Well-Known Member

    That's pretty close on the menus. :)
    LPH likes this.
  8. LPH

    LPH Well-Known Member

    Thank you but I'm having a terrible time with something showing up that should not.

    Update: I'm not sure if this is the best way to get rid of it because I am not sure where it is coming from :(

    Replaced this

    .navTabs {
    border-width: 4px 1px 1px;
    With this by adding the following to EXTRA.CSS

    .navTabs {
    border-width: 0px 1px 0px 1px;
  9. Marileah

    Marileah Member

    Can you guide me where to put the codes, i also want to put the WP header and navigation in xenforo just like lph did, i just dont know where to start. Please help me
  10. LPH

    LPH Well-Known Member

    The attached xmls are an export of the style work to date. The 2013 is a child style. Hopefully you find it helpful.

    Attached Files:

  11. Marileah

    Marileah Member

    Thanks lph, I'll work it out :)

Share This Page