Skip to main content
Skip table of contents

Restrict CSS styles to page templates

Sometimes it is necessary to change the CSS styling for all pages with a specific page layout. By utilizing the predefined page layouts, you can control which pages your styles apply to.

Each page of the Help Center utilizes one of the following page templates:

The current page template is represented by an attribute on the HTML document’s root node (data-vp-page-template).

<html data-vp-page-template="portal">...</html>

To change the styling of a page template, simply select the desired template inside Viewport’s Custom CSS and apply your custom styles to it:

/* Alter the site's header on all pages with the "article" template */
:root[data-vp-page-template="article"] {
  --vpt-theme-header-text-color: midnightblue;
  --vpt-theme-header-background-color: cornflowerblue;
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.