...

Specific page level properties

Property

CSS Custom Prop

Default Value

Effects

Provided By

Font Family

--ads-headings-fontfamily

--ads-brand-primary-fontfamily

Sets the global font family to apply to the site headings

Theme Designer Base Theme

Font Color

--ads-headings-color

--ads-brand-text-color

Sets the global color to apply to the site headings

Property / Path

CSS Custom Prop

Default Value

Effects

Provided By

Global

Box Shadow / Drop Shadow

Page > Dropshadow

--ads-page-boxshadow

0 0 7px rgba(42, 29, 19, 0.33)

Sets the drop-shadow on the page container. Can set to none to remove it for a “flat” page look

Theme Designer Base Theme

Background Color

Page > Background Color

--ads-page-backgroundcolorp

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

#f3f2f1

Sets the global page background color

Theme Designer Base Theme

E. Headings

These properties apply to the H1 - H5 headings globally

Login Page
Background Image `Page > Login> Background Image`	`--ads-page-login-backgroundimage`	`--ads-page-checkout-backgroundimage`	Sets the Login Page Background Image (non-Identity)	Theme Designer Base Theme
Account Page
Background Image `Page > Account > Hero > Background Image`	`--ads-page-account-hero-backgroundimage`	`url('../images/half-hero-default-1920.jpg')`	Sets the Half Hero on the Account Pages	Theme Designer Base Theme
Checkout Page
Background Color `Page > Checkout > Header > Background Color`	`--ads-page-checkout-header-backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page header background color	Theme Designer Base Theme
Text Color `Page > Checkout > Header > Text Color`	`--ads-page-checkout-header-text-color`	`#fff`	Sets the checkout page header default text color	Theme Designer Base Theme
Color `Page > Checkout > Header > Text > Active > Color`	`--ads-page-checkout-header-text-active-color`	`--ads-brand-secondary-color`	Sets the checkout page header active text color	Theme Designer Base Theme
Background Color `Page > Checkout > Footer > Background Color`	`--ads-page-checkout-footer-backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page footer background color	Theme Designer Base Theme
Background Color `Page > Checkout > Footer > Button > Background Color`	`--ads-page-checkout-footer-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the checkout page footer button background color	Theme Designer Base Theme
Text Color `Page > Checkout > Footer > Button > Text Color`	`--ads-page-checkout-footer-button-textcolor`	`--ads-brand-white`	Sets the checkout page footer button textcolor	Theme Designer Base Theme
Logo Image `Page > Checkout > Header > Logo Image`	`--ads-page-checkout-header-logo-image`	`url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png')`	Sets the checkout page header logo image	Theme Designer Base Theme
Logo Height `Page > Checkout > Header > Logo height`	`--ads-page-checkout-header-logo-height`	`100px`	Sets the checkout page header logo height	Theme Designer Base Theme
Background Image `Page > Checkout > Background > Background Image`	`--ads-page-checkout-background-backgroundimage`	`url('../images/checkout-background.jpg')`	Sets the checkout page background image	Theme Designer Base Theme
PDP
Background Color `Page > PDP > Buttons > Radio > Background Color`	`--ads-page-pdp-buttons-radio-backgroundcolor`	`--ads-buttons-primary-backgroundcolor`	Sets the radio button active background color	Theme Designer Base Theme
Font Family `Page > PDP > Card > Title > Font Family`	`--ads-page-pdp-card-title-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PDP page checkout card header font family	Theme Designer Base Theme
Color `Page > PDP > Card > Title > Color`	`--ads-page-pdp-options-title-color`	`--ads-brand-primary-color`	Sets the PDP page options title color	Theme Designer Base Theme
Background Color `Page > PDP > Buttons > Checkout > Background Color`	`--ads-page-pdp-buttons-checkout-backgroundcolor`	`--ads-buttons-primary-backgroundcolor`	Sets the PDP page checkout button background color	Theme Designer Base Theme
Display (Hero) `Page > PDP > Hero > Dynamic > Display`	`--ads-page-pdp-hero-dynamic-herodisplay`	`none`	Sets the CSS display type `[none, block]` for the dynamic here on the PDP pages. Setting to `block` will display the dynamic hero and hide the static one.	Theme Designer Base Theme
PLP
Background Color `Page > PLP > Container > Background Color`	`--ads-page-plp-container-backgroundcolorp` (the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)	`--ads-brand-white`	Sets the PLP Page container background color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Button > Text Color`	`--ads-page-plp-cards-button-textcolor`	`--ads-brand-white`	Sets the PLP Page card button text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Price > Text Color`	`--ads-page-plp-cards-price-textcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card price text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Button > Hover > Text Color`	`--ads-page-plp-cards-button-hover-textcolor`	`--ads-brand-white`	Sets the PLP Page card button hover text color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > Background Color`	`--ads-page-plp-cards-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card button default background color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > Hover > Background Color`	`--ads-page-plp-cards-button-hover-backgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP Page cards button hover background color	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Header > Font Family`	`--ads-page-plp-cards-header-fontfamily`	`--ads-headings-fontfamily`	Sets the PLP Page cards header font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Button > Font Family`	`--ads-page-plp-cards-button-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards button font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Price > Font Family`	`--ads-page-plp-cards-price-fontfamily`	`--ads-brand-secondary-fontfamily`	Sets the PLP Page cards price font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Body > Font Family`	`--ads-page-plp-cards-body-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards body copy font family	Theme Designer Base Theme
Color `Page > PLP > Cards > Header > Color`	`--ads-page-plp-cards-header-color`	`--ads-headings-color`	Sets the PLP Page cards header color	Theme Designer Base Theme
Color `Page > PLP > Cards > Button > Text`	`--ads-page-plp-cards-button-text`	`'Shop Now'`	Sets the PLP Page cards action button copy	Theme Designer Base Theme
Display (Hero) `Page > PLP > Hero > Dynamic > Display`	`--ads-page-plp-hero-dynamic-herodisplay`	`none`	Sets the CSS display type `[none, block]` for the dynamic here on the PLP pages. Setting to `block` will display the dynamic hero and hide the static one.	Theme Designer Base Theme
Background Image `Page > PLP > Hero > Static > Background Image`	`--ads-page-plp-hero-static-backgroundimage`	`url('../images/default-category-hero.jpg')`	Sets the PLP and PDP Page static hero background image	Theme Designer Base Theme
Height `Page > PLP > Hero > Hero Height`	`--ads-page-plp-hero-heroheight`	`285px`	Sets the PLP page hero height with the following options: `['285px', '400px', '550px']` `'285px' = Short Hero` `'400px' = Medium Hero` `'550px' = Tall Hero`	Theme Designer Base Theme

E. Headings

These properties apply to the H1 - H5 headings globally

Property	CSS Custom Prop	Default Value	Effects	Provided By
Font Family	`--ads-headings-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the global font family to apply to the site headings	Theme Designer Base Theme
Font Color	`--ads-headings-color`	`--ads-brand-text-color`	Sets the global color to apply to the site headings	Theme Designer Base Theme

