Versions Compared

Version Old Version 20 New Version 21
Changes made by

Danny Gibas

Danny Gibas

Saved on

Key

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

...

To prevent this, we strongly recommend scoping all footer CSS by encapsulating it in a unique ID.

Info

Replace YOURyour-RESORTresort with your resorts name, lowercase, dash separated.


For example…
In your CSS:

Code Block
#YOUR#your-RESORTresort-brandfooter p { font-size: 1rem };
#YOUR#your-RESORTresort-brandfooter h1 { color: #000 };

And in your HTML:

Code Block
<div id="YOURyour-RESORTresort-brandfooter">
   <h1>YOUR RESORT NAME</h1> 
   <p>Welcome to MY RESORT<p>
   <ul>
      <li><a href="home">Home</li>
      ...
   </ul>
   ...
</div>

If you are using SASS to write the CSS and precompiling, you can simply wrap all your CSS in the unique ID:

Code Block
#YOUR#your-RESORTresort-brandfooter {
   p { font-size: 1rem };
   h1 { color: #000 };
}

...

Aspenware does its best to scope CSS but some CSS libraries we use may leak into your footer styles. If this happens, feel free to use !important on your scoped rules to ensure your styles are applied to your footer.

For example:

#YOUR#your-RESORTresort-brandfooter p { color: red !important }

...

We utilize Vue.js on our front end and resorts have had difficulty inserting a second Vue instance into their headers and footers as the two Vue instances tend to conflict with each other. If you are going to attempt to use Vue for your footer, make sure that the instance is attaching to the ID of your footer container eg. #YOUR#your-RESORTresort-brandfooter (vs. using the default #app) and does not insert any components into the global page scope (window). It is also advised to enable scoped CSS in any Vue component files.

...

CSS Custom Property

Use Cases

How to Use

--ads-brandfooter-backgroundcolor

The main background color for the footer

Code Block
#YOUR#your-RESORTresort-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#your-RESORTresort-brandfooter h1, #YOUR#your-RESORTresort-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#your-RESORTresort-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#your-RESORTresort-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#your-RESORTresort-brandfooter a:hover, #YOUR#your-RESORTresort-brandfooter a:active, #YOUR#your-RESORTresort-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#your-RESORTresort-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#your-RESORTresort-brandfooter-logo" role="img" aria-label="logo"></div>

...