Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to Add custom Nav Bar to Theme?

  • @farkel

    Member

    Hi,

    I’m currently using the K2 theme for bbpress, and I’d like to add a little nav bar right below the header with links to the main site…

    The nav bar is just basically button images next to each other in a row.

    Problem is I don’t know how to do this, it seems like you can only touch the CSS?

Viewing 10 replies - 1 through 10 (of 10 total)
  • @chrishajer

    Participant

    You can touch whatever you want. In your theme you have access to all the php files. Find the page that controls the look of the page you want to modify and add your nav bar there.

    @level8

    Member

    where did u get a K2 theme for bbpress from?

    @rossb

    Member

    Could someone please post an example line of code that could be added to the appropriate php page to add a navigation button to the header, or just under the header, of a bbPress forum?

    I have added a bbPress forum to a website, and just need a nav button on the bbPress forum that can take a user stright back to the home page of the website. I have no idea about php, though, so would be great if someone could add an example link showing the part I should customise in bold, or something like that.

    Also, could someon please explain how I position the nav button on bbPress so that it is left-aligned to the header, or just below the header?

    Apologies for this demonstration of coding ignorance!

    Cheers

    Ross

    @chrishajer

    Participant

    Can you post a link to your forum so we can modify the actual code?

    @rossb

    Member

    Sure, Chris – and thanks. The forum link is: https://ashb.proofreadercentral.com/bbpress/

    I’ve got it password protected at the moment, before it goes “public”.

    User: tester

    Password: testing123

    The main site I want to link to the home page of from the forum is password protected with the same user name and password, and the link is:

    http://www.ashb.proofreadercentral.com/

    Appreciate your help!

    Cheers

    Ross

    @rossb

    Member

    Chris? Anyone? Pleeeease?

    @chrishajer

    Participant

    Sorry, lost this topic.

    Looks like you have a button already, it’s just in the wrong spot.

    1. Make sure your HTML tags are lowercase. This is what you have now:

    <FORM METHOD="LINK" ACTION="http://ashb.proofreadercentral.com/">
    <INPUT TYPE="submit" VALUE="ASHB Home">
    </FORM>

     

    Should be more like:

    <form method="link" action="http://ashb.proofreadercentral.com/">
    <input type="submit" value="ASHB Home" />
    </form>

     

    2. To have control over that, I would put it in a div, and give it a CSS id or class. Something like this:

    <div id="navbar">
    <form method="link" action="http://ashb.proofreadercentral.com/">
    <input type="submit" value="ASHB Home" />
    </form>
    </div>

     

    3. Now, with an id, you can make some modifications to your style.css. Something like this (add it right around the lines for the #header, since you’re still in the #header div):

    #navbar {
    position: relative;
    /* top: {number of pixels from the top of the header}; */
    /* left: {number of pixels from the left edge of the header}; */
    top: 100px;
    left: 0px;
    }

     

    Try different numbers in your style.css for the #navbar top and left positions you just added, and see where the button ends up. I’m not sure where you want it, but that will allow you to move it.

    If you want it beneath what is inside the header div, with the background image, you will have to move the code out of the #header div in header.php.

    Does that help point you in the right direction?

    @rossb

    Member

    Only just checked back on this thread, Chris – thanks a lot for your advice.

    My current button could certainly be better positioned, and aesthectically enhanced, so I’m looking forward to trying out your suggestions. I have no idea about coding, but I have messed around changing colours etc in CSS that others have already written, so the info you have provided above is ideal for my purposes.

    Thanks again.

    Ross

    @rossb

    Member

    Chris – need some clarification PLEASE.

    I’ve changed the HTML tags, put them in a div and given it a CSS class, exactly as you suggested. I’m stuck at your point 3. I’ll enumerate for ease of reply.

    1. Should I still be in the header.php file when making the CSS code you have suggested? Or should all CSS code be in the style.css file?

    2. I don’t understand what you mean by “add it right around the lines for the #header, since you’re still in the #header div”. Specifically:

    a) Where are the #header lines you refer to, and

    b) When you say “add it right around the lines for the #header”, I’m not sure what you mean by “right around”, exactly. Do you mean immediately under #header?

    I didn’t anticipate these questions. I am very ignorant technically. Thanks for your patience.

    @chrishajer

    Participant

    Can you contact me off list ( check my profile )? It would be easier then back and forth, if you’re available.

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.
Skip to toolbar