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

Help with buttons in header.

Discussion in 'Troubleshooting and Problems' started by mm03, Apr 4, 2013.

  1. mm03

    mm03 New Member

    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.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Shelley likes this.
  3. mm03

    mm03 New Member

    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');}
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  5. mm03

    mm03 New Member

    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
     
  6. EQnoble

    EQnoble Well-Known Member

    Try wrapping this :
    Code:
    <div class="dprosWraps"></div>
    around
    Code:
        <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:

    Code:
    <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....
    Untitled.png
     
  7. mm03

    mm03 New Member

    yours doesn't move if you resize the browser?
     
  8. EQnoble

    EQnoble Well-Known Member

    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.):

    Code:
    <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.....

    Code:
    <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.


    Code:
    .dprosWraps {
        position: relative;
        left: -350px;
        top: 50px;
    }
     
    Jake Bunce and mm03 like this.
  9. mm03

    mm03 New Member

    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 :|
     
  10. EQnoble

    EQnoble Well-Known Member

    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.

     
  11. mm03

    mm03 New Member

    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.
     

Share This Page