Versions Compared

Version Old Version 1 New Version 2
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

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

Table of Contents

A. Colors

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

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

. Simple Header and Footer

If the Resort is using the simple header and/or simple footer then it needs to be styled via nop HTML widget.

Code Block
<style>
  --header-background-color: #ffffff;
  --header-text-color: #1f2a44;
  --footer-background-color: #1f2a44;
  --footer-text-color: #ffffff;
</style>

  1. --header-background-color: #ffffff;

  2. --header-text-color: #1f2a44;