Color Scheme

Use the following CSS selectors to edit your skin’s color schemes.

Selectors in the Style.css and Popup.css

Following is a list of the color schemes that you control via selectors located in the Style.css and Popup.css files.

Color Schemes

Selector

Sample Images

Theme buttons

.XmpieThemeColorButton

.XmpieThemeColorButton:hover

.XmpieThemeColorButton.Hover

.XmpieThemeColorButton:active

Background colors of the order approval buttons

.XmpieApproveButton:hover

.XmpieApproveButton:active

Colors of the options shown in the Gallery List View and Gallery Grid View controls

.FieldOptionItem.FOGrid.selected .optionTitle

.FieldOptionItem.selected.FOGrid .optionIcon

Color of current customization step

.btnSelected a:link

Color of the current wizard step

.WizStepTR[stepStatus='active']

.WizStepTRSel[stepStatus='active']

Color of the current wizard step when multiple shipping addresses are enabled

.WizardStepHeadingCurrent

Selectors in the FileSubmission.css

Following is a list of the color schemes that you control via selectors located in the FileSubmission.css file.

Color Schemes

Selector

Sample Images

Properties pop-up in the Document Builder step

.VerticalMenuDiv ul li:hover

.VerticalMenuDiv_ul_li_active

Preflight pop-up in the Document Builder step

infoToggleArea

To learn how to change the colors of the following elements, refer to the relevant sections:

·     Footer: See Product Details and Customization Pages

·     Menu Buttons: See Header

·     Store Title and Product Search box: See Content Area