Skip to main content

Customization

Learn how to edit and customize your theme.

There are two ways to customize Focus:

  • CSS overrides - A simple method using compiled CSS.
  • SCSS customization - A more advanced approach with build tools.

CSS overrides

The easiest way to modify the theme is by using the compiled files in the dist/ folder.

  1. Create a custom.css file in assets/css/.
  2. Link it after style.css in the <head> of your pages.
  3. Add your CSS rules in custom.css to override the theme’s styles.
<link rel="stylesheet" href="assets/css/custom.css">

Customizing SCSS

For more control, you can edit the SCSS source files. This is recommended if you're familiar with build tools and SCSS syntax.

Inside src/assets/css/, you'll find:

  • _user-vars.scss - Define custom variables.
  • _user.scss Add your custom styles.

Modify and compile these files to extend or override the theme’s styles.