Versions Compared

Version Old Version 24 New Version 25
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

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

...

CSS Custom Property

Use Cases

How to Use

--ads-plugins-brandfooter-backgroundcolor

The main background color for the footer

Code Block
#your-resort-brandfooter { background-color: var(--ads-plugins-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-plugins-brandfooter-backgroundcolor property (or it was not configured yet by AW).

--ads-plugins-brandfooter-header-textcolor

The color for any headers in your brand footer

Code Block
#your-resort-brandfooter h1, #your-resort-brandfooter h2{
   var(--ads-plugins-brandfooter-header-textcolor, FALLBACK COLOR);
}

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

--ads-plugins-brandfooter-body-textcolor

The color for the body copy in your brand footer

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

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

--ads-plugins-brandfooter-link-textcolor

The color for the links in your brand footer

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

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

--ads-plugins-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-plugins-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-plugins-brandfooter-link-hover-textcolor property (or it was not configured yet by AW).

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

...