phpBB • Free and Open Source Forum Software

Note: There is an extension to achieve this: Change Logo.

1. Getting Started
2. Uploading your Logo
3. Configuring your Logo
4. Troubleshooting
5. Notes

This explains how to change the default logo on your phpBB 3.2.x board.

1. Getting Started
If you have not uploaded files before, or do not know how to use FTP or SSH, you will need to be able to do that. The Knowledge Base has a short guide FTP. See Tools needed to set up and customise phpBB for some client suggestions..

2. Uploading Your Logo
Using your FTP or SSH client, you need to upload the image to: /styles/prosilver/theme/images/. You can name your image the same as the default logo site_logo.svg in phpBB 3.3.x or site_logo.gifin phpBB 3.1.x and 3.2.x, or give it a different name. If the logo image is not a .SVG, it will, of course, require a name with the correct extension.

You need to find yourself a logo to be uploaded which you are allowed to use or else create your own. Be aware that no browser will be able to display all image types, therefore, it is best to limit the image to one of the commonly supported types: png, jpg, svg or gif.

3. Configuring your logo. If you are using a style that inherits from prosilver (example, prosilver_se), see item B, below. Otherwise, follow item A, below.

A. Download, backup, and open the file /styles/prosilver/theme/colours.css in a text editor (see Tools needed to set up and customise phpBB for some suggestions) and find:

colours.css wrote:.site_logo {
background-image: url("./images/site_logo.svg");
}

OR

colours.css wrote:.site_logo {
background-image: url("./images/site_logo.gif");
}

Edit the file name to match your new logo.

B. Download, backup, and open the file /styles/prosilver/theme/common.css in a text editor and find:

common.css wrote:.site_logo {
display: inline-block;
width: 149px;
height: 52px;
}

Edit the width, and height to match your new logo. Note that .SVG files may have their height and width expressed in units other than pixels, but you can express the height and width in pixels.

B. Download, backup, and open the file /styles/prosilver_se/theme/stylesheet.css in a text editor (see Tools needed to set up and customise phpBB for some suggestions) and find:

stylesheet.css wrote:.site_logo {
background-image: url("./images/site_logo.gif");
}

Edit the file name to match your new logo.

Download, backup, and open the file /styles/prosilver_se/theme/common.css in a text editor and find:

common.css wrote:.site_logo {
display: inline-block;
width: 149px;
height: 52px;
}

Edit the width, and height to match your new logo.

Save and upload the colours.css (or the stylesheet.css file, if your style inherits from prosilver) and the common.css files, to the same location on your server, using your FTP client (overwriting the existing files).

From the ACP, Purge the board cache. The button to do that is on the right side of the main screen.

Your new logo should now be displaying in the forums.

4. Troubleshooting
If the logo is not displaying properly:

1. Try refreshing your browser. A normal browser refresh reloads the page from the browser cache, you will need to reload the page from the server, also known as a hard refresh. Browsers vary but it can usually be accomplished:
   • For Windows and Linux using: Ctrl + F5 or Shift + Reload
   • For Mac using: ⌘ (Cmd) + F5 or Shift + Reload
2. Check all the edits again. A single mistyped character in the image name could prevent it from displaying.
3. If part of the image is not showing then you likely have not adjusted the padding settings correctly.
4. Double check that you've followed all the steps, and made the changes to the style you're using and not a different one.

5. Notes (optional stuff)
The background-image: url is the path to the image is relative to the /styles/prosilver/theme/ directory. So, if your new board logo was called fish_heads.png and for some reason you put the image in to root of your board the path would be ../../../fish_heads.png.

If your image needs to be resized it is best to use an image editing application to resize it because that will, generally, result in a better quality image display. However, you can use a CSS property. On a new line below the background-image: property add the line:

background-size: 298px 104px; (width in pixels; height in pixels.) The width and height properties in common.css would also need to be similarly adjusted.
-----------------------------------------
Credit to P_I for pointing out the css changes.

20170910 - Revised to add info re inherited styles
20231020 - Edited to refer to Change Logo extension