How to Add custom Nav Bar to Theme?
-
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?
-
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.
where did u get a K2 theme for bbpress from?
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
Can you post a link to your forum so we can modify the actual code?
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
Chris? Anyone? Pleeeease?
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?
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
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.
Can you contact me off list ( check my profile )? It would be easier then back and forth, if you’re available.
- You must be logged in to reply to this topic.