Officially Supported CSS Variables
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 |
|---|---|
| The encapsulated component e.g.
CODE
|
| The optional variant of the selected component e.g.
CODE
|
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;
}Currently Supported Components
We are currently working on extending this documentation of supported components.
search-bar
Variants
large
CSS Custom Properties
Name | Description |
|---|---|
| Height of the search-bar |
| Border width of the search-bar |
| Border radius of the search-bar |
search-suggestion
CSS Custom Properties
Name | Description |
|---|---|
| Text color of a search-suggestion option |
| Text color of an active search-suggestion option |
| Background color of the options panel |
| Background color of the options |
| Background color of an active option |
| Border color of the options panel |
| Border radius of the options panel |
| Shadow of the options panel |
search-input
Variants
border
CSS Custom Properties
Name | Description |
|---|---|
| Height of the search-input |
| Border radius of the search-input |
|
Border width of the search-input |
|
Border style of the search-input (CSS values of the |
Supported by variant