Custom Footer Classic - To pair with Amplify one
You will need to update the address, phone number ETC
Put this in Styles
//classic footer
.footer-clean {
background: url("https://streamline.imgix.net/8a23faaf-6dde-48ad-ab9c-055b5eaf58ac/e30d3666-3e9a-4f1e-a6fb-ce94a708e020/engin-akyurt-Ko2EwqqISZw-unsplash.jpg?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=5fb2d53e56b4e8fc7e16c51f10121da4");
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
color: #fff !important;
}
Put this in in sitewide
<script>
document.addEventListener("DOMContentLoaded", function () {
const oldFooter = document.getElementById("page-footer");
const footerNav = oldFooter.querySelector('.footer-links');
const addressInfo = oldFooter.querySelector('.col-md-6:first-child .footer-address');
const telephoneNumber = oldFooter.querySelector('.col-md-6:first-child .footer-phone');
const copyrightSection = oldFooter.querySelector('.col-md-6:first-child .footer-copyright');
const transparencySection = oldFooter.querySelector('.col-md-6:last-child .footer-static-transparency');
const streamlineSignInSection = oldFooter.querySelector('.col-md-6:last-child .footer-streamline:not(.footer-static-transparency)');
const socialLinks = oldFooter.querySelector('.social-footer-streamline');
// Inject CSS
const style = document.createElement('style');
style.textContent = `
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
.footer-clean {
padding: 40px 0;
font-family: 'Lato', sans-serif !important;
}
.footer-clean .footer-col {
padding: 20px;
}
.footer-col-1 {
flex: 0 0 50%;
max-width: 50%;
}
.footer-col-1 > * {
margin-bottom: 14px;
}
.footer-col-2 {
flex: 0 0 30%;
max-width: 30%;
}
.footer-col-3 {
flex: 0 0 20%;
max-width: 20%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.footer-clean a {
color: #fff !important;
text-decoration: none;
}
.footer-clean a:hover {
text-decoration: underline;
}
.footer-links,
.footer-links ul,
.footer-links li {
list-style: none !important;
margin: 0;
padding: 0;
background: none !important;
}
.footer-col-2 ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.footer-logo-container {
margin-bottom: 20px;
}
.footer-col-3-social {
display: flex;
gap: 16px;
margin-top: 0;
}
.footer-col-3-social a svg {
width: 45px;
height: 45px;
transition: transform 0.3s ease;
}
.footer-col-3-social a:hover svg {
transform: scale(1.2);
}
.footer-powered {
font-size: 14px;
margin-top: 10px;
}
.footer-copyright {
font-size: 14px;
margin-top: 5px;
}
.footer-col-1-address,
.footer-phone,
.footer-fax {
font-weight: 700;
}
.footer-col-2 .footer-link-item {
font-weight: 700;
margin-bottom: 12px;
}
.footer-col-2 .footer-link-item a {
color: #fff !important;
text-decoration: none;
}
.footer-col-2 .footer-link-item a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.footer-col {
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.footer-col-3 {
justify-content: center;
margin-top: 20px;
}
}
`;
document.head.appendChild(style);
const newFooter = document.createElement('footer');
newFooter.className = 'footer-clean clearfix';
newFooter.innerHTML = `
<div class="container">
<div class="row d-flex" style="display: flex; flex-wrap: wrap;">
<!-- Footer Column 1 -->
<div class="footer-col footer-col-1 col-sm-4">
<div class="footer-logo-container">
<img 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" width="235" alt="Pendleton Logo">
</div>
<div class="footer-col-1-address">Add New Address</div>
<p class="footer-business-hours">Monday – Friday 8:00 AM – 5:00 PM</p>
<p class="footer-phone">Phone: (916) 123-4567</p>
<p class="footer-fax">Fax: (916) 765-4321</p>
<div class="footer-col-1-login"></div>
<div class="footer-col-1-content">
<div class="footer-powered">Powered by Streamline | <a href="#">Sign In</a></div>
<div class="footer-copyright">Copyright © 2025 Light the Stream</div>
</div>
</div>
<!-- Footer Column 2 -->
<div class="footer-col footer-col-2 col-sm-4">
<ul class="footer-col-2-resources"></ul>
<ul class="footer-accessibility-link"></ul>
<ul class="footer-col-1-transparency"></ul>
</div>
<!-- Footer Column 3 -->
<div class="footer-col footer-col-3 col-sm-4">
<div class="footer-col-3-social"></div>
</div>
</div>
</div>
`;
oldFooter.parentNode.insertBefore(newFooter, oldFooter.nextSibling);
const column2Resources = newFooter.querySelector('.footer-col-2-resources');
const column1Transparency = newFooter.querySelector('.footer-col-1-transparency');
const accessibilityLinkContainer = newFooter.querySelector('.footer-accessibility-link');
const column3Social = newFooter.querySelector('.footer-col-3-social');
// Move entire <li> links into column 2
if (footerNav) {
const listItems = footerNav.querySelectorAll('li');
listItems.forEach(item => {
item.classList.add('footer-link-item');
column2Resources.appendChild(item);
});
}
// Add Website Accessibility Statement as an <li>
const accessibilityLinkLi = document.createElement('li');
accessibilityLinkLi.className = 'footer-link-item';
const accessibilityLink = document.createElement('a');
accessibilityLink.href = "/website-accessibility-statement.html#";
accessibilityLink.setAttribute('data-toggle', 'modal');
accessibilityLink.setAttribute('data-target', '#website-accessibility-policy-modal');
accessibilityLink.textContent = "Website Accessibility Statement";
accessibilityLinkLi.appendChild(accessibilityLink);
accessibilityLinkContainer.appendChild(accessibilityLinkLi);
// Move transparency section into its own <li> and rename
if (transparencySection) {
const link = transparencySection.querySelector('a');
if (link) {
link.textContent = "Transparency";
const li = document.createElement('li');
li.className = 'footer-link-item';
li.appendChild(link);
column1Transparency.appendChild(li);
}
}
// Social icons to Column 3
if (socialLinks) {
column3Social.appendChild(socialLinks);
}
// Fix Sign In link
if (streamlineSignInSection) {
const signInLink = streamlineSignInSection.querySelector('a');
const signInTarget = newFooter.querySelector('.footer-powered a');
if (signInLink && signInTarget) {
signInTarget.href = signInLink.href;
}
}
// Remove old footer
oldFooter.parentNode.removeChild(oldFooter);
});
</script>