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.

Additional Menus

Description: How to add additional menus to both prosilver & subsilver2 styles with very little changes to core phpBB3 files.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/additional-menus/]Knowledge Base - Additional Menus[/url]

Additional Menus
This is to explain how to add menus to two different areas on the overall header files (in both prosilver & subsilver2 styles) making as little changes to the core files as possible so making it easier for updating etc.

This adds one line of code to the overall_header.html file for each of the two menus required - so if you only require one menu, you only need to add one line to that file.

Prosilver Instructions.

Code: Select all

open /styles/prosilver/templates/overall_header.html
#
# Find
#
</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
   <a id="top" name="top" accesskey="t"></a>
   <div id="page-header">

#
# This adds the upper menu with buttons etc.
# ADD : After
#
#
<!-- INCLUDE upper_menu.html -->

#
# Find
#
{S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

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

#
# This adds the lower menu as links etc.
# add after
#
<!-- INCLUDE lower_menu.html -->



Contents of \styles\prosilver\template\upper_menu.html
Here I have added 'buttons' (graphics) with links.
Add as many 'buttons/lines' as you need between the 'center' html tags. Just change the URL's of the link and the graphic, as well as the size in px of the graphics that you have created.
You will have to create this file from scratch.

Code: Select all

         <tr>
         <span>
      <center>
         <a href="https://www.yourdomain.com">
         <img src="https://www.yourdomain.com/forum/images/menu_buttons/website.png" width="95" height="21" border="0" alt="Website Home"></a>
         <a href="https://www.yourdomainl.com/chatroom.php">
         <img src="https://www.yourdomain.com/forum/images/menu_buttons/irc_chatroom.png" width="98" height="21" border="0" alt="IRC Chatroom"></a>
      </center>
         </span>
         </td>


Contents of \styles\prosilver\template\lower_menu.html
Here I have used simple text links rather than graphics, but otherwise the same as the upper_menu.html file.
You will have to create this file from scratch.

Code: Select all

         <td>
         <span>
         Other Links : <a href="https://malwareremoval.com/wp/">Nellie2's Blog </a>
         - <a href="https://securitygarden.blogspot.com/">Security Garden </a>
         </span>
         </td>



subsilver2 instructions

Code: Select all

open /styles/subsilver2/templates/overall_header.html

# Find
</script>
</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrapheader">

   <div id="logodesc">
      <table width="100%" cellspacing="0">

#
# This adds the upper menu with the buttons etc
# ADD after
#
<!-- INCLUDE upper_menu.html -->

#
#
# Find
#
   <div id="logodesc">
      <table width="100%" cellspacing="0">
      <tr>
         <td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
         <td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span>

#
# This adds the extra site banner - - - - - -
#  - - - - - then the lower menu as links.
# ADD after
#

<!-- INCLUDE lower_menu.html -->



Contents of \styles\subsilver2\template\upper_menu.html
Here I have added 'buttons' (graphics) with links.
Add as many 'buttons/lines' as you need between the 'center' html tags. Just change the URL's of the link and the graphic, as well as the size in px of the graphics that you have created.
You will have to create this file from scratch.

Code: Select all

         <tr>
         <span>
      <center>
         <a href="https://www.yourdomain.com">
         <img src="https://www.yourdomain.com/forum/images/menu_buttons/website.png" width="95" height="21" border="0" alt="Website Home"></a>
         <a href="https://www.yourdomain.com/chatroom.php">
         <img src="https://www.yourdomain.com/forum/images/menu_buttons/irc_chatroom.png" width="98" height="21" border="0" alt="IRC Chatroom"></a>
      </center>
         </span>
         </td>


Contents of \styles\subsilver2\template\lower_menu.html
Here I have used simple text links rather than graphics, but otherwise the same as the upper_menu.html file. Note the difference here of the additional main site grahpic over that for prosilver. If no extra graphic is required you could just drop that portion of the code from this file.
You will have to create this file from scratch.

Code: Select all

         <br><span><a href="https://www.malwareremoval.com"><img src="https://www.yourdomain.com/picture_library/yourgraphic.gif" width="558" height="115"></a></span>
         <br>

         <span>
         Other Links : <a href="https://www.yourdomain.com/">Nellie2's Blog </a>
         - <a href="https://www.yourdomain.com/">Security Garden </a>
         </span>


Examples in use.

prosilver
Using flags for the buttons and a single text link for the second menu. (both marked in a red box)

Image

subsilver2
Using fuller menu graphics in the upper menu, a second graphic with a fuller lower menu (all outlined with red boxes).

Image

The following link might help you 'write' your links in HTML

Code: Select all

https://www.htmlcodetutorial.com/linking/linking.html


The following KB article gives advice of the tools to use in doing editing of the files.
Knowledge Base - Tools needed to set up and customise phpBB