1. Home
  2. WC Vendors Pro
  3. Code Snippets
  4. Change the WC Vendors Pro dashboard colours

Change the WC Vendors Pro dashboard colours

The following CSS will give you an example of how to change the colours for the pro dashboard. This would either go into your child theme’s style.css or into the customizer’s additional CSS section.


/* Change the colors of the navigation */
.wcv-navigation ul.menu.black{
    background: red !important;
}
.wcv-navigation ul.menu.black li a:hover{
    background: yellow !important;
}
.wcv-navigation ul.menu.black li.active{
    background: blue !important;
}
/* Most - Pro dashboard Buttons background and font color */
.wcv-grid .button{
    background-color: green !important;
    color: white !important;
}
/*  Most Pro dashboard hover colors */
.wcv-grid .button:hover {
    background-color: black !important;
    color: blue !important;
}
/* Pro dashboard search button */
button.wcv-button.wcv-search-product {
    background: red !important;
    color: white !important;
}

/* Pro dashboard search hover button */
button.wcv-button.wcv-search-product:hover {
    background: black!important;
    color: white !important;
}

/* Pro dashboard update button */
form.wcv-form.wcv-form-exclude #update_button {
    background: red !important;
    color: white !important;
}

/* Pro dashboard clear button  */
form.wcv-form.wcv-form-exclude #clear_button {
    background: red !important;
    color: white !important;
}
/* Save changes button */
form#wcv-store-settings #store_save_button {
    background: red !important;
    color: white !important;
}
Updated on April 20, 2020

Was this article helpful?