Versions Compared

Version Old Version 4 New Version 5
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

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

...

Colors are global and can be applied to elements via the color swatch selector in Theme Designer. Brand colors should be the first thing you define when setting up a new theme so that they are available to apply to selected elements.

Property / Path in TD

CSS Custom Prop

Default Value

Effects

Provided By

Primary Color

Brand > Primary Color

--ads-brand-primary-color

#122549

All primary color applications

NOP CSS

Primary Color : Hover

Brand > Primary Color Hover

--ads-brand-primary-hover-color

#0d1d3b

All primary color : hover applications

NOP CSS

Secondary Color

Brand > Secondary Color

--ads-brand-secondary-color

#16a2e4

All secondary color applications

NOP CSS

Secondary Color : Hover

Brand > Secondary Color Hover

--ads-brand-secondary-hover-color

#1094d1

All secondary color : hover applications

NOP CSS

Tertiary Color

Brand > Tertiray Color

--ads-brand-tertiary-color

#7ab202

All tertiary color applications

NOP CSS

Tertiary Color : Hover

Brand > Tertiary Color Hover

--ads-brand-tertiary-hover-color

#649102

All tertiary color : hover applications

Theme Designer Base Theme

Text Color

Brand > Text Color

--ads-brand-text-color

#231f20

All body copy and headers unless set in another scope

NOP CSS

Black

(not user definable)

--ads-brand-black

#000 (not user definable)

Populates the color swatch selector in Theme Designer App with a black color option

Theme Designer App

White

(not user definable)

--ads-brand-white

#FFF (Not user definable)

Populates the color swatch selector in Theme Designer App with a white color option

Theme Designer App

Grey 10

(not user definable)

--ads-brand-grey10

#f3f3f3 (Not user definable)

Populates the color swatch selector in Theme Designer App with a light grey color option

Theme Designer App

Grey 20

(not user definable)

--ads-brand-grey20

#b4b4b4 (Not user definable)

Populates the color swatch selector in Theme Designer App with a medium grey color option

Theme Designer App

Grey 30

(not user definable)

--ads-brand-grey30

#707070 (Not user definable)

Populates the color swatch selector in Theme Designer App with a dark grey color option

Theme Designer App

Link Color

Brand > Link Color

--ads-brand-link-color

#1976d2

Populates the color swatch selector in Theme Designer App with a brand link color option

Theme Designer Base Theme

...

Header props set both the Cloud Header styles and the Simple Header styles (where applicable)

Property / Path in TD

CSS Custom Prop

Default Value

Effects

Provided By

Font Family

Header > Font Family

--ads-header-fontfamily

--ads-brand-primary-fontfamily

All fonts in the Cloud Header and Simple Header

Theme Designer Base Theme

Background Color

Header > Background Color

--ads-header-backgroundcolor

--ads-color-white

Header background color

NOP CSS

Text Color

Header > Nav > Item > Text > Color

--ads-header-nav-item-text-color

#231f20

Header text color

NOP CSS

Background Color

Header > Nav > Item > Hover > Backgroud Color

--ads-header-nav-item-hover-backgroundcolor

--ads-color-grey15

Link item background hover color

NOP CSS

Background Color

Header > Nav > Item > Focus > Background Color

--ads-header-nav-item-focus-backgroundcolor

--ads-color-grey15

Link item background focus color

NOP CSS

Text Color

Header > Nav > Item > Text > Active > Color

--ads-header-nav-item-text-active-color

#231f20

Link item background active text color

NOP CSS

Background Color

Header > Subcategory > Drawer > Background Color

--ads-header-subcategory-drawer-backgroundcolor

--ads-color-white

Header drawer background color

NOP CSS

Background Color

Header > Subcategory > Drawer > Nav > Item > Hover > Background Color

--ads-header-subcategory-drawer-nav-item-hover-backgroundcolor

--ads-color-grey15

Header drawer background color item hover background color

NOP CSS

Background Color

Header > Subcategory > Drawer > Nav > Item > Focus > Background Color

--ads-header-subcategory-drawer-nav-item-focus-backgroundcolor

--ads-color-grey15

Header drawer background color item focus background color

NOP CSS

Text Color

Header > Subcategory > Drawer > Nav > Item > Text > Color

--ads-header-subcategory-drawer-nav-item-text-color

#000

Header drawer background color item text color

NOP CSS

Box Shadow / Drop Shadow

Header > Subcategory > Drawer > Drop Shadow

--ads-header-subcategory-drawer-boxshadow

Code Block
0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12)

Header drawer drop shadow

NOP CSS

Text Transform

--ads-header-text-texttransform

none

The font casing for the header (upper, lower, capital, none/inherit)

NOP CSS

Color

--ads-header-menu-button-color

#231f20

Header menu button icon color

NOP CSS

Background Color

--ads-header-menu-button-hover-backgroundcolor

--ads-color-grey15

Header menu button background hover color

NOP CSS

Background Color

--ads-header-menu-button-focus-backgroundcolor

--ads-color-grey15

Header menu button background focus color

NOP CSS

Color

--ads-header-cart-icon-badge-color

hsl(216, 43%, 46%)

Header Cart icon badge color

NOP CSS

Color

--ads-header-cart-icon-color

--ads-header-menu-button-color/#231f20

Header Cart icon color

NOP CSS

Image

--ads-header-logo-image

url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png');

Header Logo image

NOP CSS

Width

--ads-header-logo-width

180px

Header Logo width

NOP CSS

...

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

--ads-sidebar-banner-backgroundcolor

--ads-color-white

Cloud sidebar background color

NOP CSS

Color

--ads-sidebar-banner-link-color

#231f20

Cloud sidebar banner link color

NOP CSS

Background Color

--ads-sidebar-banner-link-hover-backgroundcolor

--ads-color-grey15

Cloud sidebar banner link hover color

NOP CSS

Text Transform

--ads-sidebar-banner-text-texttransform

none

The font casing for the cloud sidebar banner text (upper, lower, capital, none/inherit)

NOP CSS

Text Color

--ads-sidebar-nav-item-text-color

#231f20

Cloud sidebar item text color

NOP CSS

Text Transform

--ads-sidebar-nav-item-text-texttransform

none

The font casing for the cloud sidebar items (upper, lower, capital, none/inherit)

NOP CSS

Background Color

--ads-sidebar-nav-item-hover-backgroundcolor

--ads-color-grey15

Cloud sidebar items hover color

NOP CSS

Background Color

--ads-sidebar-nav-item-focus-backgroundcolor

--ads-color-grey15

Cloud sidebar items focus color

NOP CSS

Image

--ads-sidebar-banner-logo-image

url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo-sidenav.png');

Cloud Sidebar header logo

NOP CSS

Width

--ads-sidebar-banner-logo-width

3rem

Cloud Sidebar header logo width

NOP CSS

D. Page Properties

Specific page level properties

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

--ads-page-backgroundcolorp

#f3f2f1

Sets the global page background color

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