Putting xenforo bb into custom wordpress header/navigation

[oTradeMark]

Hello I am re-designing my website and I am using wordpress for CMS. My theme comes from elegantthemes and I am looking to integrate a forum within the site.

I would like the forum to have the same header/navigation/background as the wordpress site so that viewers can navigate from the forum to other sections of the site from the same location.

I installed bbpress because it automatically is integrated into wordpress but I found out that bbpress is extremely basic and not what I need.

Essentially, I need to know how difficult it is going to be for me to install xenforo on my site and have it show up where bbpress is currently showing up here:
http://www.gamingupgrade.com/sandbox/forums/

Also, the side navigation/widgets do not need to be there like they are next to bbpress but I do need the banner/top navigation/ background to exist within the xenforo installation.

 

[LPH]

The answer is based on your skill level or desire to hire someone.

Yes, it is possible to get the headers to match. I'm in the middle of a similar job and can tell you that my biggest mistakes were not using EXTRA.CSS enough. I started by using the styles properties in the ACP. I now just stick to the EXTRA.CSS.

If you want members to login through XenForo then buy XenScripts bridge.

Best of luck.

 

[oTradeMark]

My skill level is only what I learned in a few IT and VT classes I took in college. I designed the current site but that was mostly just editing small bits of CSS and a few php lines.

I have no desire to hire someone as I only have around a $250 budget to use on the site and I haven't even purchased XF yet.

If I can't easily make XF integrate into WP, maybe I can create a custom XF theme or edit an existing theme to have the same banner and similar color scheme as my wordpress theme.

How many templates are included with XF by default?
How many themes are available from the community?
Are there tutorials or resources available here on how to customize / create my own XF theme to match my wordpress theme?

If the information on how to create your own XF theme is available I'm pretty sure I can manage it, what I won't be able to do is just go right into the raw code of an XF install and manipulate it to perfectly match my WP install.

 

[MagnusB]

If you mean template files, allot, if you me styles, there is just one installed by default. There are quite a few available, you can look at the resources tab above, or search the forum. There is also one called XenDynamics, which supposedly integrates your xF style into your wordpress style; http://xenforo.com/community/threads/xendynamic-wordpress-theme.19856/

There are a few tutorials available in the resource manager, for example: http://xenforo.com/community/resour...beginners-best-practices-tips-and-tricks.975/

 

[oTradeMark]

I have been playing with the demo account, holy cow, XF is amazing! The admin panel for editing is very easy to use...

I was wondering though, I have the general layout of the test forum like I want it but I'm wondering how would I go about putting image map code into the banner?

Basically I want sections of the banner to be able to be clickable to go back to the main pages of my site.

Demo is here:

http://demo.xenforo.com/?d=33c9d823b4a457d8​

​

 

[oTradeMark]

nevermind I figured it out, you need to change the "header" template under logo_block to use the image map code.

Mine ended up looking like this:
<div id="logo">
<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
<img id="Image-Maps_3201209202211064" src="@headerLogoPath" alt="{$xenOptions.boardTitle}" usemap="#Image-Maps_3201209202211064" border="0" width="962" height="144" alt="" />
<map id="_Image-Maps_3201209202211064" name="Image-Maps_3201209202211064">
<area shape="rect" coords="70,85,209,119" href="http://www.gamingupgrade.com/sandbox/learn" alt="" title="" />
<area shape="rect" coords="259,86,467,120" href="http://www.gamingupgrade.com/sandbox/upgrade" alt="" title="" />
<area shape="rect" coords="516,86,757,120" href="http://www.gamingupgrade.com/sandbox/forums" alt="" title="" />
<area shape="rect" coords="796,85,908,119" href="http://www.gamingupgrade.com/sandbox/play" alt="" title="" />
</map>
</div>