Tag: Cascading Stylesheets

End phpBB update styling rework with a custom style

On: By: Mark

Updated October 20, 2019.

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.

Note: I now offer this as a service. See my pricing summary for my current rates.

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. (You can see what version of phpBB you are using when you go into the Administration Control Panel. Look for Board version.) If using a non-prosilver style, find the style version you are using. You can see the version by selecting the Details link for the style in ACP > Customise > Style management > Styles. You can also find it by reading the style.cfg file in the root folder of the style. If it’s one of the free styles, you can find it on the styles demo page. Find the style, then click on the Details button. On the Revisions tab, click on the link for the version for your style to download that version. If a proprietary style, if you don’t have it already, you may have to download it 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. If you need to update phpBB, you might want to do this first. Bear in mind if you do this, the default prosilver style will be updated
  3. You might also want to load the latest version of the style you are using, which will become the parent style. Otherwise, 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. Keep the folder name simple. Don’t use any spaces in the folder name. It’s easier if you keep the name all in lowercase.
  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.3.0
phpbb_version = 3.3.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.3.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. 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.3 indicates the version of phpBB expected, so it may have to be changed. Note: in some cases you may have to add a second import statement. For example, the prosilver_se style’s stylesheet.css file does not reference the parent prosilver style’s stylesheet.css file. So you may need a second import statement to reference the prosilver style.
@import url("../../prosilver/theme/stylesheet.css?v=3.3");
  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, no template changes were needed. The only viable approach 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 the parent’s template with an update, your version won’t have them unless you manually inspect for any changes and apply them to your custom version.

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. If you don’t see the style changes, try deleting your browser’s cache, then reload the page. On desktop and laptop computers, sometimes holding the SHIFT key down while pressing the RELOAD button will work.

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!

Compiling and tweaking styles in phpBB

On: By: Mark

Many fancier phpBB styles are now written to be “compiled”. This means that if you need to make changes to a stylesheet, you actually need to find the right .scss stylesheet and edit that instead of the traditional approach of editing a .css file. If your style uses this approach, you will find these .scss files in the theme folder of your style.

Unfortunately, after editing these files no changes are automatically affected on your website. You must “compile” these .scss files into a stylesheet that the browser will recognize, i.e. with a .css suffix. In the phpBB world this generally means compiling all these .scss files into one file, stylesheet.css. Once that file is rewritten the changes will be applied by the browser.

Using Chrome's developer tools to inspect the CSS for a page object
Using Chrome’s developer tools to inspect the CSS for a page object

How do you know what .scss file to edit? It’s hard to know when a stylesheet is compiled since all the styling is in stylesheet.css. It helps to “snoop around”. There’s a simple way to do this: use the Inspector built into all the browsers. While the look varies a bit from browser to browser, you just right mouse click and find the Inspect option. You can save some time if you have your mouse pointer focused on the area you want to inspect first then doing the right mouse click.

In the example shown, I used the Inspector built into the browser to look at the <div> object containing the search box. This gives a clue to how I might change the background color of the search box. In this example I used the default prosilver style, which does not use .scss files. However, it does say that I need to change the .search_header style to change its background color. In this case I know it’s in colours.css, but in a theme using .scss files you’d have to hunt for the file containing the style. It’s often not too hard based on what you are looking at, its intended purpose and the .scss file names.

The nice thing about both these tools is that you can test changes in the tool on the styles tab of the tool. Once you have it looking right, you can apply the change to the appropriate .scss file.

How do you compile these .scss files? If running phpBB 3.1 or 3.2, there’s a little known extension that allows you to do it. (It is little known because it is not considered an official phpBB extension, so you have to get it off the Artodia website instead.) Install it as you would any other extension then find it on the customise tab in the ACP under “Compile Themes”. Once compiled, go test it. There should be no reason to purge the cache, but if you don’t see the changes you may need to clear your browser’s cache.

If you have a phpBB 3.0 style that uses .scss styles, look for documentation with the style on how to compile it.

Many of these styles have a control file used to easily change colors, fonts, common object widths and heights, etc. It is probably called _style_config.scss.

If curious, SCSS means “Sassy CSS” files which are described in more detail on the SASS website.