Inject Custom CSS

Inject custom CSS into the your site to customize the help center theme beyond the options offered in the visual theme configurator UI.

We recommend you only use this feature if you’re experienced using CSS. Adding custom CSS can break your site or affect it in unexpected ways.

Please note that we can’t offer support for any theme issues caused by adding custom CSS.

Applying Custom CSS

You can inject custom CSS using the CSS code editor built into the theme configurator:

1. Open the theme configurator from Site Settings > Look and feel > Customize theme.

2. Click on the Code tab.

3. Enter your custom CSS code in the CSS editor field.

4. Click Save changes once you are happy with your code.

Now you can Close the editor and click Publish changes from your site settings.

Best Practices

Recommended Workflow

The theme preview in the theme editor is not clickable which makes it hard for you to find references to the CSS elements you would like to customize. That’s why we recommend the following workflow when using the CSS editor:

1. Configure your theme as far as you can using the options provided in the theme configurator.

2. Close the editor.

3. Click Publish changes in the top right of the settings.

4. Open the live site and inspect the HTML of the site. You’ll be able to overview all CSS custom properties.

5. Create a local override for your browser (e.g using Google Chrome's DevTools).

6. Add your custom CSS into the local override file.

7. Once done, copy and paste the custom CSS of the local override file into the CSS editor field in the theme configurator.

8. Using the theme configurator preview, check that your customizations have been applied.

9. Close the editor

10. Click Publish changes in the top right of the settings.

Your change will now automatically trigger a new site update (for sites set to live updates) or be applied with your next site update (for sites set to manual updates).

Style your site with design tokens

The Help Center theme’s design tokens enable customization, ensure visual consistency and allow you to enhance the site's appearance. Design tokens are considered stable and enable great customization abilities. Design tokens are therefore the recommended way to style your Scroll site.

Design tokens represent conscious design decisions and are the building blocks of the Help Center theme. To enable this, the help center theme's design token system uses CSS custom properties under the hood.

Override component styles

Trouble With Your Site After Adding CSS?

Is your site displaying errors or not working as expected? To exclude your custom CSS as the root cause of the problem, we recommend testing your site without any custom CSS applied.

Add ?disable-custom-overrides=true as a parameter to a Scroll site’d URL in the browser to exclude the custom resources from the theme.