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.

img

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.

img

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.

img

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.

img

An example of the "Button Background" color with its "Color Picker" open, set to a default value.

img

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.

img

An example, after changing colors (see below), with the "hover" look on the left.

img

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
CatalogButtonColors
/dashboard/website/website_content/row_content/item_catalog/catalog_button_colors/
dashboard
website
website_content
row_content
item_catalog
catalog_button_colors
How To Change Catalog Button Colors