phpBB3 Top Logo Tutorial

How to change or remove the top logo in phpBB3

In this tutorial we'll show you how to change or remove the top phpBB3 logo from the frontend of your forum. We'll use as an example the default prosilver style, but the process is the same with other styles.

The logo is usually in the top left corner, and it's also a link to the home page of your site:

Default Top phpBB3 Logo

First, you have to log in to the administration control panel. Then click on the Styles tab, and once you're on the Styles page click on the Imagesets link on the left:

Admin Panel-Styles Page

If you haven't made any changes after the installation, there will be two styles there. The default one (prosilver), and another one (subsilver2), which is uploaded but not installed. To install it you only need to click on Install. To learn how to install and change styles read the tutorial on installing and changing phpBB3 styles.

After you click on Imagesets you'll see a table with the styles. Click on the Edit link for the style for which you want to change or remove the top logo. In our example it's the style prosilver:

Styles Imagesets Page

On the page that opens you'll see the current logo and several options. The Select image drop-down menu at the top of the page is set to Main logo by default. To remove the logo just set the Image drop-down menu to No image:

Edit Imageset Page

To change the logo, first you need to upload the desired image to the imageset folder of the particular style. For example, if your phpBB3 is installed in a folder called phpbb3 in the root public_html directory of your hosting account, and the style in question is prosilver, the path would be public_html/phpbb3/styles/prosilver/imageset.

You can upload the picture using an FTP client (e.g. FileZilla), or you can do it from the Files section of the HostKnox control panel, or through SSH. It's also not a bad idea to resize the picture to the specific logo dimensions before uploading it. The logo in the prosilver style, for example, is 139 pixels in width and 52 in height. After you upload the desired image in the imageset folder you can select it from the Image drop-down menu of the same Edit imageset page in the administration panel.

From the same page you can also change the images for things other than the logo (e.g. buttons, icons, etc.). When you're done configuring the settings click on the Submit button at the bottom of the page to save the changes. After that you can refresh the frontend of your forum to view the results; you might need to purge the phpBB3 cache. In our example we removed the default prosilver style logo:

Frontend Without Logo

You can also remove the logo by commenting out the corresponding code directly in the overall-header.html file for the particular style. The code that needs to be commented out looks like this (might be slightly different, depending on the style):

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

To comment it out means to put an exclamation mark and two hyphens after the first bracket (e.g. <!--) and two hyphens before the last bracket (e.g. -->) for the respective code string. So the above code should look like this when it's commented out:

<!--a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a-->

The overall-header.html file is located in the template folder in the directory of the particular style. So, as in the above example, if we assume your forum is installed in a directory called phpbb3 in the root public_html directory on your hosting account, and the style in question is prosilver, the path would be public_html/phpbb3/styles/prosilver/template/overall-header.html.

You can make the changes from the Files section of the HostKnox control panel. Just click on the name of the file with the left mouse button to see its content, and after you make the change click on the Save and Close button.