Page Comparison

...

This document provides the instructions for adding Simple Footer to a resort that is using Theme Designer version 2. Simple Footer v2 uses the flexbox model for responsive layouts.

...

Instructions

Create a NOP Widget and add the following HTML and name it Simple Footer.

Code Block

<div class="aw-simple-footer aw-simple-footer--wrapper">
  <div class="aw-simple-footer--row">
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content">
         <h2>
          CONTACT US
        <<h2>CONTACT US</h2>
        <span class="label">Passes</span>
        <span class="contact"><a href="tel:123-456-7890">123-456-7890</a></span>
      </div>
    </div>
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content">
        <span class="label">Reservations</span>
        <span class="contact"><a href="tel:123-456-7890">123-456-7891</a></span>
      </div>
    </div>
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content">
        <span class="contact"><a href="mailto:info@peak-resort.com">info@peak-resort.com</a></span>
      </div>
    </div>
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content logo">
         <a href="#" target="_blank" class="aw-simple-footer--logo">Peak Resort</a>
      </div>
    </div>
  </div>
</div>

Update the HTML content as needed for the resort
1. You can add/remove remove columns and the column content if you want by removing a aw-simple-footer--column section and its children if you need less columns. See the Adding/Removing Columns Section of this document for more info.
2. Be sure to update the mailto: for the email and the href for the phone number when updating the page content
Add the updated HTML to the NOP Widget Markup Section
Save and Assign the widget to the Footer Widget Section and then Save the assignment.
Create another NOP Widget for the Simple Footer CSS and Name it Simple Footer CSS
Add the following CSS to the widgets markup section

Code Block

<style>
.aw-simple-footer{
   width: 100%;
   font-family: var(--ads-brand-primary-fontfamily, sans-serif);
   font-weight: normal;
}
.aw-simple-footer--wrapper{
  width: 100%;
  background-color: var(--ads-plugins-simplefooter-backgroundcolor, #222);
  padding: 30px 15px 50px 15px;
}
.aw-simple-footer--row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
  max-width: 1380px !important;
  margin: 0 auto;
}
.aw-simple-footer--column{
  flex: 1 1 auto;
  padding: 15px;
  align-self: stretch;
}
.aw-simple-footer--column-content{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height:100%;
}
.aw-simple-footer--column-content > .contact,
.aw-simple-footer--column-content > .label,
.aw-simple-footer p,
.aw-simple-footer a,
.aw-simple-footer h2 {
  font-size: var(--adx-font-size-16, 1rem);
  line-height: var(--adx-line-height-19, 1.1875rem);
  color: var(--ads-plugins-simplefooter-textcolor, #fff);
  display: block;
  padding-bottom:5px;
  text-decoration: none;
  font-family: var(--ads-brand-primary-fontfamily, sans-serif) !important;
}
.aw-simple-footer p > a {
   padding-bottom: 0;
   opacity: .7;
   display:  inline;
}
.aw-simple-footer h2{
  font-size: var(--adx-font-size-19, 1.2rem);
  line-height: var(--adx-line-height-24, 1.5rem);
  color: var(--ads-plugins-simplefooter-textcolor, #fff);
  margin-bottom: 15px10px;
  letter-spacing: .05rem;
}
.aw-simple-footer--column-content > .label{
  font-size: .9rem;
  opacity: .7;
}
.aw-simple-footer--column-content.logo{
  flex-direction: row;
  align-items: flex-end;
}
.aw-simple-footer--logo{
  background-image: var(--ads-plugins-simplefooter-logo-image, var(--ads-header-logo-image));
  background-size: contain;
  background-repeat: no-repeat;
  height: 60px;
  width: var(--ads-header-logo-width);
  font-size: 0 !important;
  display: block;
  position: relative;
  margin-right:30px;
}
@media screen and (max-width: 990px) {
  .aw-simple-footer--row{

   display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width:100%;
  }
  .aw-simple-footer--column{
    flex: 1 1 auto;
    padding: 15px 0 0 0;
    align-self: auto;
    width:100%;
  }
  .aw-simple-footer--column-content{
    align-items: center;
    justify-content: center;
  }
  .aw-simple-footer--logo{
    margin-right:0;
  }
}
</style>

Save the widget and Assign it to the body_start_html_tag_after widget zone.
Clear the Site Save again and clear the site cache
The Simple Footer should now be showing on the site
Update the background color. The background color is controlled in Theme Designer under Plugins > Simple Footer > Background Color
Update the text color if needed: The text color is controlled in Theme Designer under Plugins > Simple Footer > Text Color
The footer logo will use whatever logo you set for the header under Header > Logo > Logo Image by default. You can override this with a different logo under Plugins > Simple Footer > Logo if needed.
The footer logo width will match whatever you set in Header > Logo > Width
The fonts will inherit from the Brand Primary Font automatically.

Adding/Removing Columns

You can add or remove aw-simple-footer--column Columns columns as needed and the CSS will maintain the proper layout. The content of the column wrapper aw-simple-footer--column must be wrapped in the aw-simple-footer--column-content container to maintain the correct content layout as follows:

Code Block

<div class="aw-simple-footer--column">
  <div class="aw-simple-footer--column-content">
      <h2>
      CONTACT US
    <<h2>CONTACT US</h2>
    <span class="label">Passes</span>
    <span class="contact"><a href="tel:123-456-7890">123-456-7890</a></span>
  </div>
</div>

If the column contains a logo, you must add the logo class to the aw-simple-footer--column-content wrapper, ie <div class="aw-simple-footer--column-content logo">. This ensures the Logo remains properly positioned in the column.

Jacob Note for Boyne requirements

you can add a new div below

Code Block
<div class="aw-simple-footer aw-simple-footer--wrapper">

so something like

Code Block
<div class="aw-simple-footer aw-simple-footer--wrapper"> <!-- main footer content --> </div> <div id="boyne-amex-footer"> <img src="path/to/logo" /> </div>

then in widget for the footer styles add

Code Block
#boyne-amex-footer { display: flex; justify-content: center; align-items: center; width: 100%; height: (whatever height you need the footer to be); }

Versions Compared

Old Version 6

New Version Current

Key

Instructions

Adding/Removing Columns