Add links to Navigation Bar

[Post Bot]

Add links to Navigation Bar
Written by Jaymie1989

Do you want to add a new link to the navigation bar with its own image next to it. Well this tutorial will show you how.

Prosilver Instructions:
Please note that on some prosilver style the way to add links may be different. If so then please request our help on the phpBB3 Support.

First to add the link:
Open: styles/your_style/template/overall_header.html

Find:

Code: Select all

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

Add either before or after: Depends on if you want the new link before or after the FAQ link.

Code: Select all

<li class="icon-faq"><a href="YOUR LINK" title="TITLE OF THE LINK ON MOUSE OVER">TITLE</a></li>

With the icon-faq that tells the style which icon you would like to use. There are other ones that are already installed with phpBB3 as standard. Just change the icon-faq to which one you want to use. You can chose from one of these;
[spoiler]icon-bookmark
icon-bump
icon-faq
icon-fontsize
icon-home
icon-logout
icon-members
icon-print
icon-register
icon-search
icon-subscribe
icon-ucp
icon-unsubscribe[/spoiler]

To add your own image you will have to use an image that has the width and height of 16 x 16 pixels maximum.
Here is how to add your own image:
Place you image in styles/your_style/theme/images
Open: styles/your_style/theme/buttons.css
Find:

Code: Select all

.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search

Add After:

Code: Select all

.icon-your-icon

change the your-icon to the name of your icon, So its like icon-picture.

Open: styles/your_style/theme/colours.css
Find:

Code: Select all

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

Add After:

Code: Select all

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

Your better off having your image as a gif, You will also have to name it icon_youriconname

After wards you will have to refresh your template and your theme. To do this you need to login into your Administrator Control Panel (ACP) then go to Styles > Go on Template/Themes > then click on Refresh on your style that you have just edited.

Please Note. Its best to edit the file and not edit it in the ACP as refreshing your style or purging your cache will undo all changes that you have made.