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="http://www.yourdomain.com">
<img src="http://www.yourdomain.com/forum/images/menu_buttons/website.png" width="95" height="21" border="0" alt="Website Home"></a>
<a href="http://www.yourdomainl.com/chatroom.php">
<img src="http://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="http://malwareremoval.com/wp/">Nellie2's Blog </a>
- <a href="http://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="http://www.yourdomain.com">
<img src="http://www.yourdomain.com/forum/images/menu_buttons/website.png" width="95" height="21" border="0" alt="Website Home"></a>
<a href="http://www.yourdomain.com/chatroom.php">
<img src="http://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="http://www.malwareremoval.com"><img src="http://www.yourdomain.com/picture_library/yourgraphic.gif" width="558" height="115"></a></span>
<br>
<span>
Other Links : <a href="http://www.yourdomain.com/">Nellie2's Blog </a>
- <a href="http://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)
subsilver2
Using fuller menu graphics in the upper menu, a second graphic with a fuller lower menu (all outlined with red boxes).
The following link might help you 'write' your links in HTML
- Code: Select all
http://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