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 a new link and icon to your header

Description: This article describes how to add a new link and icon to the standard header of prosilver based styles.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/adding-a-new-link-and-icon-to-your-header/]Knowledge Base - Adding a new link and icon to your header[/url]

Introduction
I've compiled this guide as it's not exactly straight forward to accomplish (done properly).

First off, we're going to assume that the new link you are adding is called 'name'. You should change 'name' to whatever you wish when it occurs throughout the following steps.

Modifying files
Open: includes/functions.php, find:

Code: Select all

      'U_RESTORE_PERMISSIONS'   => ($user->data['user_perm_from'] && $auth->acl_get('a_switchperm')) ? append_sid("{$phpbb_root_path}ucp.$phpEx", 'mode=restore_perm') : '',

After, add:

Code: Select all

      'U_NAME'            => append_sid("{$phpbb_root_path}name.$phpEx"),

*Note: If you are using an external link, you can use one of the following examples:

Code: Select all

      'U_NAME'            => 'http://www.myforum.com/index.' . $phpEx,
      'U_NAME'            => 'http://www.myforum.com/index.html',
      'U_NAME'            => 'http://www.myforum.com',


Open: styles/prosilver/theme/bidi.css, find:

Code: Select all

.rtl .icon-search

Inline-after, add:

Code: Select all

, .rtl .icon-name


Open: styles/prosilver/theme/buttons.css, find:

Code: Select all

.icon-search

Inline-after, add:

Code: Select all

, .icon-name


Open: styles/prosilver/theme/colours.css, find:

Code: Select all

.icon-search               { background-image: url("{T_THEME_PATH}/images/icon_search.gif"); }

After, add:

Code: Select all

.icon-name               { background-image: url("{T_THEME_PATH}/images/icon_name.gif"); }


Open: styles/prosilver/template/overall_header.html, find:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

After, add:

Code: Select all

<li class="icon-name"><a href="{U_NAME}" title="{L_NAME_EXPLAIN}">{L_NAME}</a></li>


Open: language/en/common.php, find:

Code: Select all

));

Before, add:

Code: Select all

'NAME'                  => 'Name',
'NAME_EXPLAIN'            => 'View the name page',


Uploading your new icon
Next, you need to upload your new icon to styles/prosilver/theme/images and ensure it's called 'icon_name.gif'.

If you haven't made an icon yet, just duplicate 'icon_bookmark.gif' and rename it 'icon_name.gif' for the time being.

Finishing up
Lastly, you need to refresh the whole of your prosilver template through the ACP/Styles tab.

  • 20120517 - edited by Dicky. Changed quotes for U_NAME link for index.php
  • 20100614 - edited by camm15h to make external link clearer
  • 20090118 - edited by Raimon to fix incorrect variable for outside the forum