Setting up your forum, part two (installing styles)

Note: post updated November 7, 2017 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 (in part 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 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. 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.

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 “.site_logo”. For width and height use the width and height of the image. 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 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.