F. Buttons

These properties apply to the default global button styles

Property	CSS Custom Prop	Default Value	Effects	Provided By
Text Color `Buttons > Primary > Text Color`	`--ads-buttons-primary-textcolor`	`#fff`	Sets the global primary button text color	Theme Designer Base Theme
Background Color `Buttons > Primary > Background Color`	`--ads-buttons-primary-backgroundcolor`	`--ads-brand-primary-color`	Sets the global primary button background color	Theme Designer Base Theme
Border Color `Buttons > Primary > Border Color`	`--ads-buttons-primary-bordercolor`	`--ads-brand-primary-color`	Sets the global primary button border color	Theme Designer Base Theme
Text Color `Buttons > Secondary > Text Color`	`--ads-buttons-secondary-textcolor`	`--ads-brand-secondary-color`	These preset as ghost buttons. The text color property sets both the text color and the border.	Theme Designer Base Theme

G. Loader Spinner

These properties apply to the global page loader

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Loader > Background Color

--ads-loader-backgroundcolorp

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

#fff

Sets the global loader background color

Only shows the color if the loader image has a transparent background – otherwise the image background is shown

Theme Designer Base Theme

Image

Loader > Image

--ads-loader-image

url('../images/logo-mark-spinner.png')

Sets the global loader image

Theme Designer Base Theme

H. Plugins

These properties apply to the various NOP Plugins

