phpBB 3.1 Tutorial

This tutorial explains how to automatically recompile stylesheet in phpBB 3.1 styles that use Sass.

Using phpBB 3.1 extension

This is the easiest method.

Download and install Sass compiler for phpBB. After installing it you will see new link "Compile Themes" on left side of customizations page in admin control panel.

Click that link. Extension will show you all styles that can be compiled. Click link to recompile stylesheet.

This method is very simple, but it requires few things:
  • PHP must be able to write into theme/stylesheet.css
  • It requires CURL and JSON modules to be supported by your PHP installation. Most hosts support it, but crappy and cheap hosts don't.
  • It takes a bit longer than using an app (see below) and you need to click link to recompile theme every time you make change. Apps do it faster and they automatically recompile stylesheets, so using app is recommended.

Using an app

There are several apps available that can automatically recompile stylesheet, this tutorial explains how to use Prepros.

Prepros is available for OSX and Windows. Even though its a paid app, it has unlimited trial version. Unless you plan to use it for development, unlimited trial is more than enough to compile phpBB 3.1 stylesheets.

You can also try Koala app. It is very similar to Prepros, it is open source, available for OSX and Windows, but it has less functions.

Installation and configuration

1. Download Prepros, install it, open it.

2. Click here to download configuration file. Unpack it, copy prepros.cfg to your forum's "styles" directory.

3. Open prepros.cfg with Prepros app (or drag and drop it to app).

That's it. Very simple installation.

Recompiling stylesheet

Leave Prepros open, edit any .scss file, save it. Prepros will automatically recompile stylesheet and save it as stylesheet.css. To test your changes refresh forum page in your browser (or upload new stylesheet.css to your live forum).

It usually takes only few seconds to recompile stylesheet. Prepros will alert you when it has finished compiling.

Using command line

Another way to compile stylesheet is from command line. This is a bit more complex.

First you need to install Sass. Go to sass-lang.com, follow instructions to install Sass.

Then open Terminal (OSX) or command line (Windows), navigate to theme directory, run this command
Code:
scss --style expanded stylesheet.scss > stylesheet.css
and it will generate stylesheet.css.

If you want Sass to automatically generate stylesheet.css whenever you edit any .scss file, run this command instead (this might not always work correctly with style version below 1.0.2):
Code:
sass --watch --style expanded stylesheet.scss:stylesheet.css

Problems

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