• 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

LPH

Well-known member
#1
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

Tux Reports TwentyEleven XF Design.png

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

Well-known member
#2
A quick bit of tinkering in firebug that might work.

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

MagnusB

Well-known member
#3
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:
Code:
#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

Well-known member
#5
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

Well-known member
#8
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

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

Code:
.navTabs {
border-width: 0px 1px 0px 1px;
}
 
#9
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