Change the Footer Background on a Single Page
Is this bothering you?
Is your Squarespace site's footer driving you a little crazy? You know that feeling - everything looks perfect until you scroll down, and BAM! The footer just doesn't quite fit with your carefully crafted page design. It's a small thing, but it's been nagging at you, hasn't it?
Well, you're not alone. Many Squarespace users have found themselves wishing they could tweak that footer theme to match each unique page. The good news? There's a solution, and it's simpler than you might think.
This tutorial will guide you through a little code hack that lets you change your footer theme on individual pages.
Prerequisites
To use custom code in Squarespace, users need a premium subscription plan. Some HTML, CSS, and JavaScript would be helpful to know to add code through the "Code Injection". Testing the code on various devices and browsers is crucial for compatibility and responsiveness.
Squarespace Version: 7.1
Subscription Plan: Business +
Knowledge: Basic Javascript, HTML, Web Inspecting, and good ol’ copying and pasting skills.
Blocks & Features Used: Code Block, Code Injection.
Access the Code Injection Panel For a Specific Page:
Squarespace Dashboard > Select your Pages > Settings Icon > Advanced Open Code Injection
For more detailed information about adding custom code, please see the Squarespace Help Page.
The Squarespace Theme Cheat Sheet
Before we dive into the code snippet, it's important to understand how Squarespace's theme attributes work. The site themes have different names than the attribute values that set them. Here's a quick reference:
| Squarespace Site Theme | Data Value |
|---|---|
| LIGHTEST 1 | white |
| LIGHTEST 2 | white-bold |
| LIGHT 1 | light |
| LIGHT 2 | light-bold |
| BRIGHT 1 | bright-inverse |
| BRIGHT 2 | bright |
| DARK 1 | dark |
| DARK 2 | dark-bold |
| DARKEST 1 | black |
| DARKEST 2 | black-bold |
PRO TIP: Setting Up a Theme Reference Section
To make your theming process easier and organized, I recommend creating an unlinked folder with pages of all of the themes in your Squarespace site. This will serve as a visual reference, and identifying theme inconsistencies when choosing styles for your footers. Click here to read more about my theme reference set up.
Adding the Code to the Page
This code assumes all sections in your footer has the same theme.
1. Select the page you want to change the footer of. Open the page settings and navigate to the code injection panel and paste this code:
<!-- LAZ-I.COM CHANGE FOOTER THEME -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var footerSections = document.querySelectorAll('#footer-sections section');
if (footerSections.length > 0) {
footerSections.forEach(function(section) {
section.setAttribute('data-section-theme', 'yourCustomTheme');
});
}
});
</script>2. Replace ‘yourCustomTheme‘ with the theme value you want (e.g., 'white' or 'black', etc.).
3. Save your changes, and reload your page.
Have multiple sections themes within the footer?
If you have more than one section within the footer with different themes, here is a more advanced approach to set their themes for a particular page:
<!-- LAZ-I.COM CHANGE FOOTER THEME -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Map the section themes to the section
var sectionThemes = {
1: 'yourCustomTheme',
2: 'yourCustomTheme'
};
var footerSections = document.querySelectorAll('#footer-sections section');
if (footerSections.length > 0) {
footerSections.forEach(function(section, index) {
var sectionIndex = index + 1;
if (sectionThemes.hasOwnProperty(sectionIndex)) {
section.setAttribute('data-section-theme', sectionThemes[sectionIndex]);
}
});
}
});
</script>Modify the sectionThemes object to specify which theme should be applied to each section. For example:
1: 'yourCustomTheme' applies the custom theme to the first section
2: 'yourCustomTheme'' applies the custom theme to the second section
Add or modify entries as needed to target your desired sections with specific themes
Conclusion
With this simple code hack, you now have the power to customize your Squarespace footer themes on a page-by-page basis. This technique allows for greater design flexibility and can help you create a more engaging and visually cohesive website.
FAQs
Q: Can I change the footer background on just one page in Squarespace?
A: Yes, you can change the footer background on a single page in Squarespace by using custom Javascript from this article. This allows you to target specific pages and customize the footer's appearance without affecting the rest of your site.
Q: Do I need to know coding to change the footer background on one page?
A: Basic knowledge of Javascript is helpful but not required. By following step-by-step instructions and using the provided code snippets, you can make the changes without extensive coding experience.
Q: Is it possible to revert the changes if I make a mistake?
A: Yes, you can easily revert changes by removing or editing the custom Javascript code you've added in the Code Injection section of your page.
