How To Change Catalog Button Colors
The Item Catalog default button colors are keyed off of the auction website current Theme Settings and the colors assigned to the "Primary" property. This property controls the color for ALL buttons used in the theme although you can change the Item Catalog button color alone through its own Add Style properties.
Select Button Color To Change
IMPORTANT
Changes to the Item Catalog button colors will not affect the button colors of the Item Details page used with the catalog. Changing the Item Details page button colors requires using its Advanced Styling property or the Theme Settings.
To change your button colors across the entire auction website, you would use the Theme Settings but to just change the Item Catalog button colors you would use its specific Add Style properties button and select the appropriate colors you want to use for the specific catalog you are modifying.
Button Background
The Button Background sits under the text used for the button and provides what visitors see when they first land on the Item Catalog page (or relevant Item Details page).
Button Background on Hover
The Button Background on Hover changes the color used for the Button Background when visitors move their mouse over the button (before clicking the button).
Button Color
The Button Color style is used for the color of the text "label" being used for the button itself.
Button Color on Hover
The Button Color on Hover style will change the color of the button text "label" when a visitor to the website hovers their mouse over the button.
Change The Button Colors
By default, when you initially add a Button Color style property it will appear without a defined color, in essence the property will not affect the existing buttons and their current colors.
An example with all four "Button Color" styles added to the "Item Catalog" properties.
Clicking on a color style property will open up a Color Picker for that specific property. This same process is used for each of the button colors to set their specific property. Each property will need to be set individually. As needed, you can copy and paste the color value from one style to another.
An example of the "Button Background" color with its "Color Picker" open, set to a default value.
An example of a new "Background Color" being applied to the button.
Please note, if you are using the Theme Settings to change the button color you will also change the user interface button colors while using the Item Catalog Add Style options will only change its specific buttons. See the Add Style button in these examples.
An example, after changing colors (see below), with the "hover" look on the left.
A "blue-grey" button using a hover color set to have 50% opacity of the "Background Color";and, changing the button label text to "black" (from the default "white") on hover.
Last reviewed: February 2023