Help with buttons in header.

[mm03]

Hi, so I use WordPress for my main site and just picked up XenForo a couple of days ago. After doing some reading I made my header in XenForo look like my main sites without any problems.

My issue now is that I made one of the navs in my main sites header with buttons and the other is with a plugin. I'm not worried too much about the plugin nav, but I do want to get my button nav into XenForo. In my WordPress I use a wrapper to stop the header and contents to not float around on resize. Is there anyway to do this in XenForo, and if not, is there anyway to replicate the way I setup the header background in the styles area?

If you're wondering the code is just simple div tags with background images, hovers, and positioning information which all reads in fine minus the moving all over the place when the page changes size.

 

[Jake Bunce]

Is there anyway to do this in XenForo, and if not, is there anyway to replicate the way I setup the header background in the styles area?

There is always a way. I assume you need help with the implementation? Please post a URL showing what you have and what you want.

 

[mm03]

http://www.d3pros.net/wp-content/forum/

The nav bar I have setup in the header w/ home - competitions etc -- I'm not sure how to make that a set position without a wrapper which I can't seem to do like in WordPress.

Quick edit:
typical div tag in the header:
<div id="home"><a href="http://www.d3pros.net"></a></div>

header.css:
#home a{position:absolute;width:100px;height:22px;background-image:url('/wp-content/themes/clean-home/images/home.gif');background-repeat:no-repeat;margin-left:650px;margin-top:-153px;}
#home a:hover{background-image:url('/wp-content/themes/clean-home/images/homehover.gif');}

 

[Jake Bunce]

You want it to look like the navbar on this page?

http://www.d3pros.net/

 

[mm03]

yes -- don't need the bottom part of it though since that's a wordpress plugin and I'm sure it's more than I want to do at the moment

 

[EQnoble]

Try wrapping this :

<div class="dprosWraps"></div>

around

    <div id="home"><a href="http://www.d3pros.net"></a></div>
    <div id="comp"><a href="http://www.d3pros.net/competitions"></a></div>
    <div id="contact_us"><a href="http://www.d3pros.net/contact-us"></a></div>
    <div id="forumsbutton"><a href="http://www.d3pros.net/wp-content/forum/index.php"></a></div>
    <div id="streaming"><a href="http://www.d3pros.net/streaming"></a></div>
    <div id="wallpapers"><a href="http://www.d3pros.net/wallpapers"></a></div>

Like this:

<div class="dprosWraps">
    <div id="home"><a href="http://www.d3pros.net"></a></div>
    <div id="comp"><a href="http://www.d3pros.net/competitions"></a></div>
    <div id="contact_us"><a href="http://www.d3pros.net/contact-us"></a></div>
    <div id="forumsbutton"><a href="http://www.d3pros.net/wp-content/forum/index.php"></a></div>
    <div id="streaming"><a href="http://www.d3pros.net/streaming"></a></div>
    <div id="wallpapers"><a href="http://www.d3pros.net/wallpapers"></a></div>
</div>

to where ever you added that navigation unit...



You can then add the following to your extra.css or where ever you handle the css for your style and move the whole unit around which makes sense since it looks good now just offset from where you want it I think.

.dprosWraps {
left: -273px;
position: relative;
}
At any rate it should leave you with something like this....

 

[mm03]

yours doesn't move if you resize the browser?

 

[EQnoble]

Ah so it does.

Try this....

Add this in your style's logo_block template (comment it out or remove it from where you have it now.):

<div class="dprosWraps">
    <div id="home"><a href="http://www.d3pros.net"></a></div>
    <div id="comp"><a href="http://www.d3pros.net/competitions"></a></div>
    <div id="contact_us"><a href="http://www.d3pros.net/contact-us"></a></div>
    <div id="forumsbutton"><a href="http://www.d3pros.net/wp-content/forum/index.php"></a></div>
    <div id="streaming"><a href="http://www.d3pros.net/streaming"></a></div>
    <div id="wallpapers"><a href="http://www.d3pros.net/wallpapers"></a></div>
</div>

so the template looks like this.....

<div id="logoBlock">
    <div class="pageWidth">
        <div class="pageContent">
            <xen:include template="ad_header" />
            <xen:hook name="header_logo">
            <div id="logo"><a href="{$logoLink}">
                <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
            </a></div>
            </xen:hook>
            <span class="helper"></span>
        </div>
 
        <div class="dprosWraps">
            <div id="home"><a href="http://www.d3pros.net"></a></div>
            <div id="comp"><a href="http://www.d3pros.net/competitions"></a></div>
            <div id="contact_us"><a href="http://www.d3pros.net/contact-us"></a></div>
            <div id="forumsbutton"><a href="http://www.d3pros.net/wp-content/forum/index.php"></a></div>
            <div id="streaming"><a href="http://www.d3pros.net/streaming"></a></div>
            <div id="wallpapers"><a href="http://www.d3pros.net/wallpapers"></a></div>
        </div>
 
    </div>
</div>

and then replace that css I gave you with this.

.dprosWraps {
    position: relative;
    left: -350px;
    top: 50px;
}

 

[mm03]

awesome thank you very much!

My next issue is trying to sort out the rss feed. You wouldn't happen to know anything about WordPress' .htaccess file would you? I'm getting a 404 error due to WordPress' permalink setup I think.. I feel like I set it up properly :|

 

[EQnoble]

What is the url for your wp?

I tried setting up a feed from your site with http://www.d3pros.net/feed/ and it seemed to work. Is that what you are talking about?

edit:added
Also....

I was playing around with the style and ended up coming up with suggestions but words are a pain in the butt for me right now so here is a video.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[mm03]

that's in d3pros.net/wp-content -- the forum rss I was trying to do wp-content/forum/xenforo

I also tried a fresh install on just d3pros.net/forum/xenforo for the rss but still got 404 errors on both

What browser are you using also? The bottom nav in my sites footer doesn't have that background for me it's just the dark gray w/ an orange hover weird. As for the search / colors that does look quite nice.