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.

Creating a prosilver sub header menu

Description: This tutorial will help you to create a sub menu which will remain within your over_header.html file

In Categories:

Link to this article: Select All
[url=]Knowledge Base - Creating a prosilver sub header menu[/url]

Using FTP browse to the following file and copy the entire contents to your favourite file editing software:


Once you have completed the above step find the following code:

Code: Select all

<div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks">
            <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

            <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

            <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->

         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <ul class="linklist leftside">
            <li class="icon-ucp">
               <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
                  <!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull;
               <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
               <!-- IF U_RESTORE_PERMISSIONS --> &bull;
               <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
               <!-- ENDIF -->
         <!-- ENDIF -->

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

         <span class="corners-bottom"><span></span></span></div>

The important thing to recognise here is the class - "navbar", this will give your new sub menu the same appearance as the main menu which comes with the phpbb software.

So... The next step is to use this class after the code detailed above with the all important break tag being placed first (<br />). This will ensure there is a sufficient gap between the main menu and the new sub menu.

After the above code paste the following:

Code: Select all

<br />

<div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist rightside">

   <li><a href="your_link_sits_here">Link1</a> &bull; </li>
   <li><a href="your_link_sits_here">Link2</a> &bull; </li>
   <li><a href="your_link_sits_here">Link3</a></li>
         <span class="corners-bottom"><span></span></span></div>

You'll also notice that I have taken advantage of the class "linklist rightside". This will apply the CSS styles to give the text the same feel as the original header.

Replace "your_link_sits_here" with the link of your proposed site (e.g:
Replace "Link1" with what you want to appear in the sub menu which when clicked will take you to your proposed site (e.g: check out my forum).

Please also remember that if your planning on applying more than three links, your third and every link thereafter needs to have

Code: Select all


directly after the </a> tag except for the last link.

Once your done save the file and upload it back to your template directory. Then refresh the templates within the ACP and check your forum to see the new changes!

This is what you should see:



Simon (OxfordSi)