Skip to main content

Custom footer - Amplify

You will have to do a bit of updating but the footer menu and social icons pull in on their own.

Place in Sitewide

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
  const footer = document.querySelector("footer");
  if (!footer) return;

  const container = footer.querySelector(".container.pure-g");
  if (!container) return;

  const columns = container.children;
  if (columns.length < 2) return;

  Array.from(columns).forEach(col => {
    col.classList.remove("pure-u-md-1-2");
    col.classList.add("pure-u-md-1-3");
  });

  let thirdColumn = container.querySelector(".third-column");
  if (!thirdColumn) {
    thirdColumn = document.createElement("div");
    thirdColumn.className = "pure-u-1 pure-u-md-1-3 third-column";
    container.appendChild(thirdColumn);
  }

  const leftColumn = columns[0];
  if (leftColumn && !leftColumn.querySelector(".footer-logo")) {
    const logoDiv = document.createElement("div");
    logoDiv.className = "footer-logo";
    logoDiv.style.textAlign = "left";
    logoDiv.style.marginBottom = "1rem";

    const logoImg = document.createElement("img");
    logoImg.src = "https://streamline.imgix.net/8a23faaf-6dde-48ad-ab9c-055b5eaf58ac/f5ad8994-de6a-4634-a1f8-fe2ee4b05d6b/Pendleton.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=4bc77e1ff10bd1c678bcec685157abd7";
    logoImg.width = 235;
    logoImg.alt = "Pendlepup";
    logoDiv.appendChild(logoImg);
    leftColumn.insertBefore(logoDiv, leftColumn.firstChild);
  }

  const addressLine = Array.from(leftColumn.querySelectorAll("div")).find(div =>
    div.textContent.includes("3301 C")
  );
  if (addressLine) {
    addressLine.style.fontWeight = "bold";
    addressLine.style.marginBottom = "1rem";

    const hoursLine = document.createElement("div");
    hoursLine.textContent = "Monday – Friday 9:00 AM – 5:00 PM";
    hoursLine.style.marginBottom = "1rem";
    leftColumn.insertBefore(hoursLine, addressLine.nextSibling);
  }

  const phoneLine = Array.from(leftColumn.querySelectorAll("div")).find(div =>
    div.textContent.trim().includes("(916) 123-4567")
  );
  if (phoneLine) {
    phoneLine.textContent = "Phone: (916) 123-4567";
    phoneLine.style.fontWeight = "bold";
    phoneLine.style.marginBottom = "1rem";

    const faxLine = document.createElement("div");
    faxLine.textContent = "Fax: (916) 765-4321";
    faxLine.style.fontWeight = "bold";
    faxLine.style.marginBottom = "1rem";
    phoneLine.insertAdjacentElement("afterend", faxLine);
  }

  const footerNav = footer.querySelector('nav[aria-label="Footer"]');
  if (footerNav) {
    const listItems = footerNav.querySelectorAll("ul > li");
    const poweredByItem = Array.from(listItems).find(li =>
      li.textContent.includes("Powered by")
    );
    const signInItem = Array.from(listItems).find(li =>
      li.textContent.includes("Sign In")
    );

    if (poweredByItem && signInItem) {
      const infoLine = document.createElement("div");
      infoLine.className = "footer-meta-line";

      const poweredLink = poweredByItem.querySelector("a");
      const signInLink = signInItem.querySelector("a");

      if (poweredLink && signInLink) {
        const separator = document.createElement("span");
        separator.textContent = " | ";
        separator.style.margin = "0 8px";
        separator.style.color = "#ffffff";
        separator.style.whiteSpace = "nowrap";

        infoLine.appendChild(poweredLink);
        infoLine.appendChild(separator);
        infoLine.appendChild(signInLink);
      }
      leftColumn.appendChild(infoLine);
    }

    const navList = footerNav.querySelector("ul");
    if (navList) {
      navList.querySelectorAll("li").forEach(li => {
        if (!li.textContent.trim()) li.remove();
      });

      const transparencyItem = Array.from(navList.querySelectorAll("li")).find(li =>
        li.textContent.includes("Transparency")
      );

      const accessibilityItem = document.createElement("li");
      accessibilityItem.style.marginBottom = "6px";

      const accessibilityLink = document.createElement("a");
      accessibilityLink.href = "/#/website-accessibility-policy-modal";
      accessibilityLink.textContent = "Website Accessibility";
      accessibilityLink.target = "_blank";
      accessibilityLink.style.color = "white";
      accessibilityLink.style.textDecoration = "none";
      accessibilityLink.className = "external";

      accessibilityItem.appendChild(accessibilityLink);

      if (transparencyItem) {
        navList.insertBefore(accessibilityItem, transparencyItem);
      } else {
        navList.appendChild(accessibilityItem);
      }

      footerNav.style.textAlign = "left";
      navList.style.paddingLeft = "5rem";
      navList.style.listStyle = "none";
      navList.style.display = "flex";
      navList.style.flexDirection = "column";
      navList.style.gap = "12px";

      footerNav.querySelectorAll("a").forEach(link => {
        link.style.color = "#ffffff";
        link.style.textDecoration = "none";
      });
    }
  }

  const socialMediaDiv = footer.querySelector(".social-media");
  if (socialMediaDiv && !thirdColumn.contains(socialMediaDiv)) {
    thirdColumn.appendChild(socialMediaDiv);
    socialMediaDiv.style.display = "flex";
    socialMediaDiv.style.justifyContent = "flex-end";
    socialMediaDiv.style.gap = "12px";
    socialMediaDiv.style.marginTop = "1rem";
    socialMediaDiv.style.color = "#ffffff";
  }

  const copyrightLine = Array.from(leftColumn.querySelectorAll("div")).find(div =>
    div.textContent.includes("Copyright")
  );
  if (copyrightLine) {
    copyrightLine.style.marginTop = "1rem";
    copyrightLine.style.fontSize = "14px";
    copyrightLine.style.color = "#ffffff";
    leftColumn.appendChild(copyrightLine);
  }

  const style = document.createElement("style");
  style.textContent = `
    footer .container.pure-g {
      font-size: 16px;
      line-height: 1.5;
    }

    nav[aria-label="Footer"] a {
      font-weight: bold;
    }

    .footer-meta-line {
      margin-top: 1rem;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .footer-meta-line a {
      color: #ffffff !important;
      font-size: 14px !important;
      text-decoration: none;
      font-weight: normal;
    }

    .footer-meta-line a:hover {
      text-decoration: underline;
    }

    .third-column .social-media a svg {
      width: 45px;
      height: 45px;
      transition: transform 0.2s ease-in-out;
    }

    .third-column .social-media a:hover svg {
      transform: scale(1.1);
    }

    .third-column .social-media a svg path {
      fill: white !important;
    }

    .footer-logo + div {
      margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
      .container.pure-g {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-right: 0 !important;
        align-items: flex-start !important;
      }

      .container.pure-g > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-right: 0 !important;
      }

      .footer-logo {
        text-align: left !important;
      }

      .footer-meta-line {
        flex-direction: row !important;
        flex-wrap: wrap;
        text-align: left !important;
        justify-content: flex-start !important;
        gap: 8px;
      }

      .footer-meta-line a {
        display: inline !important;
      }

      nav[aria-label="Footer"] {
        text-align: left !important;
      }

      nav[aria-label="Footer"] ul {
        padding-left: 0 !important;
      }

      .third-column .social-media {
        justify-content: flex-start !important;
      }

      .third-column .social-media a {
        padding: 8px;
      }
    }
  `;
  document.head.appendChild(style);
});
</script>