Adding Your Own CSS with custom.scss

Since 2026.1, the WebWorks Reverb 2.0 format includes a SASS file reserved for your own rules, custom.scss. It compiles to css/custom.css, and every page template links that stylesheet last: the content page, the splash page, the not-found page, popups, the search page, and the top-level entry file. Because it loads after all of the stock stylesheets, a rule you write in custom.scss wins any contest with a stock rule of equal specificity. You do not need to raise specificity artificially, and you do not need to override an entry point such as skin.scss or webworks.scss just to add a rule.

As installed, the file contains nothing but the variable imports:

@import "functions";
@import "colors";
@import "fonts";
@import "icons";
@import "sizes";
@import "borders";

These imports produce no CSS of their own. They make every skin variable available inside custom.scss, and they pick up any variable overrides you have already made in _colors.scss, _sizes.scss, _borders.scss, _fonts.scss, or _icons.scss. Your rules can therefore reference the same values the rest of the layout uses, rather than repeating literal colors and sizes.

To add your own CSS rules to WebWorks Reverb 2.0

1. In your Stationery design project, on the View menu, click Project Directory. For more information about override files and locations, see Stationery, Projects, and Overrides.

2. If you want your rules to apply to all WebWorks Reverb 2.0 targets, create the Formats\WebWorks Reverb 2.0\Pages\sass folder in your <projectname> folder, where <projectname> is the name of your ePublisher project.

3. If you want your rules to apply to one WebWorks Reverb 2.0 target, create the Targets\<Target Name>\Pages\sass folder in your <projectname> folder, where <Target Name> is the name of the specific target.

4. Copy the custom.scss file from the following folder to the sass override folder you created within your project folder:

   Program Files\WebWorks\ePublisher Designer\Formats\WebWorks Reverb 2.0\Pages\sass

5. Open the copied custom.scss file in a text editor and add your CSS rules below the @import statements.

6. Save and close the custom.scss file.

7. Regenerate your project to review the changes.

Note: Your copy replaces the installed custom.scss entirely, so keep the @import statements at the top of the file. Rules that should apply only when a reader prints belong in custom.scss as well, inside an @media print block.