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
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.
