Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Adding a Navigation Bar
Topic Started: Mar 30 2014, 06:09 AM (452 Views)
Mr.Tom
Member
[ *  *  * ]
Hey

I've noticed that there's no default navigation bar which can be added to my board, so I was wondering if anyone knew of how to add one I can easily customise, and where it needs to go. :)

Thanks,
Tom
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
http://i.imgur.com/OKl0bhi.png

That's your forums navigation bar.
Offline Profile Quote Post Goto Top
 
Mr.Tom
Member
[ *  *  * ]
Cory
Mar 30 2014, 07:33 AM
http://i.imgur.com/OKl0bhi.png

That's your forums navigation bar.
I mean something like at the top of here: http://themeparkfunv2.boards.net/forum
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
There is a 'top' bar that is located at the very top with login and registration links as a guest, Admin CP and Report CP access to administrators, Report CP access to moderators, and a Preferences and Inbox area for all users.

Then there is the 'submenu' bar below the logo that is used for site navigation.
Offline Profile Quote Post Goto Top
 
Mr.Tom
Member
[ *  *  * ]
Cory
Mar 30 2014, 07:48 AM
There is a 'top' bar that is located at the very top with login and registration links as a guest, Admin CP and Report CP access to administrators, Report CP access to moderators, and a Preferences and Inbox area for all users.

Then there is the 'submenu' bar below the logo that is used for site navigation.
But is there a way to add my own bar with my own links which are separate from the other navbars? I'm sure it'll be possible via code, but what and where would I need to put it?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You can add links to the default navigation bar with JavaScript or recreate the submenu with HTML, or you can create you own custom HTML menu:
Code: HTML
 
<div id="menu">
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
</div>
Replace URL and Text as necessary.

Coding to affect all themes can go here:

Admin CP Posted Image Themes Posted Image Board Template

Coding to affect one theme can go here:

Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Layout
Offline Profile Quote Post Goto Top
 
Mr.Tom
Member
[ *  *  * ]
Cory
Mar 30 2014, 08:43 AM
You can add links to the default navigation bar with JavaScript or recreate the submenu with HTML, or you can create you own custom HTML menu:
Code: HTML
 
<div id="menu">
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
<a href="URL">Text</a>
</div>
Replace URL and Text as necessary.

Coding to affect all themes can go here:

Admin CP Posted Image Themes Posted Image Board Template

Coding to affect one theme can go here:

Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Layout
That looks cool to me!

Just how do I go about editing the background colours/text colours/hover colours?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
If you're referring to the default submenu, there is already selectors setup for it in the CSS.

If you're referring to the custom menu, you can setup new selectors:
Code:
 
#menu {
background: #HEX;
}

#menu a {
color: #HEX;
}

#menu a:hover {
color: #HEX;
}
Change the HEX values as necessary to the proper hexadecimal color codes you wish to use.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Support · Next Topic »
Add Reply