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:

portal — Renders the portal page
content-source — Renders the content source page
article — Renders the individual article pages
search — Renders the search results page
error — Renders the error page

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

HTML

<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:

CSS

/* 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;
}