Breadcrumbs

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-page-template).

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

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

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