Home FAQ How to change color of basic theme elements

How to change color of basic theme elements

In this FAQ, you can find some Custom CSS code to change the color of basic elements of VideoPro theme such as menu, search box, sidebar, footer, etc. Just add the CSS to Theme Options > Custom CSS, save & reload to see the changes. The CSS is applied to the main demo of VideoPro so if you don’t find the CSS you need or things still remain unchanged. Please reach us at the Ticket System, our supporters are willing to help. Last but not least, the COLOR_CODE can be HEX, RGB, RGBa, HSL, using a color picker as https://www.w3schools.com/colors/colors_picker.asp you can find code of any colors.

  • Main navigation color & background

.cactus-nav-main.dark-div { background-color: COLOR_CODE; }
.cactus-nav-main.dark-div a { color: COLOR_CODE; }
.cactus-nav-main.dark-div a:hover { color: COLOR_CODE; }

  • Search Box in Header 

.cactus-header-search-form form input:not([type="submit"]) { background-color: COLOR_CODE; }
.cactus-header-search-form form input:not([type="submit"]):focus { background-color: COLOR_CODE; }

  • Left & Right sidebars

.cactus-sidebar:before,
#body-wrap:not(.cactus-box) .cactus-sidebar-control.sb-ct-small .cactus-container:not(.ct-default) .main-content-col:before { background-color: COLOR_CODE; }
@media(min-width:1281px){
#body-wrap:not(.cactus-box) #cactus-body-container > .cactus-sidebar-control.sb-ct-medium.sb-ct-small > .cactus-container:not(.ct-default) { background-color: COLOR_CODE; }
}

  • Main Body container

@media(min-width:1281px){
#body-wrap:not(.cactus-box) #cactus-body-container > .cactus-sidebar-control.sb-ct-medium.sb-ct-small > .cactus-container:not(.ct-default):before { background-color: COLOR_CODE; }
}

  • Main Bottom sidebar & Footer

.cactus-carousel-style-bottom { background-color: _COLOR_CODE_; }
footer { background-color: _COLOR_CODE_; }