Property	CSS Custom Prop	Default Value	Effects	Provided By
Voucher (Toolbar)
Background Color `Plugins > Voucher > Toolbar > Background Color`	`--ads-plugins-voucher-toolbar-backgroundcolor`	`--ads-brand-grey10`	Sets the background color for the Voucher toolbar [plugin]	Theme Designer Base Theme
Background Color `Plugins > Voucher > Toolbar > Button > Background Color`	`--ads-plugins-voucher-toolbar-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the button background color for the Voucher toolbar [plugin]	Theme Designer Base Theme
Text Color `Plugins > Voucher > Toolbar > Label > Text Color`	`--ads-plugins-voucher-toolbar-label-textcolor`	`--ads-brand-text-color`	Sets the label color for the Voucher toolbar [plugin]	Theme Designer Base Theme
Font Family `Plugins > Voucher > Toolbar > Font Family`	`--ads-plugins-voucher-toolbar-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the font family for the Voucher toolbar [plugin]	Theme Designer Base Theme
Loyalty (FAB)
Background Color `Plugins > Loyalty > FAB > Toggle > Background Color`	`--ads-plugins-loyalty-fab-toggle-backgroundcolor`	`--ads-brand-secondary-color`	Sets the toggle background color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Background Color `Plugins > Loyalty > FAB > Footer > Background Color`	`--ads-plugins-loyalty-fab-footer-backgroundcolor`	`--ads-brand-grey10`	Sets the footer background color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text Color `Plugins > Loyalty > FAB > Footer > Link > Text Color`	`--ads-plugins-loyalty-fab-footer-link-textcolor`	`--ads-brand-link-color`	Sets the footer link/text color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text Color `Plugins > Loyalty > FAB > Body > Text Color`	`--ads-plugins-loyalty-fab-body-textcolor`	`--ads-brand-primary-color`	Sets the body text color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Top (Position) `Plugins > Loyalty > FAB > Position > Top`	`--ads-plugins-loyalty-fab-position-top`	`20px`	Sets the desktop “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Right (Position) `Plugins > Loyalty > FAB > Position > Right`	`--ads-plugins-loyalty-fab-position-right`	`10px`	Sets the desktop “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Top (Position) `Plugins > Loyalty > FAB > Position > Mobile > Top`	`--ads-plugins-loyalty-fab-position-mobile-top`	`20px`	Sets the mobile “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Right (Position) `Plugins > Loyalty > FAB > Position > Mobile > Right`	`--ads-plugins-loyalty-fab-position-mobile-right`	`10px`	Sets the mobile “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Image `Plugins > Loyalty > FAB > Logo > Image`	`--ads-plugins-loyalty-fab-logo-image`	`url('../images/rewards.svg')`	Sets the logo image for the Loyalty FAB [plugin]	Theme Designer Base Theme
Simple Footer
Background Color `Plugins > Simple Footer > Background Color`	`--ads-plugins-simplefooter-backgroundcolor`	`--ads-brand-primary-color`	Sets the background color for the simple footer [NOP Widget]	Theme Designer Base Theme
Text Color `Plugins > Simple Footer > Text Color`	`--ads-plugins-simplefooter-textcolor`	`--ads-brand-white`	Sets the text color for the simple footer [NOP Widget]	Theme Designer Base Theme
Image (Logo) `Plugins > Simple Footer > Logo Image`	`--ads-plugins-simplefooter-logo-image`	`--ads-header-logo-image`	Sets the logo for the simple footer [NOP Widget]	Theme Designer Base Theme
Brand Footer
Background Color `Plugins > Brand Footer > Background Color`	`--ads-plugins-brandfooter-backgroundcolor`	`unset`	Sets the background color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Color `Plugins > Brand Footer > Header > Text Color`	`--ads-plugins-brandfooter-header-textcolor`	`unset`	Sets the header text color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Color `Plugins > Brand Footer > Body > Text Color`	`--ads-plugins-brandfooter-body-textcolor`	`unset`	Sets the body text color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Color `Plugins > Brand Footer > Link > Text Color`	`--ads-plugins-brandfooter-link-textcolor`	`unset`	Sets the link text color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Color `Plugins > Brand Footer > Link > Hover > Text Color`	`--ads-plugins-brandfooter-link-hover-textcolor`	`unset`	Sets the link hover color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
image (Logo) `Plugins > Brand Footer > Logo > Image`	`--ads-plugins-brandfooter-logo-image`	`--ads-header-logo-image`	Sets the logo image for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme

I. Favicons

These properties apply to the site Favicons

Property	CSS Custom Prop	Default Value	Effects	Provided By
Background Color `Brand > Favicons > Ico Favicon`	`--ads-brand-favicons-ico-favicon`	`unset`	Sets the default .ico low resolution favicon path	Theme Designer Base Theme
`Brand > Favicons > 16x16 Favicon`	`--ads-brand-favicons-16x16-favicon`	`unset`	Sets the 16 x 16 resolution favicon path	Theme Designer Base Theme
`Brand > Favicons > 32x32 Favicon`	`--ads-brand-favicons-32x32-favicon`	`unset`	Sets the 32 x 32 resolution favicon path	Theme Designer Base Theme
`Brand > Favicons > 48x48 Favicon`	`--ads-brand-favicons-48x48-favicon`	`unset`	Sets the 48 x 48 resolution favicon path	Theme Designer Base Theme

Version	Old Version 7	New Version 8
Changes made by	Danny Gibas	Danny Gibas
Saved on	Aug 22, 2023	Aug 22, 2023

Versions Compared

Key

Global

E. Headings

Login Page

Account Page

Checkout Page

PDP

PLP

E. Headings

F. Buttons

G. Loader Spinner

H. Plugins

Loyalty (FAB)

Simple Footer

Brand Footer

I. Favicons

Page Comparison

Versions Compared

Key

Global

E. Headings

Login Page

Account Page

Checkout Page

PDP

PLP

E. Headings

F. Buttons

G. Loader Spinner

H. Plugins

Voucher (Toolbar)

Loyalty (FAB)

Simple Footer

Brand Footer

I. Favicons