This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

Extending Prosilver's navigation bar

Description: This article explains how to extend the "prosilver" and "prosilver_se" navigation bar, so users can add links without cluttering up what's already there.

In Categories:

Link to this article: Select All
[url=]Knowledge Base - Extending Prosilver's navigation bar[/url]

How to extend prosilver's navigation bar

Ever felt the need to add some of your own custom links to the navigation menu, but haven't had the room to? :)
This article will explain how to add a simple extended navigation bar to your "prosilver" style.
This also works with "prosilver_se".

Files to Edit
  • overall_header.html
  • common.css

Template Changes
Using FTP open overall_header.html


Code: Select all

<ul class="linklist rightside">
            <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
            <!-- IF not S_IS_BOT -->
               <!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
               <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
               <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
            <!-- ENDIF -->


Code: Select all

<ul class="linklist navlinks2">
   <li><a href="yourlink">Test1</a> &bull; </li>
   <li><a href="yourlink">Test2</a> &bull; </li>
   <li><a href="yourlink">Test3</a></li>

To add your links, all you would need to do is change:
  • yourlink to your custom link
  • test to your custom link name

Theme Changes
Again using FTP, open common.css


Code: Select all

ul.navlinks {
   padding-bottom: 1px;
   margin-bottom: 1px;
   border-bottom: 1px solid #FFFFFF;
   font-weight: bold;


Code: Select all

ul.navlinks2 {
   /*  font-weight: bold; */
   margin-top: 30px;
   padding-top: 2px;
   padding-bottom: 1px;
   margin-bottom: 1px;
   border-top: 1px solid #FFFFFF;
   text-align: center;

ul.navlinks2 li {
   display: inline;
   float: none;
   margin-left: -4px;

If you want your links to be bold, just remove the /* */ tags from the last edit.

Remember to refresh the styles template and theme files.
Do this by going to:
  • ACP:: Styles Tab >> Templates >> Prosilver Refresh
  • ACP:: Styles Tab >> Themes >> Prosilver Refresh


Enjoy your spacious links! :D

Revised: 11th June 2009 - HardStyle