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.

Adding an Icon Legend to ProSilver

Description: This article explains how to add an Icon Legend near the bottom of the page just above the page footer navigation bar in a proSilver or proSilver-based style.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/adding-an-icon-legend-to-prosilver/]Knowledge Base - Adding an Icon Legend to ProSilver[/url]

Adding an Icon Legend to ProSilver

This article explains how to add an Icon Legend near the bottom of the page just above the page footer navigation bar in a proSilver or proSilver-based style. On the forum index page, forum icons will be displayed. On the forum pages, topic icons will be displayed along with the forum permissions text in the topic icons legend.

This procedure works with any proSilver based style in any language, but for the purposes of this example it will be assumed that the English language pack and the proSilver style are being used. If a custom proSilver-based style is being used, small adjustments may be needed to get the desired results.

As always, make a backup of all files. In the event that something goes wrong, just replace the edited files with the originals and start the procedure over from the beginning. If you are unfamiliar with FTP, please refer to the Knowledge Base - FTP article.

Creating the Icon Legend files
Two HTML files must be created containing the code for the Icon Legend. This is done to keep the original files of the style as tidy as possible. Copy and paste the code below into a recommended text editor and save the file as icon_legend_index.html

Code: Select all

    <div class="icon_legend"><h3>{L_ICON_LEGEND}</h3></div>
    <table width="100%" cellspacing="0">
    <tr>
        <td align="{S_CONTENT_FLOW_BEGIN}" valign="top">
        <table cellspacing="3" cellpadding="0" border="0">
        <tr>
            <td style="text-align: center;">{FORUM_UNREAD_IMG}</td>
            <td class="gensmall">{L_NEW_POSTS}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FORUM_IMG}</td>
            <td class="gensmall">{L_NO_NEW_POSTS}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FORUM_LOCKED_IMG}</td>
            <td class="gensmall">{L_FORUM_LOCKED}</td>
        </tr>
        </table>
        </td>
        <td align="{S_CONTENT_FLOW_END}"></td>
    </tr>
    </table>  

Next, Copy and paste the code below into your text editor and Save the file as icon_legend.html

Code: Select all

<!-- IF S_DISPLAY_POST_INFO -->
    <div class="icon_legend"><h3>{L_ICON_LEGEND}</h3></div>
    <table width="100%" cellspacing="0">
    <tr>
        <td align="{S_CONTENT_FLOW_BEGIN}" valign="top">
        <table cellspacing="3" cellpadding="0" border="0">
        <tr>
            <td style="text-align: center;">{FOLDER_UNREAD_IMG}</td>
            <td class="gensmall">{L_NEW_POSTS}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FOLDER_IMG}</td>
            <td class="gensmall">{L_NO_NEW_POSTS}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FOLDER_ANNOUNCE_IMG}</td>
            <td class="gensmall">{L_ICON_ANNOUNCEMENT}</td>
        </tr>
        <tr>
            <td style="text-align: center;">{FOLDER_HOT_UNREAD_IMG}</td>
            <td class="gensmall">{L_NEW_POSTS_HOT}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FOLDER_HOT_IMG}</td>
            <td class="gensmall">{L_NO_NEW_POSTS_HOT}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FOLDER_STICKY_IMG}</td>
            <td class="gensmall">{L_ICON_STICKY}</td>
        </tr>
        <tr>
            <td style="text-align: center;">{FOLDER_LOCKED_UNREAD_IMG}</td>
            <td class="gensmall">{L_NEW_POSTS_LOCKED}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FOLDER_LOCKED_IMG}</td>
            <td class="gensmall">{L_NO_NEW_POSTS_LOCKED}</td>
            <td>&nbsp;&nbsp;</td>
            <td style="text-align: center;">{FOLDER_MOVED_IMG}</td>
            <td class="gensmall">{L_TOPIC_MOVED}</td>
        </tr>
        </table>
        </td>
        <td align="{S_CONTENT_FLOW_END}"><span class="gensmall"><!-- BEGIN rules -->{rules.RULE}<br /><!-- END rules --></span></td>
    </tr>
    </table>
<!--
 ENDIF -->  

Upload the two HTML files above to the styles/prosilver/template/ directory on your web server. If a custom style is being used, the location will be the styles/your style name here/template/ directory.

Making the file edits
Once again, for the purposes of this example, it will be assumed that the English language pack and the proSilver style are being used. If a different language, or a custom proSilver-based style is being used, use language/your language here/ and styles/your style name here/template/ for the instructions below.

1) Open language/en/common.php and find this line:

Code: Select all

    'ICQ'                        => 'ICQ',  

Before that line, on a new, blank line, add this code:

Code: Select all

    'ICON_LEGEND'                => 'Icon Legend',  


2) Open styles/prosilver/template/index_body.html and find this line:

Code: Select all

<!-- INCLUDE overall_footer.html -->  

Before that line, on a new, blank line, add this code:

Code: Select all

<!-- INCLUDE icon_legend_index.html -->  


3) Open styles/prosilver/template/viewforum_body.html and find this line:

Code: Select all

<!-- IF S_DISPLAY_POST_INFO -->
    <h3>{L_FORUM_PERMISSIONS}</h3>
    <p><!-- BEGIN rules -->{rules.RULE}<br /><!-- END rules --></p>
<!--
 ENDIF -->  

Replace the preceding lines with the following line:

Code: Select all

<!-- INCLUDE icon_legend.html -->  

Once the above file edits are completed, save and close the files and upload them to your web server. You will need to refresh your board's cache, so Login to your board and navigate to the Administration Control Panel (ACP), click on the Styles tab, select 'Themes' in the side menu and then click 'Refresh' next to the template you're using.

Conclusion
Check your forum to make sure the Icon Legend is now displayed in the forums. If it's not, try refreshing your browser. If you still do not see the Legend, check to make sure the Legend's HTML files are in the correct directory, and double check your file edits to make sure you have made them correctly.

If everything went according to plan, the Icon Legends will be located just above the page footer navigation bar near the bottom of the page. On the forum index page, forum icons will be displayed, and on the forum pages, topic icons will be displayed.