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

CSS Custom Prop

Default Value

Effects

Provided By

Primary Color

--ads-brand-primary-color

#122549

All primary color applications

NOP CSS

Primary Color : Hover

--ads-brand-primary-hover-color

#0d1d3b

All primary color : hover applications

NOP CSS

Secondary Color

--ads-brand-secondary-color

#16a2e4

All secondary color applications

NOP CSS

Secondary Color : Hover

--ads-brand-secondary-hover-color

#1094d1

All secondary color : hover applications

NOP CSS

Tertiary Color

--ads-brand-tertiary-color

#7ab202

All tertiary color applications

NOP CSS

Tertiary Color : Hover

--ads-brand-tertiary-hover-color

#649102

All tertiary color : hover applications

Theme Designer Base Theme

Text Color

--ads-brand-text-color

#231f20

All body copy and headers unless set in another scope

NOP CSS

Black

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

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

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

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

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

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

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

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

  • No labels