Versions Compared

Version Old Version 3 New Version 4
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

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

...

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

Property

CSS Custom Prop

Default Value

Effects

Provided By

Property

CSS Custom Prop

Default Value

Effects

Provided By

Font Family

--ads-header-fontfamily

--ads-brand-primary-fontfamily

All fonts in the Cloud Header and Simple Header

Theme Designer Base Theme

Background Color

--ads-header-backgroundcolor

--ads-color-white

Header background color

NOP CSS

Text Color

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

#231f20

Header text color

NOP CSS

Background Color

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

--ads-color-grey15

Link item background hover color

NOP CSS

Background Color

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

--ads-color-grey15

Link item background focus color

NOP CSS

Text Color

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

#231f20

Link item background active color

NOP CSS

Background Color

--ads-header-subcategory-drawer-backgroundcolor

--ads-color-white

Header drawer background color

NOP CSS

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

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

--ads-color-grey15

Header drawer background color item focus background color

NOP CSS

Text Color

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

#000

Header drawer background color item text color

NOP CSS

Box Shadow/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

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