What's new

Welcome to WebForum | Zimbabwe Web Hosting Forum.

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask questions and get answers from our community

Answer

Answer questions and become an expert on all topics.

Contact us

Get in touch with the site administrator directly.

Forum Group

Join the Forum Whatsapp group for daily updates.
  • Thanks for participating in our community, Discuss and Learn. All Forum members are allowed to create threads and posts. Resources posted here should be CLEAN and SAFE. Do not post “offensive” posts, links, or images. Remain respectful of other members at all times.

Change your phpBB board logo.

WebForum

Administrator
Staff member
Administrator
Moderator
Business
Joined
May 19, 2021
Messages
98
Reaction score
21
Points
8
Location
Bulawayo
Website
ecowebzim.com
Note: There is an extension to achieve this: Site Logo BUT for the moment, it is a Release Candidate and is only for 3.2.x.
  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 customize 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 displayed 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 into the 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.
 

Forum statistics

Threads
114
Messages
175
Members
89
Latest member
denzel
shape1
shape2
shape3
shape4
shape5
shape6
Back
Top