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>