This explains how to change the default logo on your phpBB 3.1.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.
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, or gif.
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.gif
or give it a different name.3. Configuring your logo
Download, backup, and open the file
/styles/prosilver/theme/[b]imageset.css[/b]
in a text editor (see Tools needed to set up and customise phpBB for some suggestions) and find:Legend: file name and type; width in pixels; height in pixels.imageset.css wrote:.imageset.site_logo {
background-image: url("./images/site_logo.gif");
padding-left: 149px;
padding-top: 52px;
}
Edit the file name, width, and height to match your new logo.
Save and upload the
imageset.css
file, to the same location on your server, using your FTP client (overwriting the existing file).Your new logo should now be displaying in the forums.
4. Troubleshooting
If the logo is not displaying properly:
- 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
- Check all the edits again. A single mistyped character in the image name could prevent it from displaying.
- If part of the image is not showing then you likely have not adjusted the padding settings correctly.
- Double check that you've followed all the steps, and made the changes to the style you're using and not a different one.
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: [color=red]298px[/color] [color=blue]104px[/color];
(width in pixels; height in pixels.) The padding-left
and padding-top
properties would also need to be similarly adjusted.