Learn how to adjust your custom CSS or Javascript code from Scroll Viewport, so it continues to work in Scroll Sites' help center theme.
We have renamed some HTML attributes and theme tokens in Scroll Sites' help center theme and deprecated some others that existed in Scroll Viewport.
Please adjust your custom code according to the updates detailed in the tables below.
Name in Scroll Viewport | 🆕 Name in Scroll Sites |
|---|
data-vp-component
| data-component
|
data-vp-variant
| data-appearance
|
data-vp-page-template
| data-page-template
Supported values stay unchanged: portal content-source article search error
|
data-vp-page-id
| data-page-id
Contains the Scroll Sites page id. Not the Confluence page id as it used to in Scroll Viewport.
|
The vpt prefix was removed from all theme tokens.
Example: --vpt-theme-text-font is now --theme-text-font
Name in Scroll Viewport | 🆕 Name in Scroll Sites |
--vpt-theme-text-font
| --theme-text-font
|
--vpt-theme-text-color
| --theme-text-color
|
--vpt-theme-text-scale
| --theme-text-scale
|
--vpt-theme-headline-font
| --theme-headline-font
|
--vpt-theme-headline-color
| --theme-headline-color
|
--vpt-theme-headline-scale
| --theme-headline-scale
|
--vpt-theme-header-text-color
| --theme-header-text-color
|
--vpt-theme-header-background-color
| --theme-header-background-color
|
--vpt-theme-header-height
| --theme-header-height
|
--vpt-theme-footer-text-color
| --theme-footer-text-color
|
--vpt-theme-footer-background-color
| --theme-footer-background-color
|
--vpt-theme-banner-text-color
| --theme-banner-text-color
|
--vpt-theme-banner-image
| --theme-banner-image
|
--vpt-theme-banner-background-color
| --theme-banner-background-color
|
--vpt-theme-primary-color
| --theme-primary-color
|
--vpt-theme-on-primary-color
| --theme-on-primaryl-color
|
--vpt-theme-container-width
| --theme-container-width
|
--vpt-theme-scroll-offset
| --theme-scroll-offset
|
--vpt-theme-roundness
| --theme-roundness
|
Removed Tokens |
|---|
--vp-grid-step
|
--vp-layout-header-height
|
--vp-layout-scroll-offset
|
--vp-layout-container-width
|
--vp-footer-text-color
|
--vp-footer-background-color
|
--vp-header-text-color
|
--vp-header-background-color
|
--vp-button-variant-floating-action-size
|
--vp-mobile-menu-trigger-position-right
|
--vp-mobile-menu-trigger-position-bottom
|
--vp-color-black
|
--vp-color-downriver-blue
|
--vp-color-medium-gray
|
--vp-color-stratos-blue
|
--vp-color-blue
|
--vp-color-athens-gray-rgb
|
--vp-color-athens-gray
|
--vp-color-dark-gray
|
--vp-color-dark-gray-01
|
--vp-color-light-gray-rgb
|
--vp-color-light-gray
|
--vp-color-white-rgb
|
--vp-color-white
|
--vp-border-radius-small
|
--vp-border-radius-big
|
--vp-color-border-default
|
--vp-color-border-focused
|
--vp-color-background-active
|
--vp-color-text-default
|
--vp-color-text-on-active
|
--vp-ease-out-quint
|
--vp-focus-ring-inner-color
|
--vp-focus-ring-outer-color
|
--vp-font-family-code
|
--vp-font-family-default
|
--vp-font-family-headline
|
--vp-font-size-standard
|
--vp-heading-h1-font-size
|
--vp-heading-h1-font-size-mobile
|
--vp-heading-h1-line-height
|
--vp-heading-h1-line-height-mobile
|
--vp-roundness-interactive-elements
|
--vp-roundness-overlays
|
--vp-roundness-images
|
--vp-portal-banner-background-image
|
--vp-portal-banner-shadow
|
--vp-portal-banner-text-color
|
--vp-space-banner-background-image
|
--vp-space-banner-shadow
|
--vp-space-banner-text-color
|
--vp-button-background
|
--vp-button-foreground
|
--vp-button-variant-outline-background
|
--vp-button-variant-outline-foreground
|
--vp-button-variant-subtle-foreground
|
--K15t-layout-header-height
|
--K15t-layout-scroll-offset
|
--K15t-layout-container-width
|
--K15t-header-foreground
|
--K15t-header-background
|
--K15t-banner-foreground
|
--K15t-banner-background
|
--K15t-banner-image
|
--K15t-footer-foreground
|
--K15t-footer-background
|
--K15t-fab-size
|
--K15t-fab-offset-block
|
--K15t-fab-offset-inline
|
