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 . 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 . 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 color that should be applied if . 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 color that should be applied if . 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 color that should be applied if . 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 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 a default logo image that should be applied (eg url('https://brandsite.com/assets/logo.png') ) if . 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. 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>
|