...
| 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 HTML and CSS into the site using WYSIWYG tooling available in NOP Admin. To accomplish this, we require the following deliverables.
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.
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