Versions Compared

Old Version 26

changes.mady.by.user Danny Gibas

Saved on

compared with

New Version 27

changes.mady.by.user Danny Gibas

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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-backgroundcolor

(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

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 (Auth 0Auth0)

Background Image

Page > Accounts > Hero > Background Image

--ads-page-accounts-hero-backgroundimage

url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')url('../images/half-hero-default-1920.jpg')

Sets the Half Hero on the Account Pages

Theme Designer Base Theme

Logo Image

Page > Accounts > Voucher > Logo Image

--ads-page-accounts-voucher-logo-image

Sets the Logo Image on the Vouchers in Accounts

Public UI

Background Image
Page > Accounts > Background Image

--ads-page-accounts-background-image

url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')

Sets the background image for Accounts Pages

Public UI

Logo Image
Page > Accounts > Logo Image

--ads-page-accounts-logo-image

url('https://awaccountsdatashared.blob.core.windows.net/shared/logo-sidenav.png')

Sets the Logo Image for Accounts Pages

Public UI

Width
Page > Accounts > Logo Image > Desktop > Width

--ads-page-accounts-logo-desktop-width

70%

Sets the logo width for accounts pages on desktop. Logo Height is automatically set proportionally to width.

Public UI

Width
Page > Accounts > Logo Image > Mobile > Width

--ads-page-accounts-logo-mobile-width

var(--ads-header-logo-width)

Sets the logo width for accounts pages on mobile. Logo Height is automatically set proportionally to width.

Public UI

Color
Page > Accounts > Mask > Color

--ads-page-accounts-mask-color

#000

Sets the mask overlay color for the accounts page image

Public UI

Opacity
Page > Accounts > Mask > Opacity

--ads-page-accounts-mask-opacity

.6

Sets the mask overlay opacity for the accounts page image

Public UI

Color
Page > Accounts > Button > Color

--ads-page-accounts-button-color

var(--ads-brand-primary-color)

Sets the primary button background color for the Accounts pages

Public UI

Color
Page > Accounts > Button > Text Color

--ads-page-accounts-button-text-color

var(--ads-brand-white, #fff)

Sets the primary button text color for the Accounts pages

Public UI

Checkout

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 > Title > Color

--ads-page-pdp-title-color

--ads-headings-color`

Sets the PDP page title color.

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

Text Transform

Page > PDP > Product > Title > Text Transform

--ads-page-pdp-product-title-texttransform

none

Sets the text transform variant for the PDP Product title in Public UI

Public UI

Text Transform

Page > PDP > Attribute > Title > Text Transform

--ads-page-pdp-attribute-title-texttransform

none

Sets the text transform variant for the PDP Attribute title in Public UI

Pubic UI

PLP

Background Color

Page > PLP > Container > Background Color

--ads-page-plp-container-backgroundcolor

(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

...

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 - NOP and Public UI

These properties apply to the site Favicons

...