Table of Contents
All Visual Portfolio blocks and modules use CSS Variables, so you can easily change styles for your project.
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;
}Modules Variables
Each module has it’s own variables, that you may change individually. Example – change Fade style 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;
}