Note: post updated August 26, 2019 to bring it up to date.
(Click here for part one.)
Once your forum is setup for basic public access, you generally want to change its look. If you like the default prosilver style, and many admins do, then perhaps the only thing you might want to do is add a logo.
Selecting a new style
If you want to use a different style, there are many sources:
- Official styles are styles that are submitted to the phpBB group and are made publicly available for download on phpbb.com after a review team asserts that the style meets the group’s design standards. The easiest way to tour styles is to use the styles demo for phpBB 3.2. If you find one you like click on the download link. These styles are free.
- There are other sites that provide phpBB styles that may cost money. Some of these include artodia.com, awesomestyles.com, rockettheme.com and themeforest.net. Since many of these styles have not been approved by the phpBB group (because paid styles cannot be downloaded from phpbb.com), it’s possible but unlikely that they won’t meet their criteria.
- If you are trying hard to match colors used by your website, check out colorizeit.com. The site offers a way to colorize some of the more popular phpBB styles.
One factor to consider is whether the style is “Sassy” or not. All phpBB 3.1 and 3.2 styles should be responsive, i.e. they should intelligently “size down” for mobile devices. A “Sassy” style is one that uses .sccs files. These must be edited and then the style must be “compiled” to change what is displayed. Often you will get a user interface for making changes to Sassy styles, such as changing the colors. Otherwise, changes you make will need to be compiled. For the novice, the process of editing and publishing these files can be intimidating. I discuss this more in this post. If you download a style and it contains .sccs files in the style’s theme folder, it’s a Sassy style.
Installing a new style
The phpBB group has full instructions for installing a style. It’s straightforward. If you are going to be customizing the style, you may want to customize it to reduce the hassle when you apply updates to the style.
Adding a logo
Typically you will want to add your own logo. You will of course need a logo, and it should be in a .jpg, .gif or .png format, and probably fairly small in size too. You will need to know the image’s width and height. Clicking on the properties of the file may tell you this information. If you have a Mac, use the “Get Info” button of the Finder after you select the file. Images should be uploaded to your style’s theme/images folder.
You will generally have to edit at least one file to place the image, usually colours.css and common.css. Search for the “.site_logo” class. For width and height, use the width and height of the image. You can specify a different size if you want the browser to stretch or shrink the image. If you want to make the image proportionately smaller, you will have to figure out the dimensions you want. There are websites that allow you to resize images. A simple search will pull these up for you. Usually you make changes to the background-image property and width and height properties. Save the files back to your style’s /theme/images folder.
Generally refreshing the page will show the style changes. You may have to hold down the SHIFT key when you refresh the page. Sometimes you may have to purge your browser’s cache. If you still don’t see the changed, check your web host control panel.
There may be some software running like Supercacher or CloudFlare that is actually serving these files. You may need to flush this cache so it is refreshed.
This topic may be of interest.
Suppressing the forum name and forum description
The default prosilver style shows both a logo and the forum name and forum description as text. Some styles show just the image. Some don’t show the image at all and only the forum name and forum description. Since many logos have the name of the forum or site already on the logo, showing both can be redundant and look unappealing. Approaches to fixing this vary:
- “Sassy” styles generally have a switch that turns the display of the logo and/or the forum name and forum description on and off. Look in the style’s theme folder for a file with “config” in the name an a .scss extension. You can probably find a switch in there. The .sccs files though must be “compiled”. There is an extension you can install to make this easy.
- Some styles require editing the overall_header.html file in the theme’s template folder. You will have to either delete or comment out the HTML that shows this information. To show a logo, you might have to uncomment or add the HTML that will display the logo.
Template changes require purging the cache in the ACP to be seen. You may also have to delete your browser’s cache and reload the page to see the changes.
Tweaking the style
Making further customizations is not for the timid and requires a moderate understanding of both CSS and phpBB’s templating system. If you have both, go ahead. Again, this post may be useful.
Making the new style the default
As an admin, you can permit as many styles as you want on the forum and users can select their style preference in the User Control Panel. As a practical matter, it is easier and less confusing for everyone to use the same style. You can set this in ACP > General > Board configuration > Board settings. You can select a style to be the default style in ACP > Customise > Style management > Styles. Click on the details link for the style you want to make the default and select the appropriate controls.
