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=https://www.phpbb.com/support/docs/en/3.0/kb/article/extending-prosilvers-navigation-bar/]Knowledge Base - Extending Prosilver's navigation bar[/url]

How to extend prosilver's navigation bar


Info
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

FIND:

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 -->
         </ul>


ADD AFTER:

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>
</ul>

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

FIND:

Code: Select all

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


ADD AFTER:

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.


Finish
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


Result
Image


Enjoy your spacious links! :D

Revised: 11th June 2009 - HardStyle