phpBB 3.1 Tutorial

This tutorial explains how to change logo in phpBB 3.1 styles available on this website.

Logo files

All images used by style are located in directory theme/images/ of style's directory (such as styles/elegance/theme/images/).

There are 2 logo files:
  • logo.png - default logo image used for most visitors.
  • logo_hd.png - additional logo image for high definition displays. It is the same image as logo.png, but twice bigger.

    High definition displays are very common these days: iPhones, iPads, MacBooks with Retina display, phones and tablets from Samsung and so on.

    High definition displays have high pixel density and usual images look pixelated. To solve that issue styles use logo_hd.png to display smoother logo that is displayed only to visitors that use devices with high definition displays.

There are several ways to change logo. Use whichever works better for you. Additionally see section below explaining how to create high definition logo.

Easy method: swapping both logos

If you have both normal and high definition logos and they are in PNG format, do this:

1. Rename your normal logo to logo.png
2. Rename your high definition logo to logo_hd.png
3. Upload both logos to theme/images/, replacing old files.

That's all.

No need to change logo dimensions anywhere in style, logo dimensions aren't hardcoded.

Complex method: changing file names

If you do not have high definition logo or your images are not in PNG format, you'll need to edit logo file name in style.

First upload your logo images to directory styles/{style name}/theme/images/ (replace {style name} with name of style)

Then open file template/overall_header.html, find this code
<img src="{T_THEME_PATH}/images/logo.png" data-src-hd="{T_THEME_PATH}/images/logo_hd.png" />
If you do not have high definition logo, remove this part of line:
If you do have high definition logo, but its filename is something other than logo_hd.png, in that code change logo_hd.png to your file name.

If your normal logo has file name other than logo.png, change file name in this part of line:
For example, if you do not have high definition logo and your main logo is named my_logo.jpg, after removing HD logo code and renaming logo.png code would look like this:
<img src="{T_THEME_PATH}/images/my_logo.jpg" />
After editing overall_header.html, go to admin control panel and click "purge cache" button on admin control panel's main page.

That's it.

No need to change logo dimensions anywhere in style, logo dimensions aren't hardcoded.

How to create high definition logo

High definition logo is the same image as normal logo, but twice bigger. However that doesn't mean you can scale up normal logo - that would make it pixelated and defeat whole purpose. High definition logo is supposed to be smooth, not pixelated. Scaling up normal logo will simply create pixelated version of normal logo.

So what you need to do is create big logo first for high definition displays, then resize it to 50% of its original size to make normal logo. Make sure width and height of high definition logo are even (multiple of 2, so number should end with 0, 2, 4, 6 or 8) to scale it down properly.

Easiest way to change logo image is to simply swap both logo.png and logo_hd.png with your custom images.


If you have any questions or ran into problems, please post your questions on support forum.