Versions Compared

Version Old Version 15 New Version 16
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

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

...

Info

Be sure to include CSS Property fallback values. These values will get applied to your footer styles in the event that Aspenware has not yet configured your footer theme or if the page has a problem loading the Aspenware custom properties.

CSS Custom Property

Use Cases

How to Use

--ads-brandfooter-backgroundcolor

The main background color for the footer

Code Block
#YOUR-RESORT-brandfooter { background-color: var(--ads-brandfooter-backgroundcolor, FALLBACK COLOR);}

Replace FALLBACK COLOR with the color that should be applied (eg. #334455) if the page had a problem loading the --ads-brandfooter-backgroundcolor property (or it was not configured yet by AW).

--ads-brandfooter-header-font-color

The color for any headers in your brand footer

Code Block
#YOUR-RESORT-brandfooter h1, #YOUR-RESORT-brandfooter h2{
   var(--ads-brandfooter-header-font-color, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-backgroundcolor property (or it was not configured yet by AW).

--ads-brandfooter-body-textcolor

The color for the body copy in your brand footer

Code Block
#YOUR-RESORT-brandfooter p{
   color: var(--ads-brandfooter-body-textcolor, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-body-textcolor property (or it was not configured yet by AW).

--ads-brandfooter-link-textcolor

The color for the links in your brand footer

Code Block
#YOUR-RESORT-brandfooter a {
  color: var(--ads-brandfooter-link-textcolor, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-link-textcolor property (or it was not configured yet by AW).

--ads-brandfooter-link-hover-textcolor

The color for the link interactive states in your brand footer

Code Block
#YOUR-RESORT-brandfooter a:hover, #YOUR-RESORT-brandfooter a:active, #YOUR-RESORT-brandfooter a:visited {
  color: var(--ads-brandfooter-link-hover-textcolor, FALLBACK COLOR);
}

Replace FALLBACK COLOR with the color that should be applied if the page had a problem loading the --ads-brandfooter-link-hover-textcolor property (or it was not configured yet by AW).

--ads-brandfooter-logo-image

The path to the logo image. For this to work, you must set your logo as a background image on either a div or a span

Code Block
#YOUR-RESORT-brandfooter .logo-image {
  height:80px;
  width: 100px;
  background: var(--ads-brandfooter-logo-image, url('URL TO FALLBACK IMAGE'));
}

Replace URL TO FALLBACK IMAGE with the path to your logo image that should be applied (eg url('https://brandsite.com/assets/logo.png')) if the page had a problem loading the --ads-brandfooter-logo-image property (or it was not configured yet by AW).

For accessibility, place include this role and aria-label on the div or span.

<div id="#YOUR-RESORT-brandfooter-logo" role="img" aria-label="logo"></div>

5. More Information on These Topics

...