Inject custom CSS to your Scroll Viewport site using the built-in CSS editor. The CSS editor allows you to further customize the Help Center theme beyond the options provided in the visual theme editor.

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. We recommend to make use of our Officially Supported CSS Variables whenever possible.

Applying Custom CSS

To find the CSS editor, click Edit Theme from your site overview and go to the Templates menu. In the Additional section, expand the CSS editor option to find the editor field.

Best practices

General workflow

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

  1. Configure your theme as far as you can using the visual theme editor.

  2. Generate a preview of your site.

  3. Open the generated preview and inspect the HTML of the site. You’ll be able to overview all Viewport variables (--vp-). Please also refer to our list of Officially Supported CSS Variables .

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

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

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

  7. Using the theme editor preview, check that your customizations have been applied.

Save your changes and close the editor. Update your site and go live to bring those new changes to your live site.

Changing fonts

To change the default help center theme font for body and headings to a different font, we recommend injecting your code similar to the example below.


@import url('');

:root {
    --vp-font-family-default: Helvetica, Arial, serif;
	--vp-font-family-headline: 'Shadows Into Light', cursive;

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 Viewport site URL in the browser to exclude the custom resources from the theme.