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