phpBB • Free and Open Source Forum Software

This style uses Sass language for stylesheet. It is basically advanced CSS with variables, conditional statements that makes writing complex CSS a very simple job. See http://sass-lang.com/

What matters is in this style you should never edit stylesheet.css!

Instead you should edit .scss files. Those are Sass files with syntax compatible with CSS. You can open them with any CSS file editor or basic text editor. File stylesheet.css is generated from many smaller .scss files.
After editing and .scss file, you must recompile stylesheet.css.

Although it is technically possible to modify a compiled CSS file, it is generally preferable to avoid doing so and to work with the scss files where possible. This ensures a smoother development process that is easier to maintain and less prone to errors.

---

Here are a few tools you can use to compile your files.

• Using phpBB extension
  This is the easiest method.
  
  Download and install SCSS Compiler for phpBB.
  After installing it you will see new link "SCSS compiler" under "Style management" 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.

• Using code editor
  For example, you can use the free code editor Visual Studio Code, by installing the Live Sass Compiler extension.

• Using an app
  There are several apps available that can automatically recompile stylesheet.
  You can try Koala app. It is free, open source, available for OSX, Linux and Windows.

---

Best practices for modifying your style.

Rather than modifying the content of the source scss files directly, you can use two separate files to add your own declarations.
These files are systematically delivered empty and, if you have modified them, all you need to do is copy the ones you use or their content when updating.

• The _custom_config.scss file is intended for you to add your own custom configuration parameters.
  
  If, for example, you want to centre the logo, instead of modifying this line in _style_config.scss:

  Code: Select all

  $center-logo:							false !default;	// true or false

  All you have to do is add this to _custom_config.scss:

  Code: Select all

  $center-logo: true;

• The _custom.scss file is designed to receive your own CSS (or SCSS) declarations.

Remember, for your changes to be taken into account, you'll need to recompile the stylesheet.css.