Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

A. Colors

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

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

B. Header

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 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 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 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 color item text color

NOP CSS

Box Shadow / Drop Shadow

Header > Subcategory > Drawer > Drop Shadow

--ads-header-subcategory-drawer-boxshadow

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

C. Sidebar

Side props set the Cloud Header styles

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

  • No labels