Use our officially supported CSS variables to customize Viewport’s Help Center Theme.

If you decide to further customize the Help Center Theme by injecting custom CSS code, we recommend keeping your customizations to elements and components that we officially support.

Officially supported theme and component variables don’t change over time and are thus resilient to general changes and improvements we make to the theme. As a result, your customizations remain stable and won’t require adjustments over time.

How to Work with Components

Components consist of two attributes: a component name and, optionally, visual variants.

Attribute

Description

data-vp-component

The encapsulated component

e.g.

<element data-vp-component="name" />
CODE

data-vp-variant

The optional variant of the selected component

e.g.

<element data-vp-component="name" data-vp-variant="variant" />
CODE

(lightbulb) Using CSS, select components with these attributes and overwrite their internal variables:

/* Inside custom CSS */

[data-vp-component="my-component"] {
  --text-color: red;
  --border-width: 4px;
  --border-radius: 0px;
}

[data-vp-component="my-component"][data-vp-variant="large"] {
  --height: 48px;
}
CSS

Currently Supported Components

We are currently working on extending this documentation of supported components.

Variants

  • large

CSS Custom Properties​

Name

Description

--height

Height of the search-bar

--border-width

Border width of the search-bar

--border-radius

Border radius of the search-bar

search-suggestion

CSS Custom Properties​

Name

Description

--text-color-option

Text color of a search-suggestion option

--text-color-option-active

Text color of an active search-suggestion option

--background-color-panel

Background color of the options panel

--background-color-option

Background color of the options

--background-color-option-active

Background color of an active option

--border-color-panel

Border color of the options panel

--border-radius-panel

Border radius of the options panel

--shadow-panel

Shadow of the options panel

search-input

Variants

  • border

CSS Custom Properties​

Name

Description

--height

Height of the search-input

--border-radius

Border radius of the search-input

--border-width

(info) Supported by variant border

Border width of the search-input

--border-style

(info) Supported by variant border

Border style of the search-input (CSS values of the border-style property)