Twenty Eleven WordPress theme For XenForo

[LPH]

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

Screenshot



You can see it in action here:

http://www.tuxreportsdebates.com/community

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

 

[Shelley]

A quick bit of tinkering in firebug that might work.

#headerMover #headerProxy {
    height: 205px;
}
#navigation .pageContent {
    height: 55px;
}

 

[MagnusB]

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.

 

[LPH]

A quick bit of tinkering in firebug that might work.

#headerMover #headerProxy {
    height: 205px;
}
#navigation .pageContent {
    height: 55px;
}

This worked and closed the gap.

 

[LPH]

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:


Changing the top: -18px to top: 10px; seems to position it nicely.

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.

 

[LPH]

I decided to try to match the menus a little bit tonight.

WP: www.unemployedbuzz.com
XF: www.unemployedbuzz.com/community

The menu colors are not perfect (hover, etc). Maybe I'll work on those later.

Anyway, let me know if you have any suggestions.

 

[ArnyVee]

That's pretty close on the menus.

 

[LPH]

That's pretty close on the menus.

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;
}

 

[Marileah]

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

 

[LPH]

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

 

[Marileah]

Thanks lph, I'll work it out