Versions Compared

Old Version 16

changes.mady.by.user Danny Gibas

Saved on

compared with

New Version Current

changes.mady.by.user Marty Niessen

Saved on

Key

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

...

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

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

...

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: 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: 10px;
  letter-spacing: 15px.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{
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width:100%;
  }
  .aw-simple-footer--column{
    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>

  1. Save the widget and Assign it to the body_start_html_tag_after widget zone.

  2. Save again and clear the site cache

  3. The Simple Footer should now be showing on the site

  4. Update the background color. The background color is controlled in Theme Designer under Plugins > Simple Footer > Background Color

  5. Update the text color if needed: The text color is controlled in Theme Designer under Plugins > Simple Footer > Text Color

  6. 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.

  7. The footer logo width will match whatever you set in Header > Logo > Width

  8. The fonts will inherit from the Brand Primary Font automatically.

...

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);
}