First, head to your website's Custom CSS section (Article)
Below are the code snippets required to change various colors on your website. It's recommended to copy/paste the entire block of code into your CSS editor, and then change the colors as you see fit. It is not required to change all colors.
Note: If your website is using a specific color theme, you may need to add the following snippet to override your theme's color settings:
!important;
Change the Font and Background color of the Number of items added to Wishlist Cart:
/* wishlist 'cart' count badge*/
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}
Change the Icon and Background color of the "Wishlist Cart" Button:
/* wishlist heart icon color */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}
/* wishlist heart 'cart' background */
.gspro-c-wishlist__trigger {
background: darkred !important;
}
Change the Background color on the top of the Wishlist Cart:
gspro-wishlist[data-mode="expand"] {
background: hotpink;
}
Change the Background color as well as the Number color on the circle that has the number of items within an active Wishlist Cart:
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {
background: black;
color: white
}
Change the Color of the "Contact & Venue Info" button only when NOT hovering over it:
button.gspro-o-button--primary {
background: #1F1F1F;
}
Change the Color of the "Contact & Venue Info" button ONLY when hovering over it:
button.gspro-o-button--primary:hover {
background: #3F3F3F;
}button.gspro-o-button--warning {
background: darkorange;
color: white;
}
button.gspro-o-button--warning:hover {
background: darkred;
color: white;
}
Change the Color of the font on the "Save" button under "Select Dates":
button.gspro-o-button--reverse {
background: white;
color: hotpink;
}
Change the Color of the font on the "Save" button under "Select Dates" only when hovering over it:
button.gspro-o-button--reverse:hover {
background: rgba(255, 255, 255, 0.8);
color: hotpink;
}
Change the Color of the close button under "Select Dates":
button.gspro-o-button--icon {
background: inherit;
}
Change the Color of the close button under "Select Dates" only when hovering over it:
button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}