Table of Contents
All Visual Portfolio blocks and skins are styled through CSS variables, so you can change how they look without overriding rules.
Naming
A variable name reads --vp-{part}--{element}__{property}, for example --vp-items-style-fade--overlay__background, --vp-filter-minimal--items__color and --vp-layout-slider--arrows__color. A hover state adds -hover to the element: --vp-items-style-fade--image-hover__transform.
Global Variables
You can change globally defined variables, that are used in blocks. Example – change globally defined border-radius and brand color:
:root {
--vp-color-brand: red;
--vp-border-radius: 0px;
}| Variable | Default |
|---|---|
--vp-color-brand | #2540cc |
--vp-color-gray, --vp-color-gray-darken, --vp-color-gray-light, --vp-color-gray-lighten | #6c7781, #4b4b4b, #e8e8e8, #f7f7f7 |
--vp-border-radius | 5px |
--vp-transition-duration, --vp-transition-easing | 0.3s, ease-in-out |
--vp-items__gap, --vp-items__gap-vertical | Taken from the block settings. |
--vp-images__object-fit, --vp-images__object-position | cover, 50% 50% |
--vp-popup__z-index | 1500 |
--vp-popup--thumbnails__size | 160px |
--vp-lazyload-images__background, --vp-lazyload-images__animation-duration | A shimmer gradient, 7s |
Skin Variables
Each skin has its own variables, that you may change individually. Example – change the Fade skin overlay background color and hover image transform:
.vp-portfolio__items-style-fade {
--vp-items-style-fade--image-hover__transform: scale(1);
--vp-items-style-fade--overlay__background-color: red;
}More Variables
Skin, filter, sort, pagination and slider variables live in the _variables.scss files of the plugin’s templates/ and assets/css/ folders: