Versions Compared

Old Version 34

changes.mady.by.user Danny Gibas

Saved on

compared with

New Version Current

changes.mady.by.user Danny Gibas

Saved on

Key

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

This document provides resort guidance for developing brand footers for their Aspenware eCommerce web application. Documentation on implementing the Simple Footer option can be found here.

Table of Contents

1. Responsiveness and Breakpoints

...

If you are targeting future support as we update our platform, our breakpoints will be changing to better target modern devices. Aspenware will be updating our breakpoints to the following over the next 18 monthsas we evolve the platform. For this reason, we recommend you target the updated values. While there will be some inconsistency in your footer and the platform breakpoints while Aspenware makes this conversion, it will prevent you from having to update your CSS again down the road.

...

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-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 default 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 this default value will load in its place.

--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 default 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 this default value will load in its place.

--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 default brand color that should be applied (in hex format). If the page had a problem loading the --ads-plugins-brandfooter-body-textcolor property or it was not configured yet by AW this default value will load in its place.

--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 default brand color that should be applied (in hex format). If the page had a problem loading the --ads-plugins-brandfooter-link-textcolor property or it was not configured yet by AW this default value will load in its place.

--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 default brand color that should be applied (in hex format). If the page had a problem loading the --ads-plugins-brandfooter-link-hover-textcolor property or it was not configured yet by AW this default value will load in its place.

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

Code Block
#your-resort-brandfooter .logo-image {
  height:80px; //adjust as needed for your logo dimensions
  width: 100px; //adjust as needed for your logo dimensions
  background-position: center;
  background-size: contain; //logo image will auto scale to fit the size of the container
  background-repeat: no-repeat;
  background: var(--ads-plugins-brandfooter-logo-image, url('URL TO FALLBACK IMAGE'));
}

Replace URL TO FALLBACK IMAGE with the path to a default 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, this path will load instead.

You can also omit the fallback URL if you are not hosting a version on your brand site. Our Customer Service team will address this with our internal tools during setup.

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>

Info

If you use this prop as described, Aspenware will be able to host your logo for you on our file servers. Otherwise you will need to host the logo file for your footer and link to it in your footer markup, either inline or as a background image.

5. Deliverables

Aspenware is going to insert your custom brand footer HTML and CSS into the Commerce site using standard WYSIWYG tooling. To accomplish this, we require the following deliverables.

  1. A single HTML file that contains your Footer HTML. You can inline the CSS if you wish, but for maintainability reasons it is recommended to put all your CSS in a separate CSS file.

  2. If not inlining your CSS: A single CSS file with your footer CSS. If you are using SCSS or SASS, please export it to CSS. If you want your footer to be easily updated by our Customer Success team with our internal theming tools to account for future branding updates (avoids long deploy cycle turn around times), please use the CSS Custom properties defined in section 4 within your CSS when defining certain property values.

6. More Information on These Topics