End phpBB update styling rework with a custom style

Updated February 15, 2018 to add a few things.

Has this happened to you? You update phpBB to the latest version and find out that your custom logo or various style changes that you tediously made to phpBB are gone, or partially gone. It’s a common problem and one reason many forum owners defer updating phpBB.

You can end this hassle by creating and installing your own custom style. Using this approach your custom style inherits most of its styling from a primary phpBB style. You then selectively override the primary style’s CSS, HTML or Javascript with your own changes. This way when the primary style you use is changed, you don’t lose your custom changes. This also ensures that your styles and templates use the most current and approved code, which often includes security patches.

In this tutorial I will show how you can do this. I will keep my example simple by using my custom style to swap out the default phpBB logo with my own logo, sized to the new logo’s dimensions. In principle though you can go way beyond this simple use. For example, your custom style can overwrite the inherited style’s colors, padding and margins, or container widths and heights. You can also overwrite HTML and Javascript files.

Overview of steps required

The basic approach is:

  1. Make a note of all the changes you made to your style
  2. Reload your preferred style
  3. Create a custom style that inherits from your preferred style
  4. Override the preferred style’s stylesheet directives. This is best done by creating a stylesheet.css file for your custom style and placing your style customizations there.
  5. If you changed some templates, place the custom version of these templates in your custom style’s template directory. Frequently, forum owners will make changes to overall_header.html and overall_footer.html.
  6. Install the custom style
  7. Make the custom style the primary style
  8. Test and refine

Let’s delve into each step to see how this is done.

Make a note of all the changes you made to your style

You probably know what these changes are, but if you have any questions you can use a file comparison tool like WinMerge (for Windows) or kdiff3 (for pretty much any operating system) to compare your files with a reference version.

  1. Download your current style folder where you made all your custom changes, such as /styles/prosilver
  2. Download a reference version of your style for your current release of phpBB. phpBB keeps a list of its releases here. If your styles are based on prosilver then you would use the reference /styles/prosilver folder for your current release of phpBB. If using a different style, find the style version you used. You may have to download it from phpbb.com or from the style author’s website.
  3. Run the file comparison tool and note the changes you made so they can be reapplied in the custom style.

Reload your preferred style

  1. Make certain you have documented all the changes you made to your style. Once they are overwritten, you may not be able to recover them.
  2. Since you made changes to your preferred style, it’s a good time to undo them. The simplest way is to upload the reference version of your style, replacing anything that’s there. Purge the cache. If you don’t see the style changes afterward, clear your browser’s cache and reload the page.

Create a custom style that inherits from your preferred style

  1. First review phpBB’s Creating & Modifying Styles page.
  2. Create a folder in the styles folder for the name of your style. In this example I keep it simple and call the folder “custom”, i.e. /styles/custom.
  3. Create a style.cfg file in this folder. Copy the style.cfg contents from your parent style’s style.cfg file. Below is the code in /styles/prosilver/style.cfg for phpBB 3.2, which I used because my “custom” style inherits from prosilver.
#
# phpBB Style Configuration File
#
# This file is part of the phpBB Forum Software package.
#
# @copyright (c) phpBB Limited <https://www.phpbb.com>
# @license GNU General Public License, version 2 (GPL-2.0)
#
# For full copyright and license information, please see
# the docs/CREDITS.txt file.
#
# At the left is the name, please do not change this
# At the right the value is entered
#
# Values get trimmed, if you want to add a space in front or at the end of
# the value, then enclose the value with single or double quotes.
# Single and double quotes do not need to be escaped.
#
#

# General Information about this style
name = prosilver
copyright = © phpBB Limited, 2007
style_version = 3.2.0
phpbb_version = 3.2.0

# Defining a different template bitfield
# template_bitfield = lNg=

# Parent style
# Set value to empty or to this style's name
# if this style does not have a parent style
parent = prosilver
  1. In my example I changed “name = prosilver” to “name = custom”. Since I want to inherit from prosilver I left the “parent = prosilver” line unchanged. If you are changing a style other than prosilver as the primary style, you need to change the parent style to the correct style name. It must match the parent folder name in the styles folder. You might also want to edit the copyright, style_version and phpbb_version lines. If it’s only for your own use, this is not necessary. Here are my changes:
# General Information about this style
name = custom
copyright = © Mark D. Hamill
style_version = 1.0.0
phpbb_version = 3.2.2

# Defining a different template bitfield
# template_bitfield = lNg=

# Parent style
# Set value to empty or to this style's name
# if this style does not have a parent style
parent = prosilver
  1. Save the file, making sure it is in the root folder for the custom style, e.g.: /styles/custom/style.cfg.

Override the preferred style’s stylesheet directives

  1. Create a theme folder for your style. In my example, this would be /styles/custom/theme.
  2. Create an images folder inside the theme folder. In my example, this would be /styles/custom/theme/images.
  3. If changing the logo, upload the logo you will use to /styles/custom/theme/images. Make a note of the image’s height and width as you will need this later.
  4. Create a file called stylesheet.css in the theme folder.
  5. To inherit styles from your parent style, you need an @import statement at the top of this file. For example, if prosilver is the preferred style, this line would be at the top of the file. Generally you just need to reference the stylesheet.css file in the parent style. You will have to amend the path so it finds the parent style’s stylesheet files. In my case for the @import line, I added “../../prosilver/theme/”. The ?v=3.2 indicates the version of phpBB expected, so it may have to be changed.
@import url("../../prosilver/theme/stylesheet.css?v=3.2");
  1. Any style changes that you want to override should now be appended to the end of this file. In the example of replacing the logo, in the prosilver style you would normally edit the .site_logo class in colours.css and common.css. In my case I added these lines at the end of my /styles/custom/theme/stylesheet.css file, which provides the correct image to use for the logo and its proper dimensions:
.site_logo {
    background-image: url("./images/mark.jpg");
    width: 181px;
    height: 229px;
}
  1. I then saved the file stylesheet.css with my changes.

Changing templates

In my example, since I am only replacing the logo so no template changes were needed. If you need to change templates there are two approaches.

  1. The simplest is to copy the template, for example, /styles/prosilver/template/overall_header.html to /styles/custom/template/overall_header.html. Then make the changes that you need to make and save the file. This has a downside: if there are changes made to this template with an update, your version won’t have them unless you manually inspect for any changes and apply them to your custom version.
  2. In many cases you want to insert some HTML or Javascript rather than change existing HTML or Javascript. In this case it’s better to use template events, if you can “hook into” an appropriate event. This way if the parent style is changed with an update, you don’t have to worry about replicating any changes to it in your style. For example, overall_header.html has a template event in it marked as <!– EVENT overall_header_head_append –>. In this case you could create an event folder in your template folder then create a file called /styles/custom/template/event/overall_header_head_append.html. Add whatever HTML you want inserted when this event is encountered into this file. A list of template events can be found here.

Install the custom style

  1. ACP > Customise > Style management > Install Styles
  2. Select the new style you created (“custom” in my example) by pressing the corresponding Install style link.

Make the custom style the primary style

ACP > General > Board configuration > Board settings. Generally you set the default style to your new custom style, the guest style to your new custom style and you may optionally want to set the override user style option to Yes. Submit the form.

Test and refine

You should not need to purge the cache if you make any stylesheet changes. However, if you make subsequent changes to any templates first purge the cache then test.

Approach when upgrading

This approach is unlikely to work correctly when upgrading. An upgrade is when you go from one minor release of phpBB to another, such as from 3.2 to 3.3. You can of course go through the process of creating a new custom style again. As for updates, this should work.

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *